#ECF1E5 + #E7EEDD + #DFE9D2 + #D9E6C8 + #D4E2BF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF1E5

Willow Green · Beige · Mint Green

HEX

#ECF1E5

RGB

rgb(236, 241, 229)

HSL

hsl(85, 30%, 92%)

HSB

hsb(85, 5%, 95%)

CMYK

cmyk(2%, 0%, 5%, 5%)

Oklch

oklch(95.1% 0.017 125.3)

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

#E7EEDD

Willow Green · Beige · Mint Green

HEX

#E7EEDD

RGB

rgb(231, 238, 221)

HSL

hsl(85, 33%, 90%)

HSB

hsb(85, 7%, 93%)

CMYK

cmyk(3%, 0%, 7%, 7%)

Oklch

oklch(93.9% 0.024 125.2)

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

#DFE9D2

Willow Green · LightGray · Mint Green

HEX

#DFE9D2

RGB

rgb(223, 233, 210)

HSL

hsl(86, 34%, 87%)

HSB

hsb(86, 10%, 91%)

CMYK

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

Oklch

oklch(92.0% 0.032 126.3)

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

#D9E6C8

Willow Green · LightGray · Mint Green

HEX

#D9E6C8

RGB

rgb(217, 230, 200)

HSL

hsl(86, 37%, 84%)

HSB

hsb(86, 13%, 90%)

CMYK

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

Oklch

oklch(90.7% 0.042 126.4)

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

#D4E2BF

Willow Green · LightGray · Mint Green

HEX

#D4E2BF

RGB

rgb(212, 226, 191)

HSL

hsl(84, 38%, 82%)

HSB

hsb(84, 15%, 89%)

CMYK

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

Oklch

oklch(89.3% 0.049 125.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF1E5

EAE4F1

Analogous

F1F0E4

ECF1E5

E6F1E4

Triadic

ECF1E5

E4ECF1

F1E4EC

Split-Comp.

ECF1E5

E4E6F1

F0E4F1

Tetradic

ECF1E5

E4F1F0

EAE4F1

F1E4E6

Contrast Matrix WCAG 2.1 Contrast

ECF1E5	E7EEDD	DFE9D2	D9E6C8	D4E2BF
—	1.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	—	1.0 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.0 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.0 Fail	—

White BG

1.1Fail

1.2Fail

1.3Fail

1.4Fail

Black BG

18.3AAA

17.7AAA

16.7AAA

16.1AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEEE8

EAEAE1

E3E3D8

DFDFCF

DADAC7

Deuteranopia

EEEEE9

EAE9E2

E3E2D9

DEDDD1

D9D8CA

Tritanopia

ECEAEB

E7E4E5

E0DCDD

DAD5D6

D5CED0

Achromatopsia

EEEEEE

EAEAEA

E3E3E3

DFDFDF

DADADA

Shades & Tints Shades & Tints

#ECF1E5

Dark

Light

#E7EEDD

Dark

Light

#DFE9D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf1e5;
  --color-2: #e7eedd;
  --color-3: #dfe9d2;
  --color-4: #d9e6c8;
  --color-5: #d4e2bf;
}

SCSS

$color-1: #ecf1e5;
$color-2: #e7eedd;
$color-3: #dfe9d2;
$color-4: #d9e6c8;
$color-5: #d4e2bf;

TAILWIND

colors: {
  'brand-1': '#ecf1e5',
  'brand-2': '#e7eedd',
  'brand-3': '#dfe9d2',
  'brand-4': '#d9e6c8',
  'brand-5': '#d4e2bf',
}

RGB Array

[236, 241, 229], [231, 238, 221], [223, 233, 210], [217, 230, 200], [212, 226, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF1E5, #E7EEDD, #DFE9D2, #D9E6C8, #D4E2BF 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: #ecf1e5; --color-2: #e7eedd; --color-3: #dfe9d2; --color-4: #d9e6c8; --color-5: #d4e2bf. 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