#D4E4CA + #DDE6C8 + #E8EBCB + #F0EFCE + #F8F5CD · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4E4CA

Celadon · LightGray · Mint Green

HEX

#D4E4CA

RGB

rgb(212, 228, 202)

HSL

hsl(97, 33%, 84%)

HSB

hsb(97, 11%, 89%)

CMYK

cmyk(7%, 0%, 11%, 11%)

Oklch

oklch(90.0% 0.039 133.2)

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

#DDE6C8

Willow Green · LightGray · Mint Green

HEX

#DDE6C8

RGB

rgb(221, 230, 200)

HSL

hsl(78, 37%, 84%)

HSB

hsb(78, 13%, 90%)

CMYK

cmyk(4%, 0%, 13%, 10%)

Oklch

oklch(91.0% 0.041 120.8)

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

#E8EBCB

Fresh Green · Beige · Lemon Cream

HEX

#E8EBCB

RGB

rgb(232, 235, 203)

HSL

hsl(66, 44%, 86%)

HSB

hsb(66, 14%, 92%)

CMYK

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

Oklch

oklch(92.9% 0.042 111.6)

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

#F0EFCE

Fresh Green · Beige · Lemon Cream

HEX

#F0EFCE

RGB

rgb(240, 239, 206)

HSL

hsl(58, 53%, 87%)

HSB

hsb(58, 14%, 94%)

CMYK

cmyk(0%, 0%, 14%, 6%)

Oklch

oklch(94.4% 0.043 105.8)

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

#F8F5CD

Fresh Green · Beige · Lemon Cream

HEX

#F8F5CD

RGB

rgb(248, 245, 205)

HSL

hsl(56, 75%, 89%)

HSB

hsb(56, 17%, 97%)

CMYK

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

Oklch

oklch(96.2% 0.052 103.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4E4CA

D9C9E4

Analogous

E1E4C9

D4E4CA

C9E4CC

Triadic

D4E4CA

C9D3E4

E4C9D3

Split-Comp.

D4E4CA

CCC9E4

E4C9E1

Tetradic

D4E4CA

C9E1E4

D9C9E4

E4CCC9

Contrast Matrix WCAG 2.1 Contrast

D4E4CA	DDE6C8	E8EBCB	F0EFCE	F8F5CD
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.2 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.3Fail

1.2Fail

1.1Fail

Black BG

15.7AAA

16.2AAA

17.2AAA

17.9AAA

18.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBD0

E1E1CF

E9E9D3

F0F0D6

F7F7D7

Deuteranopia

DAD9D2

E0E0D1

E9E9D5

F0F0D8

F7F7D9

Tritanopia

D5D5D6

DDD5D6

E8D9DA

F0DCDE

F8DEE0

Achromatopsia

DCDCDC

E0E0E0

E6E6E6

ECECEC

F1F1F1

Shades & Tints Shades & Tints

#D4E4CA

Dark

Light

#DDE6C8

Dark

Light

#E8EBCB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4e4ca;
  --color-2: #dde6c8;
  --color-3: #e8ebcb;
  --color-4: #f0efce;
  --color-5: #f8f5cd;
}

SCSS

$color-1: #d4e4ca;
$color-2: #dde6c8;
$color-3: #e8ebcb;
$color-4: #f0efce;
$color-5: #f8f5cd;

TAILWIND

colors: {
  'brand-1': '#d4e4ca',
  'brand-2': '#dde6c8',
  'brand-3': '#e8ebcb',
  'brand-4': '#f0efce',
  'brand-5': '#f8f5cd',
}

RGB Array

[212, 228, 202], [221, 230, 200], [232, 235, 203], [240, 239, 206], [248, 245, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #D4E4CA, #DDE6C8, #E8EBCB, #F0EFCE, #F8F5CD 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: #d4e4ca; --color-2: #dde6c8; --color-3: #e8ebcb; --color-4: #f0efce; --color-5: #f8f5cd. 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