← Back to Editor

#5C4B2B · #856DF1 · #2A2158 · #1B1D02 · #030302

dark

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

#5C4B2B

Ochre · DarkOliveGreen · Amber Brown

HEX
#5C4B2B
RGB
rgb(92, 75, 43)
HSL
hsl(39, 36%, 26%)
HSB
hsb(39, 53%, 36%)
CMYK
cmyk(0%, 18%, 53%, 64%)
Oklch
oklch(42.2% 0.053 82.3)

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

#856DF1

Wisteria · MediumSlateBlue · Cobalt Blue

HEX
#856DF1
RGB
rgb(133, 109, 241)
HSL
hsl(251, 83%, 69%)
HSB
hsb(251, 55%, 95%)
CMYK
cmyk(45%, 55%, 0%, 5%)
Oklch
oklch(62.3% 0.190 287.9)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#2A2158

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#2A2158
RGB
rgb(42, 33, 88)
HSL
hsl(250, 45%, 24%)
HSB
hsb(250, 63%, 35%)
CMYK
cmyk(52%, 63%, 0%, 65%)
Oklch
oklch(29.2% 0.095 286.4)

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

#1B1D02

Autumn Sage · Black · Amber Gold

HEX
#1B1D02
RGB
rgb(27, 29, 2)
HSL
hsl(64, 87%, 6%)
HSB
hsb(64, 93%, 11%)
CMYK
cmyk(7%, 0%, 93%, 89%)
Oklch
oklch(22.1% 0.046 113.4)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

#030302

Autumn Sage · Black · Amber Gold

HEX
#030302
RGB
rgb(3, 3, 2)
HSL
hsl(60, 20%, 1%)
HSB
hsb(60, 33%, 1%)
CMYK
cmyk(0%, 0%, 33%, 99%)
Oklch
oklch(9.6% 0.005 107.3)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C4B2B
2A3B5A

Analogous

5A322A
5C4B2B
535A2A

Triadic

5C4B2B
2A5A49
492A5A

Split-Comp.

5C4B2B
2A535A
322A5A

Tetradic

5C4B2B
2A5A32
2A3B5A
5A2A53

Contrast Matrix WCAG 2.1 Contrast

5C4B2B
856DF1
2A2158
1B1D02
030302
—
2.2
Fail
1.7
Fail
2.0
Fail
2.5
Fail
2.2
Fail
—
3.7
AA Large
4.5
AA Large
5.4
AA
1.7
Fail
3.7
AA Large
—
1.2
Fail
1.4
Fail
2.0
Fail
4.5
AA Large
1.2
Fail
—
1.2
Fail
2.5
Fail
5.4
AA
1.4
Fail
1.2
Fail
—
White BG
8.4AAA
3.8AA Large
14.4AAA
17.2AAA
20.6AAA
Black BG
2.5Fail
5.5AA
1.5Fail
1.2Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

555433
7B7AD1
26264B
1C1C09
030302

Deuteranopia

565735
7C7EC9
272748
1C1C0A
030302

Tritanopia

5B393A
84B8B2
2A403E
1B0E0F
030202

Achromatopsia

4C4C4C
838383
2A2A2A
191919
030303

Shades & Tints Shades & Tints

#5C4B2B

Dark
Light

#856DF1

Dark
Light

#2A2158

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c4b2b;
  --color-2: #856df1;
  --color-3: #2a2158;
  --color-4: #1b1d02;
  --color-5: #030302;
}

SCSS

$color-1: #5c4b2b;
$color-2: #856df1;
$color-3: #2a2158;
$color-4: #1b1d02;
$color-5: #030302;

TAILWIND

colors: {
  'brand-1': '#5c4b2b',
  'brand-2': '#856df1',
  'brand-3': '#2a2158',
  'brand-4': '#1b1d02',
  'brand-5': '#030302',
}

RGB Array

[92, 75, 43], [133, 109, 241], [42, 33, 88], [27, 29, 2], [3, 3, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #5C4B2B, #856DF1, #2A2158, #1B1D02, #030302 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: #5c4b2b; --color-2: #856df1; --color-3: #2a2158; --color-4: #1b1d02; --color-5: #030302. 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 dark-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