← Back to Editor

#3F0404 · #CEB7A9 · #B3380A · #6E380A · #B37E34

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

#3F0404

Vermilion · Black · Deep Berry

HEX
#3F0404
RGB
rgb(63, 4, 4)
HSL
hsl(0, 88%, 13%)
HSB
hsb(0, 94%, 25%)
CMYK
cmyk(0%, 94%, 94%, 75%)
Oklch
oklch(23.7% 0.089 27.5)

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

#CEB7A9

Apricot · Silver · Warm Sun

HEX
#CEB7A9
RGB
rgb(206, 183, 169)
HSL
hsl(23, 27%, 74%)
HSB
hsb(23, 18%, 81%)
CMYK
cmyk(0%, 11%, 18%, 19%)
Oklch
oklch(79.5% 0.033 53.4)

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

#B3380A

Tangerine · FireBrick · Amber Brown

HEX
#B3380A
RGB
rgb(179, 56, 10)
HSL
hsl(16, 89%, 37%)
HSB
hsb(16, 94%, 70%)
CMYK
cmyk(0%, 69%, 94%, 30%)
Oklch
oklch(51.7% 0.167 37.3)

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

#6E380A

Tangerine · Maroon · Cinnamon

HEX
#6E380A
RGB
rgb(110, 56, 10)
HSL
hsl(28, 83%, 24%)
HSB
hsb(28, 91%, 43%)
CMYK
cmyk(0%, 49%, 91%, 57%)
Oklch
oklch(40.3% 0.094 54.5)

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

#B37E34

Ochre · DarkGoldenRod · Amber Brown

HEX
#B37E34
RGB
rgb(179, 126, 52)
HSL
hsl(35, 55%, 45%)
HSB
hsb(35, 71%, 70%)
CMYK
cmyk(0%, 30%, 71%, 30%)
Oklch
oklch(63.3% 0.111 72.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F0404
043E3E

Analogous

3E0421
3F0404
3E2104

Triadic

3F0404
043E04
04043E

Split-Comp.

3F0404
043E21
04213E

Tetradic

3F0404
213E04
043E3E
21043E

Contrast Matrix WCAG 2.1 Contrast

3F0404
CEB7A9
B3380A
6E380A
B37E34
—
8.9
AAA
2.8
Fail
1.8
Fail
4.8
AA
8.9
AAA
—
3.1
AA Large
4.9
AA
1.8
Fail
2.8
Fail
3.1
AA Large
—
1.6
Fail
1.7
Fail
1.8
Fail
4.9
AA
1.6
Fail
—
2.7
Fail
4.8
AA
1.8
Fail
1.7
Fail
2.7
Fail
—
White BG
17.1AAA
1.9Fail
6.0AA
9.4AAA
3.5AA Large
Black BG
1.2Fail
11.0AAA
3.5AA Large
2.2Fail
6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

252504
C4C4AC
7E7D15
575615
9C9C46

Deuteranopia

292D04
C5C7AD
858E18
5A5E18
9FA34A

Tritanopia

3C0404
CDAFB0
AD1E20
6B1E20
B05457

Achromatopsia

161616
BCBCBC
585858
434343
858585

Shades & Tints Shades & Tints

#3F0404

Dark
Light

#CEB7A9

Dark
Light

#B3380A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f0404;
  --color-2: #ceb7a9;
  --color-3: #b3380a;
  --color-4: #6e380a;
  --color-5: #b37e34;
}

SCSS

$color-1: #3f0404;
$color-2: #ceb7a9;
$color-3: #b3380a;
$color-4: #6e380a;
$color-5: #b37e34;

TAILWIND

colors: {
  'brand-1': '#3f0404',
  'brand-2': '#ceb7a9',
  'brand-3': '#b3380a',
  'brand-4': '#6e380a',
  'brand-5': '#b37e34',
}

RGB Array

[63, 4, 4], [206, 183, 169], [179, 56, 10], [110, 56, 10], [179, 126, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F0404, #CEB7A9, #B3380A, #6E380A, #B37E34 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: #3f0404; --color-2: #ceb7a9; --color-3: #b3380a; --color-4: #6e380a; --color-5: #b37e34. 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