← Back to Editor

#BF5507 · #F4A616 · #713334 · #EFCC88 · #DD8822

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

#BF5507

Tangerine · Chocolate · Amber Brown

HEX
#BF5507
RGB
rgb(191, 85, 7)
HSL
hsl(25, 93%, 39%)
HSB
hsb(25, 96%, 75%)
CMYK
cmyk(0%, 55%, 96%, 25%)
Oklch
oklch(57.5% 0.155 47.6)

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

#F4A616

Ginger · Orange · Warm Sun

HEX
#F4A616
RGB
rgb(244, 166, 22)
HSL
hsl(39, 91%, 52%)
HSB
hsb(39, 91%, 96%)
CMYK
cmyk(0%, 32%, 91%, 4%)
Oklch
oklch(78.2% 0.162 74.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#713334

Crimson · Brown · Wine Red

HEX
#713334
RGB
rgb(113, 51, 52)
HSL
hsl(359, 38%, 32%)
HSB
hsb(359, 55%, 44%)
CMYK
cmyk(0%, 55%, 54%, 56%)
Oklch
oklch(40.5% 0.088 20.8)

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

#EFCC88

Goose Yellow · BurlyWood · Sunflower

HEX
#EFCC88
RGB
rgb(239, 204, 136)
HSL
hsl(40, 76%, 74%)
HSB
hsb(40, 43%, 94%)
CMYK
cmyk(0%, 15%, 43%, 6%)
Oklch
oklch(86.0% 0.095 83.4)

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

#DD8822

Ochre · GoldenRod · Amber Brown

HEX
#DD8822
RGB
rgb(221, 136, 34)
HSL
hsl(33, 73%, 50%)
HSB
hsb(33, 85%, 87%)
CMYK
cmyk(0%, 38%, 85%, 13%)
Oklch
oklch(70.1% 0.148 64.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BF5507
0773C0

Analogous

C00716
BF5507
C0B107

Triadic

BF5507
07C054
5407C0

Split-Comp.

BF5507
07C0B1
0716C0

Tetradic

BF5507
16C007
0773C0
B107C0

Contrast Matrix WCAG 2.1 Contrast

BF5507
F4A616
713334
EFCC88
DD8822
—
2.3
Fail
2.0
Fail
3.0
AA Large
1.7
Fail
2.3
Fail
—
4.6
AA
1.3
Fail
1.4
Fail
2.0
Fail
4.6
AA
—
6.1
AA
3.4
AA Large
3.0
AA Large
1.3
Fail
6.1
AA
—
1.8
Fail
1.7
Fail
1.4
Fail
3.4
AA Large
1.8
Fail
—
White BG
4.6AA
2.0Fail
9.4AAA
1.5Fail
2.8Fail
Black BG
4.5AA
10.3AAA
2.2Fail
13.7AAA
7.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

91901A
D2D239
565634
E0E098
B8B73B

Deuteranopia

979F1E
D7DD41
5A5E34
E2E49C
BDC441

Tritanopia

BA292C
F0545A
6E3434
EDA5A8
D94E52

Achromatopsia

6C6C6C
ADADAD
464646
CFCFCF
969696

Shades & Tints Shades & Tints

#BF5507

Dark
Light

#F4A616

Dark
Light

#713334

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bf5507;
  --color-2: #f4a616;
  --color-3: #713334;
  --color-4: #efcc88;
  --color-5: #dd8822;
}

SCSS

$color-1: #bf5507;
$color-2: #f4a616;
$color-3: #713334;
$color-4: #efcc88;
$color-5: #dd8822;

TAILWIND

colors: {
  'brand-1': '#bf5507',
  'brand-2': '#f4a616',
  'brand-3': '#713334',
  'brand-4': '#efcc88',
  'brand-5': '#dd8822',
}

RGB Array

[191, 85, 7], [244, 166, 22], [113, 51, 52], [239, 204, 136], [221, 136, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BF5507, #F4A616, #713334, #EFCC88, #DD8822 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: #bf5507; --color-2: #f4a616; --color-3: #713334; --color-4: #efcc88; --color-5: #dd8822. 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