#CED4D4 + #F0EDDC + #E0C68B + #BA9A69 + #8C8B76 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CED4D4

Silver Gray · LightGray · Pearl Gray

HEX

#CED4D4

RGB

rgb(206, 212, 212)

HSL

hsl(180, 7%, 82%)

HSB

hsb(180, 3%, 83%)

CMYK

cmyk(3%, 0%, 0%, 17%)

Oklch

oklch(86.5% 0.007 197.0)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#F0EDDC

Fresh Green · Beige · Lemon Cream

HEX

#F0EDDC

RGB

rgb(240, 237, 220)

HSL

hsl(51, 40%, 90%)

HSB

hsb(51, 8%, 94%)

CMYK

cmyk(0%, 1%, 8%, 6%)

Oklch

oklch(94.4% 0.023 98.6)

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

#E0C68B

Goose Yellow · BurlyWood · Sunflower

HEX

#E0C68B

RGB

rgb(224, 198, 139)

HSL

hsl(42, 58%, 71%)

HSB

hsb(42, 38%, 88%)

CMYK

cmyk(0%, 12%, 38%, 12%)

Oklch

oklch(83.5% 0.082 86.8)

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

#BA9A69

Ginger · Tan · Warm Sun

HEX

#BA9A69

RGB

rgb(186, 154, 105)

HSL

hsl(36, 37%, 57%)

HSB

hsb(36, 44%, 73%)

CMYK

cmyk(0%, 17%, 44%, 27%)

Oklch

oklch(70.4% 0.076 77.7)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#8C8B76

Autumn Sage · Gray · Warm Gray

HEX

#8C8B76

RGB

rgb(140, 139, 118)

HSL

hsl(57, 9%, 51%)

HSB

hsb(57, 16%, 55%)

CMYK

cmyk(0%, 1%, 16%, 45%)

Oklch

oklch(63.2% 0.030 105.0)

Traditional「Autumn Sage」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CED4D4

D4CECE

Analogous

CED4D1

CED4D4

CED1D4

Triadic

CED4D4

D4CED4

D4D4CE

Split-Comp.

CED4D4

D4CED1

D4D1CE

Tetradic

CED4D4

D1CED4

D4CECE

D1D4CE

Contrast Matrix WCAG 2.1 Contrast

CED4D4	F0EDDC	E0C68B	BA9A69	8C8B76
—	1.3 Fail	1.1 Fail	1.8 Fail	2.3 Fail
1.3 Fail	—	1.4 Fail	2.3 Fail	2.9 Fail
1.1 Fail	1.4 Fail	—	1.6 Fail	2.1 Fail
1.8 Fail	2.3 Fail	1.6 Fail	—	1.3 Fail
2.3 Fail	2.9 Fail	2.1 Fail	1.3 Fail	—

White BG

1.5Fail

1.2Fail

1.7Fail

2.7Fail

3.5AA Large

Black BG

14.0AAA

17.9AAA

12.6AAA

7.9AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1D4

EFEFE0

D5D599

ACAC75

8C8C7B

Deuteranopia

D0D0D4

EFEFE1

D6D89D

AEB078

8C8C7C

Tritanopia

CED4D4

F0E3E4

DFA5A7

B87E80

8C7F80

Achromatopsia

D2D2D2

ECECEC

C7C7C7

9E9E9E

898989

Shades & Tints Shades & Tints

#CED4D4

Dark

Light

#F0EDDC

Dark

Light

#E0C68B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ced4d4;
  --color-2: #f0eddc;
  --color-3: #e0c68b;
  --color-4: #ba9a69;
  --color-5: #8c8b76;
}

SCSS

$color-1: #ced4d4;
$color-2: #f0eddc;
$color-3: #e0c68b;
$color-4: #ba9a69;
$color-5: #8c8b76;

TAILWIND

colors: {
  'brand-1': '#ced4d4',
  'brand-2': '#f0eddc',
  'brand-3': '#e0c68b',
  'brand-4': '#ba9a69',
  'brand-5': '#8c8b76',
}

RGB Array

[206, 212, 212], [240, 237, 220], [224, 198, 139], [186, 154, 105], [140, 139, 118]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #CED4D4, #F0EDDC, #E0C68B, #BA9A69, #8C8B76 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: #ced4d4; --color-2: #f0eddc; --color-3: #e0c68b; --color-4: #ba9a69; --color-5: #8c8b76. 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 earth-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