#D1E1D9 + #D4DDC1 + #DCD69E + #E7C786 + #E4B885 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D1E1D9

Jade · LightGray · Mint Green

HEX

#D1E1D9

RGB

rgb(209, 225, 217)

HSL

hsl(150, 21%, 85%)

HSB

hsb(150, 7%, 88%)

CMYK

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

Oklch

oklch(89.5% 0.020 164.5)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#D4DDC1

Willow Green · LightGray · Mint Green

HEX

#D4DDC1

RGB

rgb(212, 221, 193)

HSL

hsl(79, 29%, 81%)

HSB

hsb(79, 13%, 87%)

CMYK

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

Oklch

oklch(88.3% 0.039 121.7)

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

#DCD69E

Fresh Green · Khaki · Sunflower

HEX

#DCD69E

RGB

rgb(220, 214, 158)

HSL

hsl(54, 47%, 74%)

HSB

hsb(54, 28%, 86%)

CMYK

cmyk(0%, 3%, 28%, 14%)

Oklch

oklch(86.7% 0.073 102.7)

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

#E7C786

Goose Yellow · BurlyWood · Sunflower

HEX

#E7C786

RGB

rgb(231, 199, 134)

HSL

hsl(40, 67%, 72%)

HSB

hsb(40, 42%, 91%)

CMYK

cmyk(0%, 14%, 42%, 9%)

Oklch

oklch(84.2% 0.090 84.4)

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

#E4B885

Goose Yellow · BurlyWood · Warm Sun

HEX

#E4B885

RGB

rgb(228, 184, 133)

HSL

hsl(32, 64%, 71%)

HSB

hsb(32, 42%, 89%)

CMYK

cmyk(0%, 19%, 42%, 11%)

Oklch

oklch(81.0% 0.084 70.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1E1D9

E1D1D9

Analogous

D1E1D1

D1E1D9

D1E1E1

Triadic

D1E1D9

D9D1E1

E1D9D1

Split-Comp.

D1E1D9

E1D1E1

E1D1D1

Tetradic

D1E1D9

D1D1E1

E1D1D9

E1E1D1

Contrast Matrix WCAG 2.1 Contrast

D1E1D9	D4DDC1	DCD69E	E7C786	E4B885
—	1.0 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.8Fail

Black BG

15.5AAA

14.9AAA

14.2AAA

12.9AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D8DB

D8D8C8

D9D9AC

D9D996

D1D191

Deuteranopia

D7D6DB

D7D7C9

DADAAF

DBDD9A

D4D794

Tritanopia

D2DCDD

D4CDCE

DCB6B9

E5A2A5

E29B9D

Achromatopsia

DBDBDB

D7D7D7

D1D1D1

C9C9C9

BFBFBF

Shades & Tints Shades & Tints

#D1E1D9

Dark

Light

#D4DDC1

Dark

Light

#DCD69E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1e1d9;
  --color-2: #d4ddc1;
  --color-3: #dcd69e;
  --color-4: #e7c786;
  --color-5: #e4b885;
}

SCSS

$color-1: #d1e1d9;
$color-2: #d4ddc1;
$color-3: #dcd69e;
$color-4: #e7c786;
$color-5: #e4b885;

TAILWIND

colors: {
  'brand-1': '#d1e1d9',
  'brand-2': '#d4ddc1',
  'brand-3': '#dcd69e',
  'brand-4': '#e7c786',
  'brand-5': '#e4b885',
}

RGB Array

[209, 225, 217], [212, 221, 193], [220, 214, 158], [231, 199, 134], [228, 184, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1E1D9, #D4DDC1, #DCD69E, #E7C786, #E4B885 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: #d1e1d9; --color-2: #d4ddc1; --color-3: #dcd69e; --color-4: #e7c786; --color-5: #e4b885. 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