← Back to Editor

#0E0F13 · #202B27 · #81807C · #56483B · #D4E3DC

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#0E0F13

Indigo · Black · Deep Sea Blue

HEX
#0E0F13
RGB
rgb(14, 15, 19)
HSL
hsl(228, 15%, 6%)
HSB
hsb(228, 26%, 7%)
CMYK
cmyk(26%, 21%, 0%, 93%)
Oklch
oklch(16.9% 0.008 274.4)

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

#202B27

Mineral Blue · DarkSlateGray · Dark Green

HEX
#202B27
RGB
rgb(32, 43, 39)
HSL
hsl(158, 15%, 15%)
HSB
hsb(158, 26%, 17%)
CMYK
cmyk(26%, 0%, 9%, 83%)
Oklch
oklch(27.7% 0.017 170.9)

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

#81807C

Ink Gray · Gray · Warm Gray

HEX
#81807C
RGB
rgb(129, 128, 124)
HSL
hsl(48, 2%, 50%)
HSB
hsb(48, 4%, 51%)
CMYK
cmyk(0%, 1%, 4%, 49%)
Oklch
oklch(59.9% 0.006 95.2)

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

#56483B

Tangerine · DarkOliveGreen · Amber Brown

HEX
#56483B
RGB
rgb(86, 72, 59)
HSL
hsl(29, 19%, 28%)
HSB
hsb(29, 31%, 34%)
CMYK
cmyk(0%, 16%, 31%, 66%)
Oklch
oklch(41.2% 0.028 64.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#D4E3DC

Jade · LightGray · Mint Green

HEX
#D4E3DC
RGB
rgb(212, 227, 220)
HSL
hsl(152, 21%, 86%)
HSB
hsb(152, 7%, 89%)
CMYK
cmyk(7%, 0%, 3%, 11%)
Oklch
oklch(90.3% 0.019 166.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0E0F13
12110D

Analogous

0D1012
0E0F13
0E0D12

Triadic

0E0F13
120D0E
0E120D

Split-Comp.

0E0F13
120E0D
10120D

Tetradic

0E0F13
120D10
12110D
0D120E

Contrast Matrix WCAG 2.1 Contrast

0E0F13
202B27
81807C
56483B
D4E3DC
—
1.3
Fail
4.8
AA
2.2
Fail
14.4
AAA
1.3
Fail
—
3.7
AA Large
1.7
Fail
11.0
AAA
4.8
AA
3.7
AA Large
—
2.2
Fail
3.0
Fail
2.2
Fail
1.7
Fail
2.2
Fail
—
6.6
AA
14.4
AAA
11.0
AAA
3.0
Fail
6.6
AA
—
White BG
19.2AAA
14.6AAA
4.0AA Large
8.8AAA
1.3Fail
Black BG
1.1Fail
1.4Fail
5.3AA
2.4Fail
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0E0E12
252528
81817D
50503E
DADBDE

Deuteranopia

0E0E12
242328
81817D
51523F
DAD8DE

Tritanopia

0E1111
212929
817E7E
554141
D5DFDF

Achromatopsia

0F0F0F
272727
808080
4B4B4B
DEDEDE

Shades & Tints Shades & Tints

#0E0F13

Dark
Light

#202B27

Dark
Light

#81807C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0e0f13;
  --color-2: #202b27;
  --color-3: #81807c;
  --color-4: #56483b;
  --color-5: #d4e3dc;
}

SCSS

$color-1: #0e0f13;
$color-2: #202b27;
$color-3: #81807c;
$color-4: #56483b;
$color-5: #d4e3dc;

TAILWIND

colors: {
  'brand-1': '#0e0f13',
  'brand-2': '#202b27',
  'brand-3': '#81807c',
  'brand-4': '#56483b',
  'brand-5': '#d4e3dc',
}

RGB Array

[14, 15, 19], [32, 43, 39], [129, 128, 124], [86, 72, 59], [212, 227, 220]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0E0F13, #202B27, #81807C, #56483B, #D4E3DC 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: #0e0f13; --color-2: #202b27; --color-3: #81807c; --color-4: #56483b; --color-5: #d4e3dc. 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 general-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