← Back to Editor

#B20D00 · #A13830 · #C15A18 · #3C3C12 · #666848

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

#B20D00

Vermilion · FireBrick · Wine Red

HEX
#B20D00
RGB
rgb(178, 13, 0)
HSL
hsl(4, 100%, 35%)
HSB
hsb(4, 100%, 70%)
CMYK
cmyk(0%, 93%, 100%, 30%)
Oklch
oklch(48.3% 0.193 30.1)

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

#A13830

Crimson · Brown · Passion Red

HEX
#A13830
RGB
rgb(161, 56, 48)
HSL
hsl(4, 54%, 41%)
HSB
hsb(4, 70%, 63%)
CMYK
cmyk(0%, 65%, 70%, 37%)
Oklch
oklch(49.0% 0.141 27.8)

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

#C15A18

Tangerine · Chocolate · Amber Brown

HEX
#C15A18
RGB
rgb(193, 90, 24)
HSL
hsl(23, 78%, 43%)
HSB
hsb(23, 88%, 76%)
CMYK
cmyk(0%, 53%, 88%, 24%)
Oklch
oklch(58.6% 0.150 47.5)

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

#3C3C12

Autumn Sage · DarkOliveGreen · Amber Gold

HEX
#3C3C12
RGB
rgb(60, 60, 18)
HSL
hsl(60, 54%, 15%)
HSB
hsb(60, 70%, 24%)
CMYK
cmyk(0%, 0%, 70%, 76%)
Oklch
oklch(34.6% 0.061 109.2)

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

#666848

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#666848
RGB
rgb(102, 104, 72)
HSL
hsl(64, 18%, 35%)
HSB
hsb(64, 31%, 41%)
CMYK
cmyk(2%, 0%, 31%, 59%)
Oklch
oklch(50.7% 0.048 111.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B20D00
00A7B3

Analogous

B3004D
B20D00
B36500

Triadic

B20D00
00B30C
0C00B3

Split-Comp.

B20D00
00B365
004DB3

Tetradic

B20D00
4DB300
00A7B3
6500B3

Contrast Matrix WCAG 2.1 Contrast

B20D00
A13830
C15A18
3C3C12
666848
—
1.1
Fail
1.6
Fail
1.6
Fail
1.2
Fail
1.1
Fail
—
1.5
Fail
1.7
Fail
1.2
Fail
1.6
Fail
1.5
Fail
—
2.6
Fail
1.3
Fail
1.6
Fail
1.7
Fail
2.6
Fail
—
2.0
Fail
1.2
Fail
1.2
Fail
1.3
Fail
2.0
Fail
—
White BG
7.1AAA
6.7AA
4.4AA Large
11.4AAA
5.8AA
Black BG
3.0Fail
3.1AA Large
4.7AA
1.8Fail
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6B6903
747332
949328
3C3C1C
676750

Deuteranopia

748104
7A8232
9AA22C
3C3C1F
676752

Tritanopia

AA0606
9C3334
BC3537
3C2426
665657

Achromatopsia

3D3D3D
565656
717171
373737
646464

Shades & Tints Shades & Tints

#B20D00

Dark
Light

#A13830

Dark
Light

#C15A18

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b20d00;
  --color-2: #a13830;
  --color-3: #c15a18;
  --color-4: #3c3c12;
  --color-5: #666848;
}

SCSS

$color-1: #b20d00;
$color-2: #a13830;
$color-3: #c15a18;
$color-4: #3c3c12;
$color-5: #666848;

TAILWIND

colors: {
  'brand-1': '#b20d00',
  'brand-2': '#a13830',
  'brand-3': '#c15a18',
  'brand-4': '#3c3c12',
  'brand-5': '#666848',
}

RGB Array

[178, 13, 0], [161, 56, 48], [193, 90, 24], [60, 60, 18], [102, 104, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B20D00, #A13830, #C15A18, #3C3C12, #666848 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: #b20d00; --color-2: #a13830; --color-3: #c15a18; --color-4: #3c3c12; --color-5: #666848. 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