#F0D1C0 + #EAE3C4 + #949985 + #A9C54C + #CDD9BD · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0D1C0

Apricot · Wheat · Peach Orange

HEX

#F0D1C0

RGB

rgb(240, 209, 192)

HSL

hsl(21, 62%, 85%)

HSB

hsb(21, 20%, 94%)

CMYK

cmyk(0%, 13%, 20%, 6%)

Oklch

oklch(88.2% 0.042 50.6)

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

#EAE3C4

Goose Yellow · Wheat · Lemon Cream

HEX

#EAE3C4

RGB

rgb(234, 227, 196)

HSL

hsl(49, 47%, 84%)

HSB

hsb(49, 16%, 92%)

CMYK

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

Oklch

oklch(91.3% 0.042 96.6)

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

#949985

Grass Green · Gray · Silver Sand

HEX

#949985

RGB

rgb(148, 153, 133)

HSL

hsl(75, 9%, 56%)

HSB

hsb(75, 13%, 60%)

CMYK

cmyk(3%, 0%, 13%, 40%)

Oklch

oklch(67.3% 0.029 118.6)

Traditional「Grass Green」· Paint「Silver Sand」· Creative Urban Concrete

#A9C54C

Grass Green · GreenYellow · Olive Green

HEX

#A9C54C

RGB

rgb(169, 197, 76)

HSL

hsl(74, 51%, 54%)

HSB

hsb(74, 61%, 77%)

CMYK

cmyk(14%, 0%, 61%, 23%)

Oklch

oklch(77.9% 0.150 121.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#CDD9BD

Willow Green · LightGray · Apple Green

HEX

#CDD9BD

RGB

rgb(205, 217, 189)

HSL

hsl(86, 27%, 80%)

HSB

hsb(86, 13%, 85%)

CMYK

cmyk(6%, 0%, 13%, 15%)

Oklch

oklch(86.9% 0.040 126.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0D1C0

C1E0F0

Analogous

F0C1C8

F0D1C0

F0E9C1

Triadic

F0D1C0

C1F0D2

D2C1F0

Split-Comp.

F0D1C0

C1F0E9

C1C8F0

Tetradic

F0D1C0

C8F0C1

C1E0F0

E9C1F0

Contrast Matrix WCAG 2.1 Contrast

F0D1C0	EAE3C4	949985	A9C54C	CDD9BD
—	1.1 Fail	2.0 Fail	1.4 Fail	1.0 Fail
1.1 Fail	—	2.3 Fail	1.5 Fail	1.1 Fail
2.0 Fail	2.3 Fail	—	1.5 Fail	2.0 Fail
1.4 Fail	1.5 Fail	1.5 Fail	—	1.3 Fail
1.0 Fail	1.1 Fail	2.0 Fail	1.3 Fail	—

White BG

1.4Fail

1.3Fail

2.9Fail

1.9Fail

1.5Fail

Black BG

14.6AAA

16.3AAA

7.2AAA

10.8AAA

14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E2C4

E7E7CC

96968A

B5B569

D2D2C4

Deuteranopia

E4E7C5

E7E8CD

96968B

B4B170

D2D1C5

Tritanopia

EEC7C8

EAD1D3

948E8F

AA8085

CEC9CA

Achromatopsia

D8D8D8

E2E2E2

959595

AFAFAF

D2D2D2

Shades & Tints Shades & Tints

#F0D1C0

Dark

Light

#EAE3C4

Dark

Light

#949985

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0d1c0;
  --color-2: #eae3c4;
  --color-3: #949985;
  --color-4: #a9c54c;
  --color-5: #cdd9bd;
}

SCSS

$color-1: #f0d1c0;
$color-2: #eae3c4;
$color-3: #949985;
$color-4: #a9c54c;
$color-5: #cdd9bd;

TAILWIND

colors: {
  'brand-1': '#f0d1c0',
  'brand-2': '#eae3c4',
  'brand-3': '#949985',
  'brand-4': '#a9c54c',
  'brand-5': '#cdd9bd',
}

RGB Array

[240, 209, 192], [234, 227, 196], [148, 153, 133], [169, 197, 76], [205, 217, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #F0D1C0, #EAE3C4, #949985, #A9C54C, #CDD9BD 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: #f0d1c0; --color-2: #eae3c4; --color-3: #949985; --color-4: #a9c54c; --color-5: #cdd9bd. 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 cool-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