#F7F3D0 + #F7DCD0 + #D4D0C5 + #B3D1C1 + #CAE0D4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F7F3D0

Fresh Green · Beige · Lemon Cream

HEX

#F7F3D0

RGB

rgb(247, 243, 208)

HSL

hsl(54, 71%, 89%)

HSB

hsb(54, 16%, 97%)

CMYK

cmyk(0%, 2%, 16%, 3%)

Oklch

oklch(95.8% 0.046 101.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F7DCD0

Apricot · Bisque · Peach Orange

HEX

#F7DCD0

RGB

rgb(247, 220, 208)

HSL

hsl(18, 71%, 89%)

HSB

hsb(18, 16%, 97%)

CMYK

cmyk(0%, 11%, 16%, 3%)

Oklch

oklch(91.3% 0.034 45.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#D4D0C5

Goose Yellow · LightGray · Lemon Cream

HEX

#D4D0C5

RGB

rgb(212, 208, 197)

HSL

hsl(44, 15%, 80%)

HSB

hsb(44, 7%, 83%)

CMYK

cmyk(0%, 2%, 7%, 17%)

Oklch

oklch(85.8% 0.016 90.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#B3D1C1

Celadon · Silver · Apple Green

HEX

#B3D1C1

RGB

rgb(179, 209, 193)

HSL

hsl(148, 25%, 76%)

HSB

hsb(148, 14%, 82%)

CMYK

cmyk(14%, 0%, 8%, 18%)

Oklch

oklch(83.4% 0.039 162.2)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#CAE0D4

Celadon · LightGray · Mint Green

HEX

#CAE0D4

RGB

rgb(202, 224, 212)

HSL

hsl(147, 26%, 84%)

HSB

hsb(147, 10%, 88%)

CMYK

cmyk(10%, 0%, 5%, 12%)

Oklch

oklch(88.7% 0.029 162.0)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7F3D0

CFD3F7

Analogous

F7DFCF

F7F3D0

E7F7CF

Triadic

F7F3D0

CFF7F3

F3CFF7

Split-Comp.

F7F3D0

CFE7F7

DFCFF7

Tetradic

F7F3D0

CFF7DF

CFD3F7

F7CFE7

Contrast Matrix WCAG 2.1 Contrast

F7F3D0	F7DCD0	D4D0C5	B3D1C1	CAE0D4
—	1.2 Fail	1.4 Fail	1.5 Fail	1.2 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.1 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.2 Fail	—

White BG

1.1Fail

1.3Fail

1.5Fail

1.6Fail

1.4Fail

Black BG

18.7AAA

16.1AAA

13.6AAA

12.8AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F5F5D8

EBEBD3

D2D2C8

C0C0C5

D4D4D7

Deuteranopia

F6F6DB

EDEFD4

D3D3C8

BEBCC6

D2D1D8

Tritanopia

F7DFE1

F6D5D6

D4CACA

B4C8C9

CBD9DA

Achromatopsia

F0F0F0

E3E3E3

D0D0D0

C6C6C6

D8D8D8

Shades & Tints Shades & Tints

#F7F3D0

Dark

Light

#F7DCD0

Dark

Light

#D4D0C5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7f3d0;
  --color-2: #f7dcd0;
  --color-3: #d4d0c5;
  --color-4: #b3d1c1;
  --color-5: #cae0d4;
}

SCSS

$color-1: #f7f3d0;
$color-2: #f7dcd0;
$color-3: #d4d0c5;
$color-4: #b3d1c1;
$color-5: #cae0d4;

TAILWIND

colors: {
  'brand-1': '#f7f3d0',
  'brand-2': '#f7dcd0',
  'brand-3': '#d4d0c5',
  'brand-4': '#b3d1c1',
  'brand-5': '#cae0d4',
}

RGB Array

[247, 243, 208], [247, 220, 208], [212, 208, 197], [179, 209, 193], [202, 224, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7F3D0, #F7DCD0, #D4D0C5, #B3D1C1, #CAE0D4 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f7f3d0; --color-2: #f7dcd0; --color-3: #d4d0c5; --color-4: #b3d1c1; --color-5: #cae0d4. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color