← Back to Editor

#9B2F08 · #CC3813 · #FD4A03 · #E9A33E · #EE7A2B

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

#9B2F08

Tangerine · Brown · Amber Brown

HEX
#9B2F08
RGB
rgb(155, 47, 8)
HSL
hsl(16, 90%, 32%)
HSB
hsb(16, 95%, 61%)
CMYK
cmyk(0%, 70%, 95%, 39%)
Oklch
oklch(46.5% 0.150 37.1)

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

#CC3813

Vermilion · FireBrick · Passion Red

HEX
#CC3813
RGB
rgb(204, 56, 19)
HSL
hsl(12, 83%, 44%)
HSB
hsb(12, 91%, 80%)
CMYK
cmyk(0%, 73%, 91%, 20%)
Oklch
oklch(56.1% 0.190 34.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#FD4A03

Tangerine · OrangeRed · Amber Brown

HEX
#FD4A03
RGB
rgb(253, 74, 3)
HSL
hsl(17, 98%, 50%)
HSB
hsb(17, 99%, 99%)
CMYK
cmyk(0%, 71%, 99%, 1%)
Oklch
oklch(66.2% 0.224 36.3)

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

#E9A33E

Ginger · GoldenRod · Warm Sun

HEX
#E9A33E
RGB
rgb(233, 163, 62)
HSL
hsl(35, 80%, 58%)
HSB
hsb(35, 73%, 91%)
CMYK
cmyk(0%, 30%, 73%, 9%)
Oklch
oklch(76.6% 0.140 72.3)

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

#EE7A2B

Tangerine · Chocolate · Warm Sun

HEX
#EE7A2B
RGB
rgb(238, 122, 43)
HSL
hsl(24, 85%, 55%)
HSB
hsb(24, 82%, 93%)
CMYK
cmyk(0%, 49%, 82%, 7%)
Oklch
oklch(70.1% 0.167 50.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B2F08
08749B

Analogous

9B082A
9B2F08
9B7908

Triadic

9B2F08
089B2F
2F089B

Split-Comp.

9B2F08
089B79
082A9B

Tetradic

9B2F08
2A9B08
08749B
79089B

Contrast Matrix WCAG 2.1 Contrast

9B2F08
CC3813
FD4A03
E9A33E
EE7A2B
—
1.5
Fail
2.2
Fail
3.5
AA Large
2.7
Fail
1.5
Fail
—
1.5
Fail
2.4
Fail
1.8
Fail
2.2
Fail
1.5
Fail
—
1.6
Fail
1.2
Fail
3.5
AA Large
2.4
Fail
1.6
Fail
—
1.3
Fail
2.7
Fail
1.8
Fail
1.2
Fail
1.3
Fail
—
White BG
7.5AAA
5.1AA
3.4AA Large
2.1Fail
2.8Fail
Black BG
2.8Fail
4.1AA Large
6.2AA
9.8AAA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6B11
8C8B1C
AFAE14
CBCA56
BCBB3E

Deuteranopia

737B14
95A01E
BAC718
CFD45C
C3CB43

Tritanopia

96191B
C52325
F42225
E66A6E
E84D51

Achromatopsia

4B4B4B
606060
777777
ACACAC
949494

Shades & Tints Shades & Tints

#9B2F08

Dark
Light

#CC3813

Dark
Light

#FD4A03

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b2f08;
  --color-2: #cc3813;
  --color-3: #fd4a03;
  --color-4: #e9a33e;
  --color-5: #ee7a2b;
}

SCSS

$color-1: #9b2f08;
$color-2: #cc3813;
$color-3: #fd4a03;
$color-4: #e9a33e;
$color-5: #ee7a2b;

TAILWIND

colors: {
  'brand-1': '#9b2f08',
  'brand-2': '#cc3813',
  'brand-3': '#fd4a03',
  'brand-4': '#e9a33e',
  'brand-5': '#ee7a2b',
}

RGB Array

[155, 47, 8], [204, 56, 19], [253, 74, 3], [233, 163, 62], [238, 122, 43]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B2F08, #CC3813, #FD4A03, #E9A33E, #EE7A2B 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: #9b2f08; --color-2: #cc3813; --color-3: #fd4a03; --color-4: #e9a33e; --color-5: #ee7a2b. 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