#D2EB8D + #E2EFAA + #CFE0A8 + #B2CCA1 + #8AA68E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2EB8D

Willow Green · Khaki · Apple Green

HEX

#D2EB8D

RGB

rgb(210, 235, 141)

HSL

hsl(76, 70%, 74%)

HSB

hsb(76, 40%, 92%)

CMYK

cmyk(11%, 0%, 40%, 8%)

Oklch

oklch(90.1% 0.122 121.1)

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

#E2EFAA

Willow Green · Wheat · Apple Green

HEX

#E2EFAA

RGB

rgb(226, 239, 170)

HSL

hsl(71, 68%, 80%)

HSB

hsb(71, 29%, 94%)

CMYK

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

Oklch

oklch(92.6% 0.090 116.9)

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

#CFE0A8

Willow Green · Wheat · Apple Green

HEX

#CFE0A8

RGB

rgb(207, 224, 168)

HSL

hsl(78, 47%, 77%)

HSB

hsb(78, 25%, 88%)

CMYK

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

Oklch

oklch(88.0% 0.076 121.7)

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

#B2CCA1

Celadon · Silver · Apple Green

HEX

#B2CCA1

RGB

rgb(178, 204, 161)

HSL

hsl(96, 30%, 72%)

HSB

hsb(96, 21%, 80%)

CMYK

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

Oklch

oklch(81.4% 0.065 133.2)

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

#8AA68E

Celadon · DarkSeaGreen · Olive Green

HEX

#8AA68E

RGB

rgb(138, 166, 142)

HSL

hsl(129, 14%, 60%)

HSB

hsb(129, 17%, 65%)

CMYK

cmyk(17%, 0%, 14%, 35%)

Oklch

oklch(69.7% 0.047 149.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2EB8D

A78EEB

Analogous

EBD58E

D2EB8D

A4EB8E

Triadic

D2EB8D

8ED2EB

EB8ED2

Split-Comp.

D2EB8D

8EA4EB

D58EEB

Tetradic

D2EB8D

8EEBD5

A78EEB

EB8EA4

Contrast Matrix WCAG 2.1 Contrast

D2EB8D	E2EFAA	CFE0A8	B2CCA1	8AA68E
—	1.1 Fail	1.1 Fail	1.3 Fail	2.0 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	2.2 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.9 Fail
1.3 Fail	1.4 Fail	1.2 Fail	—	1.5 Fail
2.0 Fail	2.2 Fail	1.9 Fail	1.5 Fail	—

White BG

1.3Fail

1.2Fail

1.4Fail

1.7Fail

2.6Fail

Black BG

16.0AAA

17.2AAA

14.9AAA

12.0AAA

7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DDDDA4

E8E8BB

D6D7B6

BDBDAB

969694

Deuteranopia

DBDAA9

E7E6BF

D5D4B9

BCBAAE

959295

Tritanopia

D3B6BA

E3C8CB

D0C0C3

B3B4B5

8B9899

Achromatopsia

D9D9D9

E3E3E3

D5D5D5

BFBFBF

9B9B9B

Shades & Tints Shades & Tints

#D2EB8D

Dark

Light

#E2EFAA

Dark

Light

#CFE0A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2eb8d;
  --color-2: #e2efaa;
  --color-3: #cfe0a8;
  --color-4: #b2cca1;
  --color-5: #8aa68e;
}

SCSS

$color-1: #d2eb8d;
$color-2: #e2efaa;
$color-3: #cfe0a8;
$color-4: #b2cca1;
$color-5: #8aa68e;

TAILWIND

colors: {
  'brand-1': '#d2eb8d',
  'brand-2': '#e2efaa',
  'brand-3': '#cfe0a8',
  'brand-4': '#b2cca1',
  'brand-5': '#8aa68e',
}

RGB Array

[210, 235, 141], [226, 239, 170], [207, 224, 168], [178, 204, 161], [138, 166, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2EB8D, #E2EFAA, #CFE0A8, #B2CCA1, #8AA68E 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: #d2eb8d; --color-2: #e2efaa; --color-3: #cfe0a8; --color-4: #b2cca1; --color-5: #8aa68e. 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