#C8D4A6 + #DEE5C4 + #B4CCA8 + #EAF5DB + #D8E8BD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C8D4A6

Willow Green · Silver · Apple Green

HEX

#C8D4A6

RGB

rgb(200, 212, 166)

HSL

hsl(76, 35%, 74%)

HSB

hsb(76, 22%, 83%)

CMYK

cmyk(6%, 0%, 22%, 17%)

Oklch

oklch(84.9% 0.063 119.6)

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

#DEE5C4

Willow Green · LightGray · Mint Green

HEX

#DEE5C4

RGB

rgb(222, 229, 196)

HSL

hsl(73, 39%, 83%)

HSB

hsb(73, 14%, 90%)

CMYK

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

Oklch

oklch(90.8% 0.044 117.0)

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

#B4CCA8

Celadon · Silver · Apple Green

HEX

#B4CCA8

RGB

rgb(180, 204, 168)

HSL

hsl(100, 26%, 73%)

HSB

hsb(100, 18%, 80%)

CMYK

cmyk(12%, 0%, 18%, 20%)

Oklch

oklch(81.8% 0.056 135.2)

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

#EAF5DB

Willow Green · Beige · Mint Green

HEX

#EAF5DB

RGB

rgb(234, 245, 219)

HSL

hsl(85, 57%, 91%)

HSB

hsb(85, 11%, 96%)

CMYK

cmyk(4%, 0%, 11%, 4%)

Oklch

oklch(95.5% 0.036 125.8)

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

#D8E8BD

Willow Green · LightGray · Mint Green

HEX

#D8E8BD

RGB

rgb(216, 232, 189)

HSL

hsl(82, 48%, 83%)

HSB

hsb(82, 19%, 91%)

CMYK

cmyk(7%, 0%, 19%, 9%)

Oklch

oklch(90.8% 0.059 124.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8D4A6

B2A5D4

Analogous

D4C9A5

C8D4A6

B0D4A5

Triadic

C8D4A6

A5C8D4

D4A5C8

Split-Comp.

C8D4A6

A5B0D4

C9A5D4

Tetradic

C8D4A6

A5D4C9

B2A5D4

D4A5B0

Contrast Matrix WCAG 2.1 Contrast

C8D4A6	DEE5C4	B4CCA8	EAF5DB	D8E8BD
—	1.2 Fail	1.1 Fail	1.4 Fail	1.2 Fail
1.2 Fail	—	1.3 Fail	1.2 Fail	1.0 Fail
1.1 Fail	1.3 Fail	—	1.5 Fail	1.3 Fail
1.4 Fail	1.2 Fail	1.5 Fail	—	1.1 Fail
1.2 Fail	1.0 Fail	1.3 Fail	1.1 Fail	—

White BG

1.6Fail

1.3Fail

1.7Fail

1.1Fail

1.3Fail

Black BG

13.4AAA

16.1AAA

12.1AAA

18.6AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCDB1

E1E1CC

BEBFB1

EFEFE1

DFDFC7

Deuteranopia

CDCCB4

E1E0CE

BDBBB3

EEEDE3

DEDDCA

Tritanopia

C9BABC

DED2D4

B5B8B9

EBE6E7

D9D0D1

Achromatopsia

CBCBCB

DFDFDF

C1C1C1

EFEFEF

DEDEDE

Shades & Tints Shades & Tints

#C8D4A6

Dark

Light

#DEE5C4

Dark

Light

#B4CCA8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8d4a6;
  --color-2: #dee5c4;
  --color-3: #b4cca8;
  --color-4: #eaf5db;
  --color-5: #d8e8bd;
}

SCSS

$color-1: #c8d4a6;
$color-2: #dee5c4;
$color-3: #b4cca8;
$color-4: #eaf5db;
$color-5: #d8e8bd;

TAILWIND

colors: {
  'brand-1': '#c8d4a6',
  'brand-2': '#dee5c4',
  'brand-3': '#b4cca8',
  'brand-4': '#eaf5db',
  'brand-5': '#d8e8bd',
}

RGB Array

[200, 212, 166], [222, 229, 196], [180, 204, 168], [234, 245, 219], [216, 232, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8D4A6, #DEE5C4, #B4CCA8, #EAF5DB, #D8E8BD 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: #c8d4a6; --color-2: #dee5c4; --color-3: #b4cca8; --color-4: #eaf5db; --color-5: #d8e8bd. 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