← Back to Editor

#BF3304 · #F3B361 · #331C00 · #CC7E18 · #FF8C4F

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

#BF3304

Tangerine · FireBrick · Amber Brown

HEX
#BF3304
RGB
rgb(191, 51, 4)
HSL
hsl(15, 96%, 38%)
HSB
hsb(15, 98%, 75%)
CMYK
cmyk(0%, 73%, 98%, 25%)
Oklch
oklch(53.3% 0.183 35.4)

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

#F3B361

Ginger · SandyBrown · Warm Sun

HEX
#F3B361
RGB
rgb(243, 179, 97)
HSL
hsl(34, 86%, 67%)
HSB
hsb(34, 60%, 95%)
CMYK
cmyk(0%, 26%, 60%, 5%)
Oklch
oklch(81.0% 0.124 71.3)

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

#331C00

Ochre · Black · Cinnamon

HEX
#331C00
RGB
rgb(51, 28, 0)
HSL
hsl(33, 100%, 10%)
HSB
hsb(33, 100%, 20%)
CMYK
cmyk(0%, 45%, 100%, 80%)
Oklch
oklch(25.2% 0.055 68.0)

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

#CC7E18

Ochre · Chocolate · Amber Brown

HEX
#CC7E18
RGB
rgb(204, 126, 24)
HSL
hsl(34, 79%, 45%)
HSB
hsb(34, 88%, 80%)
CMYK
cmyk(0%, 38%, 88%, 20%)
Oklch
oklch(66.1% 0.141 65.6)

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

#FF8C4F

Apricot · Coral · Warm Sun

HEX
#FF8C4F
RGB
rgb(255, 140, 79)
HSL
hsl(21, 100%, 65%)
HSB
hsb(21, 69%, 100%)
CMYK
cmyk(0%, 45%, 69%, 0%)
Oklch
oklch(75.5% 0.158 46.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF3304
048FBE

Analogous

BE0432
BF3304
BE8F04

Triadic

BF3304
04BE32
3204BE

Split-Comp.

BF3304
04BE8F
0432BE

Tetradic

BF3304
32BE04
048FBE
8F04BE

Contrast Matrix WCAG 2.1 Contrast

BF3304
F3B361
331C00
CC7E18
FF8C4F
—
3.1
AA Large
2.8
Fail
1.8
Fail
2.5
Fail
3.1
AA Large
—
8.7
AAA
1.7
Fail
1.3
Fail
2.8
Fail
8.7
AAA
—
5.0
AA
7.0
AA
1.8
Fail
1.7
Fail
5.0
AA
—
1.4
Fail
2.5
Fail
1.3
Fail
7.0
AA
1.4
Fail
—
White BG
5.7AA
1.8Fail
16.1AAA
3.2AA Large
2.3Fail
Black BG
3.7AA Large
11.4AAA
1.3Fail
6.6AA
9.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

82810F
D7D775
292907
AAAA31
CDCC5E

Deuteranopia

8B9512
DBE07A
2A2C08
AFB537
D4DD61

Tritanopia

B8181A
F08588
320C0D
C84448
F9696C

Achromatopsia

585858
BDBDBD
202020
8A8A8A
A7A7A7

Shades & Tints Shades & Tints

#BF3304

Dark
Light

#F3B361

Dark
Light

#331C00

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf3304;
  --color-2: #f3b361;
  --color-3: #331c00;
  --color-4: #cc7e18;
  --color-5: #ff8c4f;
}

SCSS

$color-1: #bf3304;
$color-2: #f3b361;
$color-3: #331c00;
$color-4: #cc7e18;
$color-5: #ff8c4f;

TAILWIND

colors: {
  'brand-1': '#bf3304',
  'brand-2': '#f3b361',
  'brand-3': '#331c00',
  'brand-4': '#cc7e18',
  'brand-5': '#ff8c4f',
}

RGB Array

[191, 51, 4], [243, 179, 97], [51, 28, 0], [204, 126, 24], [255, 140, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF3304, #F3B361, #331C00, #CC7E18, #FF8C4F is ideal for: social media posters, mobile apps, e-commerce promos, 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: #bf3304; --color-2: #f3b361; --color-3: #331c00; --color-4: #cc7e18; --color-5: #ff8c4f. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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