← Back to Editor

#0B0E2D · #323651 · #585D70 · #82837D · #9CAFA9

A 5-color palette 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

#0B0E2D

Indigo · Black · Deep Sea Blue

HEX
#0B0E2D
RGB
rgb(11, 14, 45)
HSL
hsl(235, 61%, 11%)
HSB
hsb(235, 76%, 18%)
CMYK
cmyk(76%, 69%, 0%, 82%)
Oklch
oklch(18.3% 0.062 274.4)

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

#323651

Indigo · DarkSlateGray · Prussian Blue

HEX
#323651
RGB
rgb(50, 54, 81)
HSL
hsl(232, 24%, 26%)
HSB
hsb(232, 38%, 32%)
CMYK
cmyk(38%, 33%, 0%, 68%)
Oklch
oklch(34.2% 0.048 277.1)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#585D70

Indigo · DimGray · Prussian Blue

HEX
#585D70
RGB
rgb(88, 93, 112)
HSL
hsl(228, 12%, 39%)
HSB
hsb(228, 21%, 44%)
CMYK
cmyk(21%, 17%, 0%, 56%)
Oklch
oklch(48.1% 0.031 273.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#82837D

Ink Gray · Gray · Warm Gray

HEX
#82837D
RGB
rgb(130, 131, 125)
HSL
hsl(70, 2%, 50%)
HSB
hsb(70, 5%, 51%)
CMYK
cmyk(1%, 0%, 5%, 49%)
Oklch
oklch(60.7% 0.009 114.3)

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

#9CAFA9

Jade · DarkGray · Lake Green

HEX
#9CAFA9
RGB
rgb(156, 175, 169)
HSL
hsl(161, 11%, 65%)
HSB
hsb(161, 11%, 69%)
CMYK
cmyk(11%, 0%, 3%, 31%)
Oklch
oklch(73.8% 0.023 174.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0B0E2D
2D2A0B

Analogous

0B1F2D
0B0E2D
190B2D

Triadic

0B0E2D
2D0B0E
0E2D0B

Split-Comp.

0B0E2D
2D190B
1F2D0B

Tetradic

0B0E2D
2D0B1F
2D2A0B
0B2D19

Contrast Matrix WCAG 2.1 Contrast

0B0E2D
323651
585D70
82837D
9CAFA9
—
1.6
Fail
2.9
Fail
4.9
AA
8.2
AAA
1.6
Fail
—
1.8
Fail
3.1
AA Large
5.1
AA
2.9
Fail
1.8
Fail
—
1.7
Fail
2.8
Fail
4.9
AA
3.1
AA Large
1.7
Fail
—
1.7
Fail
8.2
AAA
5.1
AA
2.8
Fail
1.7
Fail
—
White BG
18.8AAA
11.8AAA
6.5AA
3.8AA Large
2.3Fail
Black BG
1.1Fail
1.8Fail
3.2AA Large
5.5AA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C25
34344A
5A5A6B
82827E
A4A4AA

Deuteranopia

0C0C24
343349
5A5A6A
82827F
A3A2AB

Tritanopia

0B201E
324544
586867
828080
9DACAC

Achromatopsia

111111
383838
5E5E5E
828282
A9A9A9

Shades & Tints Shades & Tints

#0B0E2D

Dark
Light

#323651

Dark
Light

#585D70

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0b0e2d;
  --color-2: #323651;
  --color-3: #585d70;
  --color-4: #82837d;
  --color-5: #9cafa9;
}

SCSS

$color-1: #0b0e2d;
$color-2: #323651;
$color-3: #585d70;
$color-4: #82837d;
$color-5: #9cafa9;

TAILWIND

colors: {
  'brand-1': '#0b0e2d',
  'brand-2': '#323651',
  'brand-3': '#585d70',
  'brand-4': '#82837d',
  'brand-5': '#9cafa9',
}

RGB Array

[11, 14, 45], [50, 54, 81], [88, 93, 112], [130, 131, 125], [156, 175, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0B0E2D, #323651, #585D70, #82837D, #9CAFA9 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: #0b0e2d; --color-2: #323651; --color-3: #585d70; --color-4: #82837d; --color-5: #9cafa9. 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