#8BBB89 + #8AD1A5 + #ABE3B6 + #DEF3B8 + #CAE699 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryClean

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8BBB89

Celadon · DarkSeaGreen · Apple Green

HEX

#8BBB89

RGB

rgb(139, 187, 137)

HSL

hsl(118, 27%, 64%)

HSB

hsb(118, 27%, 73%)

CMYK

cmyk(26%, 0%, 27%, 27%)

Oklch

oklch(74.5% 0.087 143.7)

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

#8AD1A5

Celadon · DarkSeaGreen · Apple Green

HEX

#8AD1A5

RGB

rgb(138, 209, 165)

HSL

hsl(143, 44%, 68%)

HSB

hsb(143, 34%, 82%)

CMYK

cmyk(34%, 0%, 21%, 18%)

Oklch

oklch(80.2% 0.095 156.3)

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

#ABE3B6

Celadon · Silver · Apple Green

HEX

#ABE3B6

RGB

rgb(171, 227, 182)

HSL

hsl(132, 50%, 78%)

HSB

hsb(132, 25%, 89%)

CMYK

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

Oklch

oklch(86.5% 0.084 150.3)

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

#DEF3B8

Willow Green · Wheat · Mint Green

HEX

#DEF3B8

RGB

rgb(222, 243, 184)

HSL

hsl(81, 71%, 84%)

HSB

hsb(81, 24%, 95%)

CMYK

cmyk(9%, 0%, 24%, 5%)

Oklch

oklch(93.4% 0.080 123.8)

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

#CAE699

Willow Green · Khaki · Apple Green

HEX

#CAE699

RGB

rgb(202, 230, 153)

HSL

hsl(82, 61%, 75%)

HSB

hsb(82, 33%, 90%)

CMYK

cmyk(12%, 0%, 33%, 10%)

Oklch

oklch(88.6% 0.105 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

8BBB89

BA8ABC

Analogous

A5BC8A

8BBB89

8ABCA2

Triadic

8BBB89

8A8CBC

BC8A8C

Split-Comp.

8BBB89

A28ABC

BC8AA5

Tetradic

8BBB89

8AA5BC

BA8ABC

BCA28A

Contrast Matrix WCAG 2.1 Contrast

8BBB89	8AD1A5	ABE3B6	DEF3B8	CAE699
—	1.2 Fail	1.5 Fail	1.8 Fail	1.6 Fail
1.2 Fail	—	1.2 Fail	1.5 Fail	1.3 Fail
1.5 Fail	1.2 Fail	—	1.2 Fail	1.1 Fail
1.8 Fail	1.5 Fail	1.2 Fail	—	1.2 Fail
1.6 Fail	1.3 Fail	1.1 Fail	1.2 Fail	—

White BG

2.2Fail

1.8Fail

1.5Fail

1.2Fail

1.4Fail

Black BG

9.6AAA

11.7AAA

14.4AAA

17.6AAA

15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A095

A9A9B0

C3C4C1

E7E7C6

D6D6AC

Deuteranopia

9D9998

A59FB2

C0BCC4

E6E4CA

D5D2B0

Tritanopia

8D9FA1

8EB8BA

AEC9CB

DFD2D4

CBBABE

Achromatopsia

A7A7A7

B7B7B7

CDCDCD

E6E6E6

D5D5D5

Shades & Tints Shades & Tints

#8BBB89

Dark

Light

#8AD1A5

Dark

Light

#ABE3B6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8bbb89;
  --color-2: #8ad1a5;
  --color-3: #abe3b6;
  --color-4: #def3b8;
  --color-5: #cae699;
}

SCSS

$color-1: #8bbb89;
$color-2: #8ad1a5;
$color-3: #abe3b6;
$color-4: #def3b8;
$color-5: #cae699;

TAILWIND

colors: {
  'brand-1': '#8bbb89',
  'brand-2': '#8ad1a5',
  'brand-3': '#abe3b6',
  'brand-4': '#def3b8',
  'brand-5': '#cae699',
}

RGB Array

[139, 187, 137], [138, 209, 165], [171, 227, 182], [222, 243, 184], [202, 230, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8BBB89, #8AD1A5, #ABE3B6, #DEF3B8, #CAE699 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: #8bbb89; --color-2: #8ad1a5; --color-3: #abe3b6; --color-4: #def3b8; --color-5: #cae699. 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