← Back to Editor

#B86306 · #AB4602 · #B2320D · #572711 · #422A06

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

#B86306

Ochre · DarkGoldenRod · Amber Brown

HEX
#B86306
RGB
rgb(184, 99, 6)
HSL
hsl(31, 94%, 37%)
HSB
hsb(31, 97%, 72%)
CMYK
cmyk(0%, 46%, 97%, 28%)
Oklch
oklch(58.7% 0.139 57.5)

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

#AB4602

Tangerine · Sienna · Amber Brown

HEX
#AB4602
RGB
rgb(171, 70, 2)
HSL
hsl(24, 98%, 34%)
HSB
hsb(24, 99%, 67%)
CMYK
cmyk(0%, 59%, 99%, 33%)
Oklch
oklch(52.2% 0.148 45.2)

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

#B2320D

Vermilion · FireBrick · Wine Red

HEX
#B2320D
RGB
rgb(178, 50, 13)
HSL
hsl(13, 86%, 37%)
HSB
hsb(13, 93%, 70%)
CMYK
cmyk(0%, 72%, 93%, 30%)
Oklch
oklch(50.9% 0.170 35.1)

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

#572711

Tangerine · Maroon · Cinnamon

HEX
#572711
RGB
rgb(87, 39, 17)
HSL
hsl(19, 67%, 20%)
HSB
hsb(19, 80%, 34%)
CMYK
cmyk(0%, 55%, 80%, 66%)
Oklch
oklch(33.5% 0.078 43.6)

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

#422A06

Ochre · Maroon · Cinnamon

HEX
#422A06
RGB
rgb(66, 42, 6)
HSL
hsl(36, 83%, 14%)
HSB
hsb(36, 91%, 26%)
CMYK
cmyk(0%, 36%, 91%, 74%)
Oklch
oklch(30.7% 0.060 72.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B86306
065BB7

Analogous

B70906
B86306
B4B706

Triadic

B86306
06B761
6106B7

Split-Comp.

B86306
06B4B7
0906B7

Tetradic

B86306
06B709
065BB7
B706B4

Contrast Matrix WCAG 2.1 Contrast

B86306
AB4602
B2320D
572711
422A06
—
1.3
Fail
1.4
Fail
2.8
Fail
3.1
AA Large
1.3
Fail
—
1.1
Fail
2.1
Fail
2.3
Fail
1.4
Fail
1.1
Fail
—
2.0
Fail
2.1
Fail
2.8
Fail
2.1
Fail
2.0
Fail
—
1.1
Fail
3.1
AA Large
2.3
Fail
2.1
Fail
1.1
Fail
—
White BG
4.4AA Large
5.8AA
6.3AA
12.3AAA
13.4AAA
Black BG
4.8AA
3.6AA Large
3.4AA Large
1.7Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

93921D
7F7E12
7B7916
424216
38370F

Deuteranopia

989E22
858D16
828C18
454918
393B11

Tritanopia

B42E32
A61F22
AC1D1F
551B1B
411617

Achromatopsia

727272
5C5C5C
545454
333333
2D2D2D

Shades & Tints Shades & Tints

#B86306

Dark
Light

#AB4602

Dark
Light

#B2320D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b86306;
  --color-2: #ab4602;
  --color-3: #b2320d;
  --color-4: #572711;
  --color-5: #422a06;
}

SCSS

$color-1: #b86306;
$color-2: #ab4602;
$color-3: #b2320d;
$color-4: #572711;
$color-5: #422a06;

TAILWIND

colors: {
  'brand-1': '#b86306',
  'brand-2': '#ab4602',
  'brand-3': '#b2320d',
  'brand-4': '#572711',
  'brand-5': '#422a06',
}

RGB Array

[184, 99, 6], [171, 70, 2], [178, 50, 13], [87, 39, 17], [66, 42, 6]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B86306, #AB4602, #B2320D, #572711, #422A06 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: #b86306; --color-2: #ab4602; --color-3: #b2320d; --color-4: #572711; --color-5: #422a06. 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