← Back to Editor

#BB0408 · #FB5813 · #F4CCCA · #805147 · #FA8331

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

#BB0408

Vermilion · FireBrick · Wine Red

HEX
#BB0408
RGB
rgb(187, 4, 8)
HSL
hsl(359, 96%, 37%)
HSB
hsb(359, 98%, 73%)
CMYK
cmyk(0%, 98%, 96%, 27%)
Oklch
oklch(49.9% 0.203 28.6)

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

#FB5813

Tangerine · OrangeRed · Warm Sun

HEX
#FB5813
RGB
rgb(251, 88, 19)
HSL
hsl(18, 97%, 53%)
HSB
hsb(18, 92%, 98%)
CMYK
cmyk(0%, 65%, 92%, 2%)
Oklch
oklch(67.3% 0.210 38.8)

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

#F4CCCA

Peach Pink · Pink · Cherry Blossom

HEX
#F4CCCA
RGB
rgb(244, 204, 202)
HSL
hsl(3, 66%, 87%)
HSB
hsb(3, 17%, 96%)
CMYK
cmyk(0%, 16%, 17%, 4%)
Oklch
oklch(87.9% 0.045 21.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#805147

Crimson · Sienna · Wine Red

HEX
#805147
RGB
rgb(128, 81, 71)
HSL
hsl(11, 29%, 39%)
HSB
hsb(11, 45%, 50%)
CMYK
cmyk(0%, 37%, 45%, 50%)
Oklch
oklch(48.5% 0.066 32.6)

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

#FA8331

Tangerine · Coral · Warm Sun

HEX
#FA8331
RGB
rgb(250, 131, 49)
HSL
hsl(24, 95%, 59%)
HSB
hsb(24, 80%, 98%)
CMYK
cmyk(0%, 48%, 80%, 2%)
Oklch
oklch(73.1% 0.171 50.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB0408
04B9B6

Analogous

B90461
BB0408
B95B04

Triadic

BB0408
07B904
0407B9

Split-Comp.

BB0408
04B95B
0461B9

Tetradic

BB0408
61B904
04B9B6
5B04B9

Contrast Matrix WCAG 2.1 Contrast

BB0408
FB5813
F4CCCA
805147
FA8331
—
2.1
Fail
4.6
AA
1.0
Fail
2.7
Fail
2.1
Fail
—
2.2
Fail
2.0
Fail
1.3
Fail
4.6
AA
2.2
Fail
—
4.5
AA
1.7
Fail
1.0
Fail
2.0
Fail
4.5
AA
—
2.6
Fail
2.7
Fail
1.3
Fail
1.7
Fail
2.6
Fail
—
White BG
6.7AA
3.2AA Large
1.5Fail
6.6AA
2.5Fail
Black BG
3.1AA Large
6.5AA
14.3AAA
3.2AA Large
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6A07
B4B324
E3E2CA
6C6B49
C6C545

Deuteranopia

768407
BECA28
E5E8CB
6E724A
CDD64A

Tritanopia

B20606
F33134
F2CBCB
7E4B4C
F45558

Achromatopsia

3B3B3B
818181
D8D8D8
5E5E5E
9D9D9D

Shades & Tints Shades & Tints

#BB0408

Dark
Light

#FB5813

Dark
Light

#F4CCCA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb0408;
  --color-2: #fb5813;
  --color-3: #f4ccca;
  --color-4: #805147;
  --color-5: #fa8331;
}

SCSS

$color-1: #bb0408;
$color-2: #fb5813;
$color-3: #f4ccca;
$color-4: #805147;
$color-5: #fa8331;

TAILWIND

colors: {
  'brand-1': '#bb0408',
  'brand-2': '#fb5813',
  'brand-3': '#f4ccca',
  'brand-4': '#805147',
  'brand-5': '#fa8331',
}

RGB Array

[187, 4, 8], [251, 88, 19], [244, 204, 202], [128, 81, 71], [250, 131, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB0408, #FB5813, #F4CCCA, #805147, #FA8331 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: #bb0408; --color-2: #fb5813; --color-3: #f4ccca; --color-4: #805147; --color-5: #fa8331. 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