#9EA87A + #D4EA99 + #C3FABB + #AAE3AF + #A8C09E · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9EA87A

Grass Green · DarkSeaGreen · Olive Green

HEX

#9EA87A

RGB

rgb(158, 168, 122)

HSL

hsl(73, 21%, 57%)

HSB

hsb(73, 27%, 66%)

CMYK

cmyk(6%, 0%, 27%, 34%)

Oklch

oklch(71.2% 0.065 118.0)

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

#D4EA99

Willow Green · Khaki · Apple Green

HEX

#D4EA99

RGB

rgb(212, 234, 153)

HSL

hsl(76, 66%, 76%)

HSB

hsb(76, 35%, 92%)

CMYK

cmyk(9%, 0%, 35%, 8%)

Oklch

oklch(90.2% 0.107 120.9)

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

#C3FABB

Emerald · LightGray · Mint Green

HEX

#C3FABB

RGB

rgb(195, 250, 187)

HSL

hsl(112, 86%, 86%)

HSB

hsb(112, 25%, 98%)

CMYK

cmyk(22%, 0%, 25%, 2%)

Oklch

oklch(93.2% 0.101 141.5)

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

#AAE3AF

Celadon · LightGreen · Apple Green

HEX

#AAE3AF

RGB

rgb(170, 227, 175)

HSL

hsl(125, 50%, 78%)

HSB

hsb(125, 25%, 89%)

CMYK

cmyk(25%, 0%, 23%, 11%)

Oklch

oklch(86.3% 0.092 147.0)

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

#A8C09E

Celadon · DarkGray · Apple Green

HEX

#A8C09E

RGB

rgb(168, 192, 158)

HSL

hsl(102, 21%, 69%)

HSB

hsb(102, 18%, 75%)

CMYK

cmyk(13%, 0%, 18%, 25%)

Oklch

oklch(78.0% 0.054 136.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9EA87A

847AA8

Analogous

A89B7A

9EA87A

87A87A

Triadic

9EA87A

7A9EA8

A87A9E

Split-Comp.

9EA87A

7A87A8

9B7AA8

Tetradic

9EA87A

7AA89B

847AA8

A87A87

Contrast Matrix WCAG 2.1 Contrast

9EA87A	D4EA99	C3FABB	AAE3AF	A8C09E
—	1.9 Fail	2.1 Fail	1.7 Fail	1.3 Fail
1.9 Fail	—	1.1 Fail	1.1 Fail	1.5 Fail
2.1 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.7 Fail	1.1 Fail	1.2 Fail	—	1.3 Fail
1.3 Fail	1.5 Fail	1.7 Fail	1.3 Fail	—

White BG

2.5Fail

1.3Fail

1.2Fail

1.5Fail

2.0Fail

Black BG

8.3AAA

16.0AAA

17.7AAA

14.3AAA

10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A285

DEDEAD

DBDBCA

C3C3BC

B2B3A6

Deuteranopia

A2A188

DCDBB1

D8D4CE

BFBBBF

B1AFA8

Tritanopia

9F8E90

D5BCBF

C6D6D9

ADC6C8

A9ADAE

Achromatopsia

A0A0A0

DADADA

E2E2E2

CCCCCC

B5B5B5

Shades & Tints Shades & Tints

#9EA87A

Dark

Light

#D4EA99

Dark

Light

#C3FABB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ea87a;
  --color-2: #d4ea99;
  --color-3: #c3fabb;
  --color-4: #aae3af;
  --color-5: #a8c09e;
}

SCSS

$color-1: #9ea87a;
$color-2: #d4ea99;
$color-3: #c3fabb;
$color-4: #aae3af;
$color-5: #a8c09e;

TAILWIND

colors: {
  'brand-1': '#9ea87a',
  'brand-2': '#d4ea99',
  'brand-3': '#c3fabb',
  'brand-4': '#aae3af',
  'brand-5': '#a8c09e',
}

RGB Array

[158, 168, 122], [212, 234, 153], [195, 250, 187], [170, 227, 175], [168, 192, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #9EA87A, #D4EA99, #C3FABB, #AAE3AF, #A8C09E 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: #9ea87a; --color-2: #d4ea99; --color-3: #c3fabb; --color-4: #aae3af; --color-5: #a8c09e. 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 cool-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