← Back to Editor

#3B0C00 · #C88431 · #AC6316 · #984E07 · #F5BB57

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 AppData Visualization

Color Details Color Details

#3B0C00

Vermilion · Black · Deep Berry

HEX
#3B0C00
RGB
rgb(59, 12, 0)
HSL
hsl(12, 100%, 12%)
HSB
hsb(12, 100%, 23%)
CMYK
cmyk(0%, 80%, 100%, 77%)
Oklch
oklch(23.7% 0.077 38.1)

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

#C88431

Ochre · Chocolate · Amber Brown

HEX
#C88431
RGB
rgb(200, 132, 49)
HSL
hsl(33, 61%, 49%)
HSB
hsb(33, 76%, 78%)
CMYK
cmyk(0%, 34%, 76%, 22%)
Oklch
oklch(66.9% 0.127 67.3)

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

#AC6316

Ochre · Sienna · Amber Brown

HEX
#AC6316
RGB
rgb(172, 99, 22)
HSL
hsl(31, 77%, 38%)
HSB
hsb(31, 87%, 67%)
CMYK
cmyk(0%, 42%, 87%, 33%)
Oklch
oklch(57.1% 0.125 60.2)

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

#984E07

Tangerine · Sienna · Amber Brown

HEX
#984E07
RGB
rgb(152, 78, 7)
HSL
hsl(29, 91%, 31%)
HSB
hsb(29, 95%, 60%)
CMYK
cmyk(0%, 49%, 95%, 40%)
Oklch
oklch(50.5% 0.122 55.0)

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

#F5BB57

Ginger · SandyBrown · Warm Sun

HEX
#F5BB57
RGB
rgb(245, 187, 87)
HSL
hsl(38, 89%, 65%)
HSB
hsb(38, 64%, 96%)
CMYK
cmyk(0%, 24%, 64%, 4%)
Oklch
oklch(82.6% 0.134 78.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3B0C00
00313D

Analogous

3D0012
3B0C00
3D2B00

Triadic

3B0C00
003D0C
0C003D

Split-Comp.

3B0C00
003D2B
00123D

Tetradic

3B0C00
123D00
00313D
2B003D

Contrast Matrix WCAG 2.1 Contrast

3B0C00
C88431
AC6316
984E07
F5BB57
—
5.5
AA
3.7
AA Large
2.8
Fail
9.8
AAA
5.5
AA
—
1.5
Fail
2.0
Fail
1.8
Fail
3.7
AA Large
1.5
Fail
—
1.3
Fail
2.7
Fail
2.8
Fail
2.0
Fail
1.3
Fail
—
3.5
AA Large
9.8
AAA
1.8
Fail
2.7
Fail
3.5
AA Large
—
White BG
17.0AAA
3.1AA Large
4.6AA
6.1AA
1.7Fail
Black BG
1.2Fail
6.8AA
4.6AA
3.4AA Large
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272603
ABAA45
8C8C29
787718
DCDB6F

Deuteranopia

292D04
AFB44A
91962D
7C821C
DFE475

Tritanopia

390506
C55558
A8373B
942629
F28287

Achromatopsia

191919
8F8F8F
707070
5C5C5C
C1C1C1

Shades & Tints Shades & Tints

#3B0C00

Dark
Light

#C88431

Dark
Light

#AC6316

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3b0c00;
  --color-2: #c88431;
  --color-3: #ac6316;
  --color-4: #984e07;
  --color-5: #f5bb57;
}

SCSS

$color-1: #3b0c00;
$color-2: #c88431;
$color-3: #ac6316;
$color-4: #984e07;
$color-5: #f5bb57;

TAILWIND

colors: {
  'brand-1': '#3b0c00',
  'brand-2': '#c88431',
  'brand-3': '#ac6316',
  'brand-4': '#984e07',
  'brand-5': '#f5bb57',
}

RGB Array

[59, 12, 0], [200, 132, 49], [172, 99, 22], [152, 78, 7], [245, 187, 87]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3B0C00, #C88431, #AC6316, #984E07, #F5BB57 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #3b0c00; --color-2: #c88431; --color-3: #ac6316; --color-4: #984e07; --color-5: #f5bb57. 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 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