← Back to Editor

#B01E21 · #FFFCF7 · #C2CC89 · #8C9943 · #6B781F

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

#B01E21

Vermilion · FireBrick · Wine Red

HEX
#B01E21
RGB
rgb(176, 30, 33)
HSL
hsl(359, 71%, 40%)
HSB
hsb(359, 83%, 69%)
CMYK
cmyk(0%, 83%, 81%, 31%)
Oklch
oklch(49.0% 0.181 26.3)

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

#FFFCF7

Goose Yellow · Snow · Peach Orange

HEX
#FFFCF7
RGB
rgb(255, 252, 247)
HSL
hsl(38, 100%, 98%)
HSB
hsb(38, 3%, 100%)
CMYK
cmyk(0%, 1%, 3%, 0%)
Oklch
oklch(99.2% 0.007 80.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#C2CC89

Fresh Green · Tan · Sunflower

HEX
#C2CC89
RGB
rgb(194, 204, 137)
HSL
hsl(69, 40%, 67%)
HSB
hsb(69, 33%, 80%)
CMYK
cmyk(5%, 0%, 33%, 20%)
Oklch
oklch(82.2% 0.089 115.3)

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

#8C9943

Autumn Sage · Gray · Honey Gold

HEX
#8C9943
RGB
rgb(140, 153, 67)
HSL
hsl(69, 39%, 43%)
HSB
hsb(69, 56%, 60%)
CMYK
cmyk(8%, 0%, 56%, 40%)
Oklch
oklch(65.4% 0.112 116.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#6B781F

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#6B781F
RGB
rgb(107, 120, 31)
HSL
hsl(69, 59%, 30%)
HSB
hsb(69, 74%, 47%)
CMYK
cmyk(11%, 0%, 74%, 53%)
Oklch
oklch(54.4% 0.112 117.6)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B01E21
1EAEAC

Analogous

AE1E68
B01E21
AE641E

Triadic

B01E21
20AE1E
1E20AE

Split-Comp.

B01E21
1EAE64
1E68AE

Tetradic

B01E21
68AE1E
1EAEAC
641EAE

Contrast Matrix WCAG 2.1 Contrast

B01E21
FFFCF7
C2CC89
8C9943
6B781F
—
6.7
AA
4.0
AA Large
2.2
Fail
1.4
Fail
6.7
AA
—
1.7
Fail
3.0
AA Large
4.7
AA
4.0
AA Large
1.7
Fail
—
1.8
Fail
2.8
Fail
2.2
Fail
3.0
AA Large
1.8
Fail
—
1.6
Fail
1.4
Fail
4.7
AA
2.8
Fail
1.6
Fail
—
White BG
6.9AA
1.0Fail
1.7Fail
3.1AA Large
4.8AA
Black BG
3.1AA Large
20.5AAA
12.3AAA
6.8AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

716F20
FEFEF8
C6C699
929258
717135

Deuteranopia

798420
FEFEF8
C6C59D
91905D
706F3A

Tritanopia

A92020
FFF9F9
C2A6A9
8D686C
6C4649

Achromatopsia

4A4A4A
FCFCFC
C1C1C1
8B8B8B
6A6A6A

Shades & Tints Shades & Tints

#B01E21

Dark
Light

#FFFCF7

Dark
Light

#C2CC89

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b01e21;
  --color-2: #fffcf7;
  --color-3: #c2cc89;
  --color-4: #8c9943;
  --color-5: #6b781f;
}

SCSS

$color-1: #b01e21;
$color-2: #fffcf7;
$color-3: #c2cc89;
$color-4: #8c9943;
$color-5: #6b781f;

TAILWIND

colors: {
  'brand-1': '#b01e21',
  'brand-2': '#fffcf7',
  'brand-3': '#c2cc89',
  'brand-4': '#8c9943',
  'brand-5': '#6b781f',
}

RGB Array

[176, 30, 33], [255, 252, 247], [194, 204, 137], [140, 153, 67], [107, 120, 31]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B01E21, #FFFCF7, #C2CC89, #8C9943, #6B781F 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: #b01e21; --color-2: #fffcf7; --color-3: #c2cc89; --color-4: #8c9943; --color-5: #6b781f. 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