← Back to Editor

#BB2227 · #F8E877 · #321E1D · #C12322 · #7C0E0F

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

#BB2227

Vermilion · FireBrick · Passion Red

HEX
#BB2227
RGB
rgb(187, 34, 39)
HSL
hsl(358, 69%, 43%)
HSB
hsb(358, 82%, 73%)
CMYK
cmyk(0%, 82%, 79%, 27%)
Oklch
oklch(51.4% 0.188 25.7)

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

#F8E877

Fresh Green · Khaki · Sunflower

HEX
#F8E877
RGB
rgb(248, 232, 119)
HSL
hsl(53, 90%, 72%)
HSB
hsb(53, 52%, 97%)
CMYK
cmyk(0%, 6%, 52%, 3%)
Oklch
oklch(92.1% 0.135 101.3)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#321E1D

Crimson · Black · Deep Berry

HEX
#321E1D
RGB
rgb(50, 30, 29)
HSL
hsl(3, 27%, 15%)
HSB
hsb(3, 42%, 20%)
CMYK
cmyk(0%, 40%, 42%, 80%)
Oklch
oklch(26.1% 0.032 22.6)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#C12322

Vermilion · FireBrick · Passion Red

HEX
#C12322
RGB
rgb(193, 35, 34)
HSL
hsl(0, 70%, 45%)
HSB
hsb(0, 82%, 76%)
CMYK
cmyk(0%, 82%, 82%, 24%)
Oklch
oklch(52.5% 0.193 27.3)

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

#7C0E0F

Vermilion · Maroon · Wine Red

HEX
#7C0E0F
RGB
rgb(124, 14, 15)
HSL
hsl(359, 80%, 27%)
HSB
hsb(359, 89%, 49%)
CMYK
cmyk(0%, 89%, 88%, 51%)
Oklch
oklch(37.6% 0.143 27.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BB2227
22B9B4

Analogous

B92273
BB2227
B96922

Triadic

BB2227
27B922
2227B9

Split-Comp.

BB2227
22B969
2273B9

Tetradic

BB2227
73B922
22B9B4
6922B9

Contrast Matrix WCAG 2.1 Contrast

BB2227
F8E877
321E1D
C12322
7C0E0F
—
5.0
AA
2.5
Fail
1.0
Fail
1.7
Fail
5.0
AA
—
12.5
AAA
4.8
AA
8.7
AAA
2.5
Fail
12.5
AAA
—
2.6
Fail
1.4
Fail
1.0
Fail
4.8
AA
2.6
Fail
—
1.8
Fail
1.7
Fail
8.7
AAA
1.4
Fail
1.8
Fail
—
White BG
6.2AA
1.2Fail
15.7AAA
5.9AA
10.9AAA
Black BG
3.4AA Large
16.8AAA
1.3Fail
3.5AA Large
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

797726
F1F192
29291D
7D7B22
4C4B0F

Deuteranopia

828D26
F2F399
2B2C1D
869222
535B0F

Tritanopia

B32525
F7A8AD
311D1D
B92222
770F0F

Achromatopsia

505050
E0E0E0
242424
525252
2F2F2F

Shades & Tints Shades & Tints

#BB2227

Dark
Light

#F8E877

Dark
Light

#321E1D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bb2227;
  --color-2: #f8e877;
  --color-3: #321e1d;
  --color-4: #c12322;
  --color-5: #7c0e0f;
}

SCSS

$color-1: #bb2227;
$color-2: #f8e877;
$color-3: #321e1d;
$color-4: #c12322;
$color-5: #7c0e0f;

TAILWIND

colors: {
  'brand-1': '#bb2227',
  'brand-2': '#f8e877',
  'brand-3': '#321e1d',
  'brand-4': '#c12322',
  'brand-5': '#7c0e0f',
}

RGB Array

[187, 34, 39], [248, 232, 119], [50, 30, 29], [193, 35, 34], [124, 14, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BB2227, #F8E877, #321E1D, #C12322, #7C0E0F 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: #bb2227; --color-2: #f8e877; --color-3: #321e1d; --color-4: #c12322; --color-5: #7c0e0f. 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