#D8F0E9 + #D6E0B6 + #E1A966 + #DE7878 + #B85F80 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8F0E9

Jade · Lavender · Glacier Blue

HEX

#D8F0E9

RGB

rgb(216, 240, 233)

HSL

hsl(162, 44%, 89%)

HSB

hsb(162, 10%, 94%)

CMYK

cmyk(10%, 0%, 3%, 6%)

Oklch

oklch(93.6% 0.027 176.3)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#D6E0B6

Willow Green · Wheat · Apple Green

HEX

#D6E0B6

RGB

rgb(214, 224, 182)

HSL

hsl(74, 40%, 80%)

HSB

hsb(74, 19%, 88%)

CMYK

cmyk(4%, 0%, 19%, 12%)

Oklch

oklch(88.8% 0.057 118.4)

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

#E1A966

Ginger · SandyBrown · Warm Sun

HEX

#E1A966

RGB

rgb(225, 169, 102)

HSL

hsl(33, 67%, 64%)

HSB

hsb(33, 55%, 88%)

CMYK

cmyk(0%, 25%, 55%, 12%)

Oklch

oklch(77.3% 0.107 70.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#DE7878

Peach Pink · LightCoral · Coral Red

HEX

#DE7878

RGB

rgb(222, 120, 120)

HSL

hsl(0, 61%, 67%)

HSB

hsb(0, 46%, 87%)

CMYK

cmyk(0%, 46%, 46%, 13%)

Oklch

oklch(68.7% 0.127 20.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B85F80

Dark Violet · Gray · Rose Pink

HEX

#B85F80

RGB

rgb(184, 95, 128)

HSL

hsl(338, 39%, 55%)

HSB

hsb(338, 48%, 72%)

CMYK

cmyk(0%, 48%, 30%, 28%)

Oklch

oklch(60.0% 0.120 357.8)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8F0E9

EFD7DE

Analogous

D7EFDC

D8F0E9

D7EAEF

Triadic

D8F0E9

E8D7EF

EFE8D7

Split-Comp.

D8F0E9

EFD7EA

EFDCD7

Tetradic

D8F0E9

DCD7EF

EFD7DE

EAEFD7

Contrast Matrix WCAG 2.1 Contrast

D8F0E9	D6E0B6	E1A966	DE7878	B85F80
—	1.2 Fail	1.7 Fail	2.5 Fail	3.5 AA Large
1.2 Fail	—	1.5 Fail	2.2 Fail	3.0 AA Large
1.7 Fail	1.5 Fail	—	1.4 Fail	2.0 Fail
2.5 Fail	2.2 Fail	1.4 Fail	—	1.4 Fail
3.5 AA Large	3.0 AA Large	2.0 Fail	1.4 Fail	—

White BG

1.2Fail

1.4Fail

2.1Fail

3.0Fail

4.2AA Large

Black BG

17.6AAA

15.2AAA

10.1AAA

7.1AAA

5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E3EB

DADAC0

C9C876

B2B178

919178

Deuteranopia

E1DFEB

DAD9C3

CCD07A

B8BF78

979D76

Tritanopia

D9ECEC

D6C8CA

DE8386

D97878

B47270

Achromatopsia

E8E8E8

D8D8D8

B2B2B2

969696

7D7D7D

Shades & Tints Shades & Tints

#D8F0E9

Dark

Light

#D6E0B6

Dark

Light

#E1A966

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8f0e9;
  --color-2: #d6e0b6;
  --color-3: #e1a966;
  --color-4: #de7878;
  --color-5: #b85f80;
}

SCSS

$color-1: #d8f0e9;
$color-2: #d6e0b6;
$color-3: #e1a966;
$color-4: #de7878;
$color-5: #b85f80;

TAILWIND

colors: {
  'brand-1': '#d8f0e9',
  'brand-2': '#d6e0b6',
  'brand-3': '#e1a966',
  'brand-4': '#de7878',
  'brand-5': '#b85f80',
}

RGB Array

[216, 240, 233], [214, 224, 182], [225, 169, 102], [222, 120, 120], [184, 95, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #D8F0E9, #D6E0B6, #E1A966, #DE7878, #B85F80 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: #d8f0e9; --color-2: #d6e0b6; --color-3: #e1a966; --color-4: #de7878; --color-5: #b85f80. 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