← Back to Editor

#F55404 · #C8660F · #BB8E1B · #BCB950 · #AEC189

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 App

Color Details Color Details

#F55404

Tangerine · OrangeRed · Amber Brown

HEX
#F55404
RGB
rgb(245, 84, 4)
HSL
hsl(20, 97%, 49%)
HSB
hsb(20, 98%, 96%)
CMYK
cmyk(0%, 66%, 98%, 4%)
Oklch
oklch(65.9% 0.209 39.3)

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

#C8660F

Tangerine · Chocolate · Amber Brown

HEX
#C8660F
RGB
rgb(200, 102, 15)
HSL
hsl(28, 86%, 42%)
HSB
hsb(28, 93%, 78%)
CMYK
cmyk(0%, 49%, 93%, 22%)
Oklch
oklch(61.5% 0.151 53.4)

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

#BB8E1B

Ochre · DarkGoldenRod · Honey Gold

HEX
#BB8E1B
RGB
rgb(187, 142, 27)
HSL
hsl(43, 75%, 42%)
HSB
hsb(43, 86%, 73%)
CMYK
cmyk(0%, 24%, 86%, 27%)
Oklch
oklch(67.2% 0.131 84.5)

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

#BCB950

Autumn Sage · GoldenRod · Sunflower

HEX
#BCB950
RGB
rgb(188, 185, 80)
HSL
hsl(58, 45%, 53%)
HSB
hsb(58, 57%, 74%)
CMYK
cmyk(0%, 2%, 57%, 26%)
Oklch
oklch(76.7% 0.127 107.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#AEC189

Willow Green · DarkSeaGreen · Apple Green

HEX
#AEC189
RGB
rgb(174, 193, 137)
HSL
hsl(80, 31%, 65%)
HSB
hsb(80, 29%, 76%)
CMYK
cmyk(10%, 0%, 29%, 24%)
Oklch
oklch(78.2% 0.079 123.4)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F55404
04A5F6

Analogous

F6042C
F55404
F6CE04

Triadic

F55404
04F655
5504F6

Split-Comp.

F55404
04F6CE
042CF6

Tetradic

F55404
2CF604
04A5F6
CE04F6

Contrast Matrix WCAG 2.1 Contrast

F55404
C8660F
BB8E1B
BCB950
AEC189
—
1.1
Fail
1.1
Fail
1.7
Fail
1.8
Fail
1.1
Fail
—
1.3
Fail
1.9
Fail
2.0
Fail
1.1
Fail
1.3
Fail
—
1.5
Fail
1.5
Fail
1.7
Fail
1.9
Fail
1.5
Fail
—
1.1
Fail
1.8
Fail
2.0
Fail
1.5
Fail
1.1
Fail
—
White BG
3.4AA Large
3.9AA Large
3.0AA Large
2.1Fail
1.9Fail
Black BG
6.2AA
5.4AA
7.0AA
10.2AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AFAE17
9E9D24
A8A737
BBBB69
B6B697

Deuteranopia

B9C51C
A3AB29
AAAE3E
BBBB70
B5B49A

Tritanopia

ED272A
C33538
B94D52
BC7D82
AFA1A4

Achromatopsia

7B7B7B
797979
8E8E8E
AEAEAE
B5B5B5

Shades & Tints Shades & Tints

#F55404

Dark
Light

#C8660F

Dark
Light

#BB8E1B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f55404;
  --color-2: #c8660f;
  --color-3: #bb8e1b;
  --color-4: #bcb950;
  --color-5: #aec189;
}

SCSS

$color-1: #f55404;
$color-2: #c8660f;
$color-3: #bb8e1b;
$color-4: #bcb950;
$color-5: #aec189;

TAILWIND

colors: {
  'brand-1': '#f55404',
  'brand-2': '#c8660f',
  'brand-3': '#bb8e1b',
  'brand-4': '#bcb950',
  'brand-5': '#aec189',
}

RGB Array

[245, 84, 4], [200, 102, 15], [187, 142, 27], [188, 185, 80], [174, 193, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F55404, #C8660F, #BB8E1B, #BCB950, #AEC189 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #f55404; --color-2: #c8660f; --color-3: #bb8e1b; --color-4: #bcb950; --color-5: #aec189. 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. 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