← Back to Editor

#BC4C04 · #E48704 · #F0C504 · #FFEB92 · #A7B3CD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#BC4C04

Tangerine · Chocolate · Amber Brown

HEX
#BC4C04
RGB
rgb(188, 76, 4)
HSL
hsl(23, 96%, 38%)
HSB
hsb(23, 98%, 74%)
CMYK
cmyk(0%, 60%, 98%, 26%)
Oklch
oklch(55.7% 0.160 44.3)

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

#E48704

Ochre · Orange · Amber Brown

HEX
#E48704
RGB
rgb(228, 135, 4)
HSL
hsl(35, 97%, 45%)
HSB
hsb(35, 98%, 89%)
CMYK
cmyk(0%, 41%, 98%, 11%)
Oklch
oklch(70.7% 0.160 63.7)

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

#F0C504

Ochre · Gold · Honey Gold

HEX
#F0C504
RGB
rgb(240, 197, 4)
HSL
hsl(49, 97%, 48%)
HSB
hsb(49, 98%, 94%)
CMYK
cmyk(0%, 18%, 98%, 6%)
Oklch
oklch(83.7% 0.171 92.8)

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

#FFEB92

Goose Yellow · Khaki · Lemon Cream

HEX
#FFEB92
RGB
rgb(255, 235, 146)
HSL
hsl(49, 100%, 79%)
HSB
hsb(49, 43%, 100%)
CMYK
cmyk(0%, 8%, 43%, 0%)
Oklch
oklch(93.7% 0.111 97.0)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#A7B3CD

Azure · LightSteelBlue · Cobalt Blue

HEX
#A7B3CD
RGB
rgb(167, 179, 205)
HSL
hsl(221, 28%, 73%)
HSB
hsb(221, 19%, 80%)
CMYK
cmyk(19%, 13%, 0%, 20%)
Oklch
oklch(76.6% 0.040 265.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BC4C04
0477BE

Analogous

BE041A
BC4C04
BEA804

Triadic

BC4C04
04BE4B
4B04BE

Split-Comp.

BC4C04
04BEA8
041ABE

Tetradic

BC4C04
1ABE04
0477BE
A804BE

Contrast Matrix WCAG 2.1 Contrast

BC4C04
E48704
F0C504
FFEB92
A7B3CD
—
1.9
Fail
3.0
AA Large
4.2
AA Large
2.4
Fail
1.9
Fail
—
1.6
Fail
2.3
Fail
1.3
Fail
3.0
AA Large
1.6
Fail
—
1.4
Fail
1.3
Fail
4.2
AA Large
2.3
Fail
1.4
Fail
—
1.8
Fail
2.4
Fail
1.3
Fail
1.3
Fail
1.8
Fail
—
White BG
5.0AA
2.7Fail
1.7Fail
1.2Fail
2.1Fail
Black BG
4.2AA Large
7.8AAA
12.7AAA
17.6AAA
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8A15
BCBB24
DDDD33
F6F6A8
ACACC7

Deuteranopia

929A1A
C1C82B
E0E33E
F8F9AD
ACABC5

Tritanopia

B62326
DF3D42
EE5860
FEB9BC
A8C2C1

Achromatopsia

656565
949494
BCBCBC
E7E7E7
B2B2B2

Shades & Tints Shades & Tints

#BC4C04

Dark
Light

#E48704

Dark
Light

#F0C504

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bc4c04;
  --color-2: #e48704;
  --color-3: #f0c504;
  --color-4: #ffeb92;
  --color-5: #a7b3cd;
}

SCSS

$color-1: #bc4c04;
$color-2: #e48704;
$color-3: #f0c504;
$color-4: #ffeb92;
$color-5: #a7b3cd;

TAILWIND

colors: {
  'brand-1': '#bc4c04',
  'brand-2': '#e48704',
  'brand-3': '#f0c504',
  'brand-4': '#ffeb92',
  'brand-5': '#a7b3cd',
}

RGB Array

[188, 76, 4], [228, 135, 4], [240, 197, 4], [255, 235, 146], [167, 179, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BC4C04, #E48704, #F0C504, #FFEB92, #A7B3CD 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: #bc4c04; --color-2: #e48704; --color-3: #f0c504; --color-4: #ffeb92; --color-5: #a7b3cd. 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