← Back to Editor

#020514 · #830511 · #AD0C1E · #DB1E34 · #B9A280

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#020514

Indigo · Black · Deep Sea Blue

HEX
#020514
RGB
rgb(2, 5, 20)
HSL
hsl(230, 82%, 4%)
HSB
hsb(230, 90%, 8%)
CMYK
cmyk(90%, 75%, 0%, 92%)
Oklch
oklch(12.2% 0.037 266.2)

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

#830511

Vermilion · Maroon · Wine Red

HEX
#830511
RGB
rgb(131, 5, 17)
HSL
hsl(354, 93%, 27%)
HSB
hsb(354, 96%, 51%)
CMYK
cmyk(0%, 96%, 87%, 49%)
Oklch
oklch(38.7% 0.153 25.6)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#AD0C1E

Vermilion · FireBrick · Wine Red

HEX
#AD0C1E
RGB
rgb(173, 12, 30)
HSL
hsl(353, 87%, 36%)
HSB
hsb(353, 93%, 68%)
CMYK
cmyk(0%, 93%, 83%, 32%)
Oklch
oklch(47.5% 0.187 24.8)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#DB1E34

Vermilion · Crimson · Passion Red

HEX
#DB1E34
RGB
rgb(219, 30, 52)
HSL
hsl(353, 76%, 49%)
HSB
hsb(353, 86%, 86%)
CMYK
cmyk(0%, 86%, 76%, 14%)
Oklch
oklch(57.2% 0.217 23.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#B9A280

Ginger · Tan · Warm Sun

HEX
#B9A280
RGB
rgb(185, 162, 128)
HSL
hsl(36, 29%, 61%)
HSB
hsb(36, 31%, 73%)
CMYK
cmyk(0%, 12%, 31%, 27%)
Oklch
oklch(72.4% 0.054 77.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

020514
131002

Analogous

020D13
020514
070213

Triadic

020514
130205
051302

Split-Comp.

020514
130702
0D1302

Tetradic

020514
13020D
131002
021307

Contrast Matrix WCAG 2.1 Contrast

020514
830511
AD0C1E
DB1E34
B9A280
—
1.9
Fail
2.8
Fail
4.1
AA Large
8.3
AAA
1.9
Fail
—
1.4
Fail
2.1
Fail
4.3
AA Large
2.8
Fail
1.4
Fail
—
1.5
Fail
3.0
Fail
4.1
AA Large
2.1
Fail
1.5
Fail
—
2.0
Fail
8.3
AAA
4.3
AA Large
3.0
Fail
2.0
Fail
—
White BG
20.3AAA
10.5AAA
7.4AAA
4.9AA
2.5Fail
Black BG
1.0Fail
2.0Fail
2.8Fail
4.2AA Large
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

030310
4C4B0E
67661A
89872F
AFAF88

Deuteranopia

030310
545D0D
717D19
94A22D
B0B28A

Tritanopia

020E0D
7D0C0B
A51615
D22A2A
B88F90

Achromatopsia

060606
2C2C2C
3E3E3E
595959
A5A5A5

Shades & Tints Shades & Tints

#020514

Dark
Light

#830511

Dark
Light

#AD0C1E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #020514;
  --color-2: #830511;
  --color-3: #ad0c1e;
  --color-4: #db1e34;
  --color-5: #b9a280;
}

SCSS

$color-1: #020514;
$color-2: #830511;
$color-3: #ad0c1e;
$color-4: #db1e34;
$color-5: #b9a280;

TAILWIND

colors: {
  'brand-1': '#020514',
  'brand-2': '#830511',
  'brand-3': '#ad0c1e',
  'brand-4': '#db1e34',
  'brand-5': '#b9a280',
}

RGB Array

[2, 5, 20], [131, 5, 17], [173, 12, 30], [219, 30, 52], [185, 162, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #020514, #830511, #AD0C1E, #DB1E34, #B9A280 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #020514; --color-2: #830511; --color-3: #ad0c1e; --color-4: #db1e34; --color-5: #b9a280. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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