#9D9F89 + #84AF97 + #8BC59B + #B2DE93 + #CCEE8D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9D9F89

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#9D9F89

RGB

rgb(157, 159, 137)

HSL

hsl(65, 10%, 58%)

HSB

hsb(65, 14%, 62%)

CMYK

cmyk(1%, 0%, 14%, 38%)

Oklch

oklch(69.5% 0.031 111.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#84AF97

Celadon · DarkSeaGreen · Olive Green

HEX

#84AF97

RGB

rgb(132, 175, 151)

HSL

hsl(147, 21%, 60%)

HSB

hsb(147, 25%, 69%)

CMYK

cmyk(25%, 0%, 14%, 31%)

Oklch

oklch(71.6% 0.058 160.1)

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

#8BC59B

Celadon · DarkSeaGreen · Apple Green

HEX

#8BC59B

RGB

rgb(139, 197, 155)

HSL

hsl(137, 33%, 66%)

HSB

hsb(137, 29%, 77%)

CMYK

cmyk(29%, 0%, 21%, 23%)

Oklch

oklch(77.2% 0.085 152.7)

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

#B2DE93

Emerald · LightGreen · Apple Green

HEX

#B2DE93

RGB

rgb(178, 222, 147)

HSL

hsl(95, 53%, 72%)

HSB

hsb(95, 34%, 87%)

CMYK

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

Oklch

oklch(85.1% 0.110 133.0)

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

#CCEE8D

Willow Green · Khaki · Apple Green

HEX

#CCEE8D

RGB

rgb(204, 238, 141)

HSL

hsl(81, 74%, 74%)

HSB

hsb(81, 41%, 93%)

CMYK

cmyk(14%, 0%, 41%, 7%)

Oklch

oklch(90.3% 0.128 124.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9D9F89

8B899F

Analogous

9F9689

9D9F89

929F89

Triadic

9D9F89

899D9F

9F899D

Split-Comp.

9D9F89

89929F

96899F

Tetradic

9D9F89

899F96

8B899F

9F8992

Contrast Matrix WCAG 2.1 Contrast

9D9F89	84AF97	8BC59B	B2DE93	CCEE8D
—	1.1 Fail	1.4 Fail	1.8 Fail	2.1 Fail
1.1 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.5 Fail
1.8 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.1 Fail	1.9 Fail	1.5 Fail	1.2 Fail	—

White BG

2.7Fail

2.5Fail

2.0Fail

1.5Fail

1.3Fail

Black BG

7.8AAA

8.6AAA

10.6AAA

13.8AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9E8E

97979D

A4A5A5

C5C5A5

DBDBA4

Deuteranopia

9E9E90

94919E

A19CA8

C3BFAA

D9D6AA

Tritanopia

9D9393

86A1A2

8EADAF

B4B3B7

CEB7BB

Achromatopsia

9C9C9C

9F9F9F

AFAFAF

C8C8C8

D9D9D9

Shades & Tints Shades & Tints

#9D9F89

Dark

Light

#84AF97

Dark

Light

#8BC59B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9d9f89;
  --color-2: #84af97;
  --color-3: #8bc59b;
  --color-4: #b2de93;
  --color-5: #ccee8d;
}

SCSS

$color-1: #9d9f89;
$color-2: #84af97;
$color-3: #8bc59b;
$color-4: #b2de93;
$color-5: #ccee8d;

TAILWIND

colors: {
  'brand-1': '#9d9f89',
  'brand-2': '#84af97',
  'brand-3': '#8bc59b',
  'brand-4': '#b2de93',
  'brand-5': '#ccee8d',
}

RGB Array

[157, 159, 137], [132, 175, 151], [139, 197, 155], [178, 222, 147], [204, 238, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9D9F89, #84AF97, #8BC59B, #B2DE93, #CCEE8D 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: #9d9f89; --color-2: #84af97; --color-3: #8bc59b; --color-4: #b2de93; --color-5: #ccee8d. 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