← Back to Editor

#896D0A · #BB3407 · #BC1A0F · #D30E20 · #B60112

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

#896D0A

Ochre · Olive · Honey Gold

HEX
#896D0A
RGB
rgb(137, 109, 10)
HSL
hsl(47, 86%, 29%)
HSB
hsb(47, 93%, 54%)
CMYK
cmyk(0%, 20%, 93%, 46%)
Oklch
oklch(54.7% 0.109 90.3)

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

#BB3407

Tangerine · FireBrick · Amber Brown

HEX
#BB3407
RGB
rgb(187, 52, 7)
HSL
hsl(15, 93%, 38%)
HSB
hsb(15, 96%, 73%)
CMYK
cmyk(0%, 72%, 96%, 27%)
Oklch
oklch(52.7% 0.178 35.7)

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

#BC1A0F

Vermilion · FireBrick · Wine Red

HEX
#BC1A0F
RGB
rgb(188, 26, 15)
HSL
hsl(4, 85%, 40%)
HSB
hsb(4, 92%, 74%)
CMYK
cmyk(0%, 86%, 92%, 26%)
Oklch
oklch(50.9% 0.195 29.6)

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

#D30E20

Vermilion · Crimson · Passion Red

HEX
#D30E20
RGB
rgb(211, 14, 32)
HSL
hsl(355, 88%, 44%)
HSB
hsb(355, 93%, 83%)
CMYK
cmyk(0%, 93%, 85%, 17%)
Oklch
oklch(54.9% 0.218 26.1)

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

#B60112

Vermilion · FireBrick · Wine Red

HEX
#B60112
RGB
rgb(182, 1, 18)
HSL
hsl(354, 99%, 36%)
HSB
hsb(354, 99%, 71%)
CMYK
cmyk(0%, 99%, 90%, 29%)
Oklch
oklch(48.9% 0.199 27.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

896D0A
0A268A

Analogous

8A2E0A
896D0A
668A0A

Triadic

896D0A
0A8A6E
6E0A8A

Split-Comp.

896D0A
0A668A
2E0A8A

Tetradic

896D0A
0A8A2E
0A268A
8A0A66

Contrast Matrix WCAG 2.1 Contrast

896D0A
BB3407
BC1A0F
D30E20
B60112
—
1.2
Fail
1.3
Fail
1.1
Fail
1.4
Fail
1.2
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.1
Fail
—
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.3
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
White BG
4.9AA
5.8AA
6.4AA
5.4AA
7.0AA
Black BG
4.3AA Large
3.6AA Large
3.3AA Large
3.9AA Large
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

7D7D22
817F12
767412
7E7C1C
68660E

Deuteranopia

7F8128
889315
7F8B12
89981B
72800D

Tritanopia

883539
B41A1C
B41414
C91817
AD0B0A

Achromatopsia

6A6A6A
575757
494949
4B4B4B
393939

Shades & Tints Shades & Tints

#896D0A

Dark
Light

#BB3407

Dark
Light

#BC1A0F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #896d0a;
  --color-2: #bb3407;
  --color-3: #bc1a0f;
  --color-4: #d30e20;
  --color-5: #b60112;
}

SCSS

$color-1: #896d0a;
$color-2: #bb3407;
$color-3: #bc1a0f;
$color-4: #d30e20;
$color-5: #b60112;

TAILWIND

colors: {
  'brand-1': '#896d0a',
  'brand-2': '#bb3407',
  'brand-3': '#bc1a0f',
  'brand-4': '#d30e20',
  'brand-5': '#b60112',
}

RGB Array

[137, 109, 10], [187, 52, 7], [188, 26, 15], [211, 14, 32], [182, 1, 18]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #896D0A, #BB3407, #BC1A0F, #D30E20, #B60112 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: #896d0a; --color-2: #bb3407; --color-3: #bc1a0f; --color-4: #d30e20; --color-5: #b60112. 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