← Back to Editor

#8C8581 · #8EADA7 · #89C7B4 · #95E6C4 · #F2EAB6

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C8581

Ash · Gray · Warm Gray

HEX
#8C8581
RGB
rgb(140, 133, 129)
HSL
hsl(22, 5%, 53%)
HSB
hsb(22, 8%, 55%)
CMYK
cmyk(0%, 5%, 8%, 45%)
Oklch
oklch(62.2% 0.010 52.0)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#8EADA7

Jade · DarkGray · Lake Green

HEX
#8EADA7
RGB
rgb(142, 173, 167)
HSL
hsl(168, 16%, 62%)
HSB
hsb(168, 18%, 68%)
CMYK
cmyk(18%, 0%, 3%, 32%)
Oklch
oklch(72.3% 0.035 182.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#89C7B4

Jade · MediumAquaMarine · Lake Green

HEX
#89C7B4
RGB
rgb(137, 199, 180)
HSL
hsl(162, 36%, 66%)
HSB
hsb(162, 31%, 78%)
CMYK
cmyk(31%, 0%, 10%, 22%)
Oklch
oklch(78.2% 0.069 173.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#95E6C4

Jade · LightBlue · Apple Green

HEX
#95E6C4
RGB
rgb(149, 230, 196)
HSL
hsl(155, 62%, 74%)
HSB
hsb(155, 35%, 90%)
CMYK
cmyk(35%, 0%, 15%, 10%)
Oklch
oklch(86.3% 0.093 165.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#F2EAB6

Fresh Green · Wheat · Lemon Cream

HEX
#F2EAB6
RGB
rgb(242, 234, 182)
HSL
hsl(52, 70%, 83%)
HSB
hsb(52, 25%, 95%)
CMYK
cmyk(0%, 3%, 25%, 5%)
Oklch
oklch(93.1% 0.068 100.3)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C8581
81898D

Analogous

8D8183
8C8581
8D8C81

Triadic

8C8581
818D86
86818D

Split-Comp.

8C8581
818D8C
81838D

Tetradic

8C8581
838D81
81898D
8C818D

Contrast Matrix WCAG 2.1 Contrast

8C8581
8EADA7
89C7B4
95E6C4
F2EAB6
—
1.5
Fail
1.9
Fail
2.5
Fail
3.0
Fail
1.5
Fail
—
1.3
Fail
1.7
Fail
2.0
Fail
1.9
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
2.5
Fail
1.7
Fail
1.3
Fail
—
1.2
Fail
3.0
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
White BG
3.6AA Large
2.4Fail
1.9Fail
1.5Fail
1.2Fail
Black BG
5.8AA
8.7AAA
10.9AAA
14.4AAA
17.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

898982
9B9CA8
A4A4B9
B8B9CC
EFEEC3

Deuteranopia

898A82
9A97A9
A09CBA
B3ADCE
EFF0C6

Tritanopia

8C8383
90AAAA
8CBCBD
99D3D4
F2CDCF

Achromatopsia

878787
A3A3A3
B2B2B2
CACACA
E6E6E6

Shades & Tints Shades & Tints

#8C8581

Dark
Light

#8EADA7

Dark
Light

#89C7B4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c8581;
  --color-2: #8eada7;
  --color-3: #89c7b4;
  --color-4: #95e6c4;
  --color-5: #f2eab6;
}

SCSS

$color-1: #8c8581;
$color-2: #8eada7;
$color-3: #89c7b4;
$color-4: #95e6c4;
$color-5: #f2eab6;

TAILWIND

colors: {
  'brand-1': '#8c8581',
  'brand-2': '#8eada7',
  'brand-3': '#89c7b4',
  'brand-4': '#95e6c4',
  'brand-5': '#f2eab6',
}

RGB Array

[140, 133, 129], [142, 173, 167], [137, 199, 180], [149, 230, 196], [242, 234, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C8581, #8EADA7, #89C7B4, #95E6C4, #F2EAB6 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: #8c8581; --color-2: #8eada7; --color-3: #89c7b4; --color-4: #95e6c4; --color-5: #f2eab6. 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