← Back to Editor

#020807 · #0E5466 · #565E66 · #805768 · #BD4265

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

#020807

Mineral Blue · Black · Peacock Green

HEX
#020807
RGB
rgb(2, 8, 7)
HSL
hsl(170, 60%, 2%)
HSB
hsb(170, 75%, 3%)
CMYK
cmyk(75%, 0%, 12%, 97%)
Oklch
oklch(12.5% 0.015 185.1)

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

#0E5466

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0E5466
RGB
rgb(14, 84, 102)
HSL
hsl(192, 76%, 23%)
HSB
hsb(192, 86%, 40%)
CMYK
cmyk(86%, 18%, 0%, 60%)
Oklch
oklch(41.4% 0.070 220.3)

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

#565E66

Indigo · DimGray · Charcoal

HEX
#565E66
RGB
rgb(86, 94, 102)
HSL
hsl(210, 9%, 37%)
HSB
hsb(210, 16%, 40%)
CMYK
cmyk(16%, 8%, 0%, 60%)
Oklch
oklch(47.8% 0.016 248.2)

Traditional「Indigo」· Paint「Charcoal」· Creative Midnight Shadow

#805768

Dark Violet · DimGray · Camellia

HEX
#805768
RGB
rgb(128, 87, 104)
HSL
hsl(335, 19%, 42%)
HSB
hsb(335, 32%, 50%)
CMYK
cmyk(0%, 32%, 19%, 50%)
Oklch
oklch(50.6% 0.059 352.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#BD4265

Dark Violet · MediumVioletRed · Camellia

HEX
#BD4265
RGB
rgb(189, 66, 101)
HSL
hsl(343, 48%, 50%)
HSB
hsb(343, 65%, 74%)
CMYK
cmyk(0%, 65%, 47%, 26%)
Oklch
oklch(56.0% 0.160 6.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020807
080203

Analogous

020804
020807
020608

Triadic

020807
070208
080702

Split-Comp.

020807
080206
080402

Tetradic

020807
040208
080203
060802

Contrast Matrix WCAG 2.1 Contrast

020807
0E5466
565E66
805768
BD4265
—
2.4
Fail
3.1
AA Large
3.3
AA Large
4.0
AA Large
2.4
Fail
—
1.3
Fail
1.4
Fail
1.7
Fail
3.1
AA Large
1.3
Fail
—
1.1
Fail
1.3
Fail
3.3
AA Large
1.4
Fail
1.1
Fail
—
1.2
Fail
4.0
AA Large
1.7
Fail
1.3
Fail
1.2
Fail
—
White BG
20.2AAA
8.5AAA
6.6AA
6.0AA
5.1AA
Black BG
1.0Fail
2.5Fail
3.2AA Large
3.5AA Large
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

050507
2C2D62
595A64
6E6E64
88875D

Deuteranopia

040407
282361
595864
717463
8F985A

Tritanopia

020707
125E5D
566362
7E6160
B75654

Achromatopsia

060606
414141
5D5D5D
656565
6B6B6B

Shades & Tints Shades & Tints

#020807

Dark
Light

#0E5466

Dark
Light

#565E66

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020807;
  --color-2: #0e5466;
  --color-3: #565e66;
  --color-4: #805768;
  --color-5: #bd4265;
}

SCSS

$color-1: #020807;
$color-2: #0e5466;
$color-3: #565e66;
$color-4: #805768;
$color-5: #bd4265;

TAILWIND

colors: {
  'brand-1': '#020807',
  'brand-2': '#0e5466',
  'brand-3': '#565e66',
  'brand-4': '#805768',
  'brand-5': '#bd4265',
}

RGB Array

[2, 8, 7], [14, 84, 102], [86, 94, 102], [128, 87, 104], [189, 66, 101]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #020807, #0E5466, #565E66, #805768, #BD4265 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: #020807; --color-2: #0e5466; --color-3: #565e66; --color-4: #805768; --color-5: #bd4265. 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