← Back to Editor

#B51E07 · #9C3502 · #703902 · #45322F · #043333

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#B51E07

Vermilion · FireBrick · Wine Red

HEX
#B51E07
RGB
rgb(181, 30, 7)
HSL
hsl(8, 93%, 37%)
HSB
hsb(8, 96%, 71%)
CMYK
cmyk(0%, 83%, 96%, 29%)
Oklch
oklch(49.8% 0.188 31.3)

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

#9C3502

Tangerine · Brown · Amber Brown

HEX
#9C3502
RGB
rgb(156, 53, 2)
HSL
hsl(20, 97%, 31%)
HSB
hsb(20, 99%, 61%)
CMYK
cmyk(0%, 66%, 99%, 39%)
Oklch
oklch(47.4% 0.147 40.3)

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

#703902

Ochre · Maroon · Cinnamon

HEX
#703902
RGB
rgb(112, 57, 2)
HSL
hsl(30, 96%, 22%)
HSB
hsb(30, 98%, 44%)
CMYK
cmyk(0%, 49%, 98%, 56%)
Oklch
oklch(40.7% 0.098 56.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#45322F

Crimson · DarkSlateGray · Wine Red

HEX
#45322F
RGB
rgb(69, 50, 47)
HSL
hsl(8, 19%, 23%)
HSB
hsb(8, 32%, 27%)
CMYK
cmyk(0%, 28%, 32%, 73%)
Oklch
oklch(33.8% 0.028 28.8)

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

#043333

Lake Blue · DarkSlateGray · Peacock Green

HEX
#043333
RGB
rgb(4, 51, 51)
HSL
hsl(180, 85%, 11%)
HSB
hsb(180, 92%, 20%)
CMYK
cmyk(92%, 0%, 0%, 80%)
Oklch
oklch(29.2% 0.047 194.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B51E07
079FB6

Analogous

B60747
B51E07
B67607

Triadic

B51E07
07B61E
1E07B6

Split-Comp.

B51E07
07B676
0747B6

Tetradic

B51E07
47B607
079FB6
7607B6

Contrast Matrix WCAG 2.1 Contrast

B51E07
9C3502
703902
45322F
043333
—
1.1
Fail
1.4
Fail
1.8
Fail
2.1
Fail
1.1
Fail
—
1.3
Fail
1.7
Fail
1.9
Fail
1.4
Fail
1.3
Fail
—
1.3
Fail
1.5
Fail
1.8
Fail
1.7
Fail
1.3
Fail
—
1.1
Fail
2.1
Fail
1.9
Fail
1.5
Fail
1.1
Fail
—
White BG
6.7AA
7.2AAA
9.2AAA
12.0AAA
13.8AAA
Black BG
3.2AA Large
2.9Fail
2.3Fail
1.8Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

74720D
6F6E0E
58580F
3D3D30
181933

Deuteranopia

7C880E
757D11
5B5F12
3E3F30
161233

Tritanopia

AD1112
97181A
6D1A1C
443030
063333

Achromatopsia

494949
4E4E4E
434343
373737
252525

Shades & Tints Shades & Tints

#B51E07

Dark
Light

#9C3502

Dark
Light

#703902

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b51e07;
  --color-2: #9c3502;
  --color-3: #703902;
  --color-4: #45322f;
  --color-5: #043333;
}

SCSS

$color-1: #b51e07;
$color-2: #9c3502;
$color-3: #703902;
$color-4: #45322f;
$color-5: #043333;

TAILWIND

colors: {
  'brand-1': '#b51e07',
  'brand-2': '#9c3502',
  'brand-3': '#703902',
  'brand-4': '#45322f',
  'brand-5': '#043333',
}

RGB Array

[181, 30, 7], [156, 53, 2], [112, 57, 2], [69, 50, 47], [4, 51, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #B51E07, #9C3502, #703902, #45322F, #043333 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. 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: #b51e07; --color-2: #9c3502; --color-3: #703902; --color-4: #45322f; --color-5: #043333. 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. 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 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