#8F8D83 + #8DB5AF + #8CE1D4 + #E8E4CA + #F2CCC7 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8F8D83

Ash · Gray · Warm Gray

HEX

#8F8D83

RGB

rgb(143, 141, 131)

HSL

hsl(50, 5%, 54%)

HSB

hsb(50, 8%, 56%)

CMYK

cmyk(0%, 1%, 8%, 44%)

Oklch

oklch(64.2% 0.015 97.6)

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

#8DB5AF

Jade · DarkGray · Lake Green

HEX

#8DB5AF

RGB

rgb(141, 181, 175)

HSL

hsl(171, 21%, 63%)

HSB

hsb(171, 22%, 71%)

CMYK

cmyk(22%, 0%, 3%, 29%)

Oklch

oklch(74.2% 0.044 185.0)

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

#8CE1D4

Jade · SkyBlue · Lake Green

HEX

#8CE1D4

RGB

rgb(140, 225, 212)

HSL

hsl(171, 59%, 72%)

HSB

hsb(171, 38%, 88%)

CMYK

cmyk(38%, 0%, 6%, 12%)

Oklch

oklch(85.2% 0.085 183.5)

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

#E8E4CA

Fresh Green · Bisque · Lemon Cream

HEX

#E8E4CA

RGB

rgb(232, 228, 202)

HSL

hsl(52, 39%, 85%)

HSB

hsb(52, 13%, 91%)

CMYK

cmyk(0%, 2%, 13%, 9%)

Oklch

oklch(91.5% 0.035 99.9)

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

#F2CCC7

Peach Pink · Pink · Cherry Blossom

HEX

#F2CCC7

RGB

rgb(242, 204, 199)

HSL

hsl(7, 62%, 86%)

HSB

hsb(7, 18%, 95%)

CMYK

cmyk(0%, 16%, 18%, 5%)

Oklch

oklch(87.6% 0.044 26.8)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F8D83

848690

Analogous

908884

8F8D83

8C9084

Triadic

8F8D83

84908E

8E8490

Split-Comp.

8F8D83

848C90

888490

Tetradic

8F8D83

849088

848690

90848C

Contrast Matrix WCAG 2.1 Contrast

8F8D83	8DB5AF	8CE1D4	E8E4CA	F2CCC7
—	1.5 Fail	2.2 Fail	2.6 Fail	2.3 Fail
1.5 Fail	—	1.5 Fail	1.7 Fail	1.5 Fail
2.2 Fail	1.5 Fail	—	1.2 Fail	1.0 Fail
2.6 Fail	1.7 Fail	1.2 Fail	—	1.2 Fail
2.3 Fail	1.5 Fail	1.0 Fail	1.2 Fail	—

White BG

3.3AA Large

2.2Fail

1.5Fail

1.3Fail

1.5Fail

Black BG

6.3AA

9.4AAA

13.8AAA

16.4AAA

14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8E85

9E9FB0

B1B2D7

E6E6D0

E2E1C8

Deuteranopia

8E8E86

9C99B1

ACA6D8

E7E7D2

E4E7C8

Tritanopia

8F8788

8FB2B2

90DADA

E8D5D6

F0C9C9

Achromatopsia

8C8C8C

A8A8A8

C6C6C6

E2E2E2

D7D7D7

Shades & Tints Shades & Tints

#8F8D83

Dark

Light

#8DB5AF

Dark

Light

#8CE1D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f8d83;
  --color-2: #8db5af;
  --color-3: #8ce1d4;
  --color-4: #e8e4ca;
  --color-5: #f2ccc7;
}

SCSS

$color-1: #8f8d83;
$color-2: #8db5af;
$color-3: #8ce1d4;
$color-4: #e8e4ca;
$color-5: #f2ccc7;

TAILWIND

colors: {
  'brand-1': '#8f8d83',
  'brand-2': '#8db5af',
  'brand-3': '#8ce1d4',
  'brand-4': '#e8e4ca',
  'brand-5': '#f2ccc7',
}

RGB Array

[143, 141, 131], [141, 181, 175], [140, 225, 212], [232, 228, 202], [242, 204, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8F8D83, #8DB5AF, #8CE1D4, #E8E4CA, #F2CCC7 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: #8f8d83; --color-2: #8db5af; --color-3: #8ce1d4; --color-4: #e8e4ca; --color-5: #f2ccc7. 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