#ECF2D5 + #E8F0AA + #DEDEA4 + #D6D0A3 + #C9C1A1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ECF2D5

Willow Green · Beige · Mint Green

HEX

#ECF2D5

RGB

rgb(236, 242, 213)

HSL

hsl(72, 53%, 89%)

HSB

hsb(72, 12%, 95%)

CMYK

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

Oklch

oklch(94.9% 0.039 116.6)

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

#E8F0AA

Fresh Green · Wheat · Lemon Cream

HEX

#E8F0AA

RGB

rgb(232, 240, 170)

HSL

hsl(67, 70%, 80%)

HSB

hsb(67, 29%, 94%)

CMYK

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

Oklch

oklch(93.3% 0.090 113.5)

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

#DEDEA4

Fresh Green · Wheat · Lemon Cream

HEX

#DEDEA4

RGB

rgb(222, 222, 164)

HSL

hsl(60, 47%, 76%)

HSB

hsb(60, 26%, 87%)

CMYK

cmyk(0%, 0%, 26%, 13%)

Oklch

oklch(88.7% 0.075 107.8)

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

#D6D0A3

Fresh Green · Tan · Sunflower

HEX

#D6D0A3

RGB

rgb(214, 208, 163)

HSL

hsl(53, 38%, 74%)

HSB

hsb(53, 24%, 84%)

CMYK

cmyk(0%, 3%, 24%, 16%)

Oklch

oklch(85.1% 0.060 101.2)

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

#C9C1A1

Goose Yellow · Tan · Sunflower

HEX

#C9C1A1

RGB

rgb(201, 193, 161)

HSL

hsl(48, 27%, 71%)

HSB

hsb(48, 20%, 79%)

CMYK

cmyk(0%, 4%, 20%, 21%)

Oklch

oklch(80.9% 0.044 95.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ECF2D5

DAD4F2

Analogous

F2E9D4

ECF2D5

DDF2D4

Triadic

ECF2D5

D4ECF2

F2D4EC

Split-Comp.

ECF2D5

D4DDF2

E9D4F2

Tetradic

ECF2D5

D4F2E9

DAD4F2

F2D4DD

Contrast Matrix WCAG 2.1 Contrast

ECF2D5	E8F0AA	DEDEA4	D6D0A3	C9C1A1
—	1.0 Fail	1.2 Fail	1.4 Fail	1.6 Fail
1.0 Fail	—	1.2 Fail	1.3 Fail	1.5 Fail
1.2 Fail	1.2 Fail	—	1.1 Fail	1.3 Fail
1.4 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.6 Fail	1.5 Fail	1.3 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.6Fail

1.8Fail

Black BG

18.2AAA

17.5AAA

15.1AAA

13.4AAA

11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EFEFDC

EBECBB

DEDEB2

D3D3AE

C6C5A9

Deuteranopia

EEEEDE

EBEABF

DEDEB5

D4D4B1

C6C7AB

Tritanopia

ECE2E3

E8C8CB

DEBDC0

D6B6B8

C9AFB0

Achromatopsia

EDEDED

E6E6E6

D7D7D7

CDCDCD

C0C0C0

Shades & Tints Shades & Tints

#ECF2D5

Dark

Light

#E8F0AA

Dark

Light

#DEDEA4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ecf2d5;
  --color-2: #e8f0aa;
  --color-3: #dedea4;
  --color-4: #d6d0a3;
  --color-5: #c9c1a1;
}

SCSS

$color-1: #ecf2d5;
$color-2: #e8f0aa;
$color-3: #dedea4;
$color-4: #d6d0a3;
$color-5: #c9c1a1;

TAILWIND

colors: {
  'brand-1': '#ecf2d5',
  'brand-2': '#e8f0aa',
  'brand-3': '#dedea4',
  'brand-4': '#d6d0a3',
  'brand-5': '#c9c1a1',
}

RGB Array

[236, 242, 213], [232, 240, 170], [222, 222, 164], [214, 208, 163], [201, 193, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ECF2D5, #E8F0AA, #DEDEA4, #D6D0A3, #C9C1A1 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: #ecf2d5; --color-2: #e8f0aa; --color-3: #dedea4; --color-4: #d6d0a3; --color-5: #c9c1a1. 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