← Back to Editor

#271F20 · #B60918 · #C54023 · #B6BC65 · #80795D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#271F20

Crimson · Black · Deep Berry

HEX
#271F20
RGB
rgb(39, 31, 32)
HSL
hsl(353, 11%, 14%)
HSB
hsb(353, 21%, 15%)
CMYK
cmyk(0%, 21%, 18%, 85%)
Oklch
oklch(24.9% 0.012 9.5)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#B60918

Vermilion · FireBrick · Wine Red

HEX
#B60918
RGB
rgb(182, 9, 24)
HSL
hsl(355, 91%, 37%)
HSB
hsb(355, 95%, 71%)
CMYK
cmyk(0%, 95%, 87%, 29%)
Oklch
oklch(49.1% 0.196 26.4)

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

#C54023

Vermilion · FireBrick · Passion Red

HEX
#C54023
RGB
rgb(197, 64, 35)
HSL
hsl(11, 70%, 45%)
HSB
hsb(11, 82%, 77%)
CMYK
cmyk(0%, 68%, 82%, 23%)
Oklch
oklch(55.9% 0.174 33.8)

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

#B6BC65

Autumn Sage · Tan · Sunflower

HEX
#B6BC65
RGB
rgb(182, 188, 101)
HSL
hsl(64, 39%, 57%)
HSB
hsb(64, 46%, 74%)
CMYK
cmyk(3%, 0%, 46%, 26%)
Oklch
oklch(77.2% 0.111 112.2)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#80795D

Ochre · DimGray · Honey Gold

HEX
#80795D
RGB
rgb(128, 121, 93)
HSL
hsl(48, 16%, 43%)
HSB
hsb(48, 27%, 50%)
CMYK
cmyk(0%, 5%, 27%, 50%)
Oklch
oklch(57.5% 0.042 95.7)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

271F20
202827

Analogous

282025
271F20
282320

Triadic

271F20
212820
202128

Split-Comp.

271F20
202823
202528

Tetradic

271F20
252820
202827
232028

Contrast Matrix WCAG 2.1 Contrast

271F20
B60918
C54023
B6BC65
80795D
—
2.3
Fail
3.2
AA Large
8.0
AAA
3.7
AA Large
2.3
Fail
—
1.4
Fail
3.4
AA Large
1.6
Fail
3.2
AA Large
1.4
Fail
—
2.5
Fail
1.2
Fail
8.0
AAA
3.4
AA Large
2.5
Fail
—
2.2
Fail
3.7
AA Large
1.6
Fail
1.2
Fail
2.2
Fail
—
White BG
16.1AAA
6.9AA
5.1AA
2.0Fail
4.4AA Large
Black BG
1.3Fail
3.0AA Large
4.1AA Large
10.4AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242320
6B6A14
8B8A2A
B9B97A
7D7D64

Deuteranopia

242520
758213
939D2C
B8B87F
7D7E65

Tritanopia

272020
AD1211
BE3031
B68B8E
80696A

Achromatopsia

222222
3E3E3E
646464
B0B0B0
787878

Shades & Tints Shades & Tints

#271F20

Dark
Light

#B60918

Dark
Light

#C54023

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #271f20;
  --color-2: #b60918;
  --color-3: #c54023;
  --color-4: #b6bc65;
  --color-5: #80795d;
}

SCSS

$color-1: #271f20;
$color-2: #b60918;
$color-3: #c54023;
$color-4: #b6bc65;
$color-5: #80795d;

TAILWIND

colors: {
  'brand-1': '#271f20',
  'brand-2': '#b60918',
  'brand-3': '#c54023',
  'brand-4': '#b6bc65',
  'brand-5': '#80795d',
}

RGB Array

[39, 31, 32], [182, 9, 24], [197, 64, 35], [182, 188, 101], [128, 121, 93]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #271F20, #B60918, #C54023, #B6BC65, #80795D 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: #271f20; --color-2: #b60918; --color-3: #c54023; --color-4: #b6bc65; --color-5: #80795d. 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 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