← Back to Editor

#471F2F · #681E26 · #881D1D · #C42716 · #F23113

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#471F2F

Dark Violet · DarkSlateGray · Raspberry

HEX
#471F2F
RGB
rgb(71, 31, 47)
HSL
hsl(336, 39%, 20%)
HSB
hsb(336, 56%, 28%)
CMYK
cmyk(0%, 56%, 34%, 72%)
Oklch
oklch(30.2% 0.065 356.4)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#681E26

Crimson · Maroon · Wine Red

HEX
#681E26
RGB
rgb(104, 30, 38)
HSL
hsl(354, 55%, 26%)
HSB
hsb(354, 71%, 41%)
CMYK
cmyk(0%, 71%, 63%, 59%)
Oklch
oklch(35.5% 0.105 18.2)

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

#881D1D

Vermilion · Brown · Wine Red

HEX
#881D1D
RGB
rgb(136, 29, 29)
HSL
hsl(0, 65%, 32%)
HSB
hsb(0, 79%, 53%)
CMYK
cmyk(0%, 79%, 79%, 47%)
Oklch
oklch(41.3% 0.143 26.1)

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

#C42716

Vermilion · FireBrick · Passion Red

HEX
#C42716
RGB
rgb(196, 39, 22)
HSL
hsl(6, 80%, 43%)
HSB
hsb(6, 89%, 77%)
CMYK
cmyk(0%, 80%, 89%, 23%)
Oklch
oklch(53.3% 0.195 30.4)

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

#F23113

Vermilion · OrangeRed · Passion Red

HEX
#F23113
RGB
rgb(242, 49, 19)
HSL
hsl(8, 90%, 51%)
HSB
hsb(8, 92%, 95%)
CMYK
cmyk(0%, 80%, 92%, 5%)
Oklch
oklch(62.3% 0.230 31.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

471F2F
1F4737

Analogous

471F43
471F2F
47231F

Triadic

471F2F
2F471F
1F2F47

Split-Comp.

471F2F
1F4723
1F4347

Tetradic

471F2F
43471F
1F4737
231F47

Contrast Matrix WCAG 2.1 Contrast

471F2F
681E26
881D1D
C42716
F23113
—
1.2
Fail
1.5
Fail
2.4
Fail
3.5
AA Large
1.2
Fail
—
1.2
Fail
2.0
Fail
2.9
Fail
1.5
Fail
1.2
Fail
—
1.6
Fail
2.3
Fail
2.4
Fail
2.0
Fail
1.6
Fail
—
1.4
Fail
3.5
AA Large
2.9
Fail
2.3
Fail
1.4
Fail
—
White BG
14.0AAA
11.7AAA
9.4AAA
5.8AA
4.0AA Large
Black BG
1.5Fail
1.8Fail
2.2Fail
3.6AA Large
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

36352B
484724
5A591D
807F1A
9E9D1A

Deuteranopia

383B2A
4C5224
60681D
89951B
AAB81C

Tritanopia

452827
642322
831D1D
BC1D1E
E82021

Achromatopsia

2D2D2D
353535
3D3D3D
545454
676767

Shades & Tints Shades & Tints

#471F2F

Dark
Light

#681E26

Dark
Light

#881D1D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #471f2f;
  --color-2: #681e26;
  --color-3: #881d1d;
  --color-4: #c42716;
  --color-5: #f23113;
}

SCSS

$color-1: #471f2f;
$color-2: #681e26;
$color-3: #881d1d;
$color-4: #c42716;
$color-5: #f23113;

TAILWIND

colors: {
  'brand-1': '#471f2f',
  'brand-2': '#681e26',
  'brand-3': '#881d1d',
  'brand-4': '#c42716',
  'brand-5': '#f23113',
}

RGB Array

[71, 31, 47], [104, 30, 38], [136, 29, 29], [196, 39, 22], [242, 49, 19]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #471F2F, #681E26, #881D1D, #C42716, #F23113 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: #471f2f; --color-2: #681e26; --color-3: #881d1d; --color-4: #c42716; --color-5: #f23113. 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 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