← Back to Editor

#040D12 · #022737 · #61A0B1 · #C2BFCA · #867B83

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

#040D12

Lake Blue · Black · Deep Sea Blue

HEX
#040D12
RGB
rgb(4, 13, 18)
HSL
hsl(201, 64%, 4%)
HSB
hsb(201, 78%, 7%)
CMYK
cmyk(78%, 28%, 0%, 93%)
Oklch
oklch(15.2% 0.019 230.1)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#022737

Lake Blue · MidnightBlue · Peacock Green

HEX
#022737
RGB
rgb(2, 39, 55)
HSL
hsl(198, 93%, 11%)
HSB
hsb(198, 96%, 22%)
CMYK
cmyk(96%, 29%, 0%, 78%)
Oklch
oklch(25.6% 0.050 231.8)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#61A0B1

Slate Blue · CadetBlue · Lake Green

HEX
#61A0B1
RGB
rgb(97, 160, 177)
HSL
hsl(193, 34%, 54%)
HSB
hsb(193, 45%, 69%)
CMYK
cmyk(45%, 10%, 0%, 31%)
Oklch
oklch(67.0% 0.069 216.9)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#C2BFCA

Wisteria · Silver · Pearl Gray

HEX
#C2BFCA
RGB
rgb(194, 191, 202)
HSL
hsl(256, 9%, 77%)
HSB
hsb(256, 5%, 79%)
CMYK
cmyk(4%, 5%, 0%, 21%)
Oklch
oklch(81.0% 0.016 298.5)

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

#867B83

Ink Gray · Gray · Warm Gray

HEX
#867B83
RGB
rgb(134, 123, 131)
HSL
hsl(316, 4%, 50%)
HSB
hsb(316, 8%, 53%)
CMYK
cmyk(0%, 8%, 2%, 47%)
Oklch
oklch(59.5% 0.018 335.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

040D12
110804

Analogous

04110F
040D12
040611

Triadic

040D12
11040C
0C1104

Split-Comp.

040D12
110406
110F04

Tetradic

040D12
0F0411
110804
061104

Contrast Matrix WCAG 2.1 Contrast

040D12
022737
61A0B1
C2BFCA
867B83
—
1.3
Fail
6.7
AA
10.8
AAA
4.8
AA
1.3
Fail
—
5.3
AA
8.6
AAA
3.8
AA Large
6.7
AA
5.3
AA
—
1.6
Fail
1.4
Fail
10.8
AAA
8.6
AAA
1.6
Fail
—
2.2
Fail
4.8
AA
3.8
AA Large
1.4
Fail
2.2
Fail
—
White BG
19.6AAA
15.6AAA
2.9Fail
1.8Fail
4.1AA Large
Black BG
1.1Fail
1.3Fail
7.2AAA
11.6AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

080811
121233
7C7DAD
C1C1C7
818181

Deuteranopia

070711
100D32
7974AC
C1C1C7
828381

Tritanopia

041010
04302F
64AAA9
C2C5C5
85807F

Achromatopsia

0B0B0B
1E1E1E
8F8F8F
C1C1C1
7F7F7F

Shades & Tints Shades & Tints

#040D12

Dark
Light

#022737

Dark
Light

#61A0B1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #040d12;
  --color-2: #022737;
  --color-3: #61a0b1;
  --color-4: #c2bfca;
  --color-5: #867b83;
}

SCSS

$color-1: #040d12;
$color-2: #022737;
$color-3: #61a0b1;
$color-4: #c2bfca;
$color-5: #867b83;

TAILWIND

colors: {
  'brand-1': '#040d12',
  'brand-2': '#022737',
  'brand-3': '#61a0b1',
  'brand-4': '#c2bfca',
  'brand-5': '#867b83',
}

RGB Array

[4, 13, 18], [2, 39, 55], [97, 160, 177], [194, 191, 202], [134, 123, 131]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #040D12, #022737, #61A0B1, #C2BFCA, #867B83 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #040d12; --color-2: #022737; --color-3: #61a0b1; --color-4: #c2bfca; --color-5: #867b83. 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 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