← Back to Editor

#8E9198 · #C9C9C9 · #E1DECF · #E84E68 · #3C3B39

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#8E9198

Ash · LightSlateGray · Silver Sand

HEX
#8E9198
RGB
rgb(142, 145, 152)
HSL
hsl(222, 5%, 58%)
HSB
hsb(222, 7%, 60%)
CMYK
cmyk(7%, 5%, 0%, 40%)
Oklch
oklch(65.6% 0.011 267.3)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#C9C9C9

Silver Gray · Silver · Pearl Gray

HEX
#C9C9C9
RGB
rgb(201, 201, 201)
HSL
hsl(0, 0%, 79%)
HSB
hsb(0, 0%, 79%)
CMYK
cmyk(0%, 0%, 0%, 21%)
Oklch
oklch(83.6% 0.000 89.9)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#E1DECF

Fresh Green · LightGray · Lemon Cream

HEX
#E1DECF
RGB
rgb(225, 222, 207)
HSL
hsl(50, 23%, 85%)
HSB
hsb(50, 8%, 88%)
CMYK
cmyk(0%, 1%, 8%, 12%)
Oklch
oklch(89.9% 0.020 97.6)

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

#E84E68

Peach Pink · Tomato · Coral Red

HEX
#E84E68
RGB
rgb(232, 78, 104)
HSL
hsl(350, 77%, 61%)
HSB
hsb(350, 66%, 91%)
CMYK
cmyk(0%, 66%, 55%, 9%)
Oklch
oklch(64.2% 0.189 14.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#3C3B39

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3C3B39
RGB
rgb(60, 59, 57)
HSL
hsl(40, 3%, 23%)
HSB
hsb(40, 5%, 24%)
CMYK
cmyk(0%, 2%, 5%, 76%)
Oklch
oklch(35.3% 0.004 84.6)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8E9198
99968F

Analogous

8F9799
8E9198
918F99

Triadic

8E9198
998F92
92998F

Split-Comp.

8E9198
99918F
97998F

Tetradic

8E9198
998F97
99968F
8F9991

Contrast Matrix WCAG 2.1 Contrast

8E9198
C9C9C9
E1DECF
E84E68
3C3B39
—
1.9
Fail
2.3
Fail
1.2
Fail
3.5
AA Large
1.9
Fail
—
1.2
Fail
2.2
Fail
6.8
AA
2.3
Fail
1.2
Fail
—
2.7
Fail
8.3
AAA
1.2
Fail
2.2
Fail
2.7
Fail
—
3.0
AA Large
3.5
AA Large
6.8
AA
8.3
AAA
3.0
AA Large
—
White BG
3.2AA Large
1.7Fail
1.4Fail
3.7AA Large
11.2AAA
Black BG
6.7AA
12.7AAA
15.6AAA
5.7AA
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8F96
C9C9C9
E0E0D3
A5A462
3C3C39

Deuteranopia

8F8F96
C9C9C9
E0E0D3
AEBA60
3C3C3A

Tritanopia

8E9595
C9C9C9
E1D5D6
E05D5C
3C3A3A

Achromatopsia

919191
C9C9C9
DDDDDD
7F7F7F
3B3B3B

Shades & Tints Shades & Tints

#8E9198

Dark
Light

#C9C9C9

Dark
Light

#E1DECF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8e9198;
  --color-2: #c9c9c9;
  --color-3: #e1decf;
  --color-4: #e84e68;
  --color-5: #3c3b39;
}

SCSS

$color-1: #8e9198;
$color-2: #c9c9c9;
$color-3: #e1decf;
$color-4: #e84e68;
$color-5: #3c3b39;

TAILWIND

colors: {
  'brand-1': '#8e9198',
  'brand-2': '#c9c9c9',
  'brand-3': '#e1decf',
  'brand-4': '#e84e68',
  'brand-5': '#3c3b39',
}

RGB Array

[142, 145, 152], [201, 201, 201], [225, 222, 207], [232, 78, 104], [60, 59, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8E9198, #C9C9C9, #E1DECF, #E84E68, #3C3B39 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #8e9198; --color-2: #c9c9c9; --color-3: #e1decf; --color-4: #e84e68; --color-5: #3c3b39. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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