← Back to Editor

#CBCDD1 · #0E0E0F · #282829 · #373A3D · #8A8D91

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#CBCDD1

Silver Gray · LightGray · Pearl Gray

HEX
#CBCDD1
RGB
rgb(203, 205, 209)
HSL
hsl(220, 6%, 81%)
HSB
hsb(220, 3%, 82%)
CMYK
cmyk(3%, 2%, 0%, 18%)
Oklch
oklch(84.8% 0.006 264.5)

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

#0E0E0F

Ink Black · Black · Jet Black

HEX
#0E0E0F
RGB
rgb(14, 14, 15)
HSL
hsl(240, 3%, 6%)
HSB
hsb(240, 7%, 6%)
CMYK
cmyk(7%, 7%, 0%, 94%)
Oklch
oklch(16.4% 0.002 286.2)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#282829

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#282829
RGB
rgb(40, 40, 41)
HSL
hsl(240, 1%, 16%)
HSB
hsb(240, 2%, 16%)
CMYK
cmyk(2%, 2%, 0%, 84%)
Oklch
oklch(27.7% 0.002 286.3)

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

#373A3D

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#373A3D
RGB
rgb(55, 58, 61)
HSL
hsl(210, 5%, 23%)
HSB
hsb(210, 10%, 24%)
CMYK
cmyk(10%, 5%, 0%, 76%)
Oklch
oklch(34.7% 0.007 248.0)

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

#8A8D91

Ash · LightSlateGray · Warm Gray

HEX
#8A8D91
RGB
rgb(138, 141, 145)
HSL
hsl(214, 3%, 55%)
HSB
hsb(214, 5%, 57%)
CMYK
cmyk(5%, 3%, 0%, 43%)
Oklch
oklch(64.2% 0.007 255.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBCDD1
D1D0CC

Analogous

CCD0D1
CBCDD1
CDCCD1

Triadic

CBCDD1
D1CCCE
CED1CC

Split-Comp.

CBCDD1
D1CDCC
D0D1CC

Tetradic

CBCDD1
D1CCD0
D1D0CC
CCD1CD

Contrast Matrix WCAG 2.1 Contrast

CBCDD1
0E0E0F
282829
373A3D
8A8D91
—
12.1
AAA
9.3
AAA
7.2
AAA
2.1
Fail
12.1
AAA
—
1.3
Fail
1.7
Fail
5.8
AA
9.3
AAA
1.3
Fail
—
1.3
Fail
4.4
AA Large
7.2
AAA
1.7
Fail
1.3
Fail
—
3.4
AA Large
2.1
Fail
5.8
AA
4.4
AA Large
3.4
AA Large
—
White BG
1.6Fail
19.3AAA
14.7AAA
11.4AAA
3.3AA Large
Black BG
13.2AAA
1.1Fail
1.4Fail
1.8Fail
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCCD0
0E0E0F
282829
38383C
8B8B90

Deuteranopia

CCCCD0
0E0E0F
282829
38383C
8B8B90

Tritanopia

CBCFCF
0E0F0F
282929
373C3C
8A8F8F

Achromatopsia

CDCDCD
0E0E0E
282828
393939
8D8D8D

Shades & Tints Shades & Tints

#CBCDD1

Dark
Light

#0E0E0F

Dark
Light

#282829

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbcdd1;
  --color-2: #0e0e0f;
  --color-3: #282829;
  --color-4: #373a3d;
  --color-5: #8a8d91;
}

SCSS

$color-1: #cbcdd1;
$color-2: #0e0e0f;
$color-3: #282829;
$color-4: #373a3d;
$color-5: #8a8d91;

TAILWIND

colors: {
  'brand-1': '#cbcdd1',
  'brand-2': '#0e0e0f',
  'brand-3': '#282829',
  'brand-4': '#373a3d',
  'brand-5': '#8a8d91',
}

RGB Array

[203, 205, 209], [14, 14, 15], [40, 40, 41], [55, 58, 61], [138, 141, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #CBCDD1, #0E0E0F, #282829, #373A3D, #8A8D91 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #cbcdd1; --color-2: #0e0e0f; --color-3: #282829; --color-4: #373a3d; --color-5: #8a8d91. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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