← Back to Editor

#F5FED1 · #8B1829 · #690217 · #421D25 · #020202

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

#F5FED1

Willow Green · Beige · Mint Green

HEX
#F5FED1
RGB
rgb(245, 254, 209)
HSL
hsl(72, 96%, 91%)
HSB
hsb(72, 18%, 100%)
CMYK
cmyk(4%, 0%, 18%, 0%)
Oklch
oklch(97.9% 0.059 116.7)

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

#8B1829

Vermilion · Brown · Wine Red

HEX
#8B1829
RGB
rgb(139, 24, 41)
HSL
hsl(351, 71%, 32%)
HSB
hsb(351, 83%, 55%)
CMYK
cmyk(0%, 83%, 71%, 45%)
Oklch
oklch(41.7% 0.149 19.4)

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

#690217

Vermilion · Maroon · Wine Red

HEX
#690217
RGB
rgb(105, 2, 23)
HSL
hsl(348, 96%, 21%)
HSB
hsb(348, 98%, 41%)
CMYK
cmyk(0%, 98%, 78%, 59%)
Oklch
oklch(33.1% 0.131 19.9)

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

#421D25

Crimson · DarkSlateGray · Deep Berry

HEX
#421D25
RGB
rgb(66, 29, 37)
HSL
hsl(347, 39%, 19%)
HSB
hsb(347, 56%, 26%)
CMYK
cmyk(0%, 56%, 44%, 74%)
Oklch
oklch(28.6% 0.058 7.7)

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

#020202

Ink Black · Black · Jet Black

HEX
#020202
RGB
rgb(2, 2, 2)
HSL
hsl(0, 0%, 1%)
HSB
hsb(0, 0%, 1%)
CMYK
cmyk(0%, 0%, 0%, 99%)
Oklch
oklch(8.5% 0.000 89.9)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5FED1
DBD2FE

Analogous

FEF1D2
F5FED1
DFFED2

Triadic

F5FED1
D2F5FE
FED2F5

Split-Comp.

F5FED1
D2DFFE
F1D2FE

Tetradic

F5FED1
D2FEF1
DBD2FE
FED2DF

Contrast Matrix WCAG 2.1 Contrast

F5FED1
8B1829
690217
421D25
020202
—
8.8
AAA
12.3
AAA
13.9
AAA
19.7
AAA
8.8
AAA
—
1.4
Fail
1.6
Fail
2.2
Fail
12.3
AAA
1.4
Fail
—
1.1
Fail
1.6
Fail
13.9
AAA
1.6
Fail
1.1
Fail
—
1.4
Fail
19.7
AAA
2.2
Fail
1.6
Fail
1.4
Fail
—
White BG
1.1Fail
9.3AAA
12.9AAA
14.6AAA
20.7AAA
Black BG
20.0AAA
2.3Fail
1.6Fail
1.4Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

F9F9DC
595825
3C3B12
323223
020202

Deuteranopia

F8F8DF
606924
424A11
343723
020202

Tritanopia

F5E4E6
852221
640E0D
402221
020202

Achromatopsia

F6F6F6
3C3C3C
232323
292929
020202

Shades & Tints Shades & Tints

#F5FED1

Dark
Light

#8B1829

Dark
Light

#690217

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5fed1;
  --color-2: #8b1829;
  --color-3: #690217;
  --color-4: #421d25;
  --color-5: #020202;
}

SCSS

$color-1: #f5fed1;
$color-2: #8b1829;
$color-3: #690217;
$color-4: #421d25;
$color-5: #020202;

TAILWIND

colors: {
  'brand-1': '#f5fed1',
  'brand-2': '#8b1829',
  'brand-3': '#690217',
  'brand-4': '#421d25',
  'brand-5': '#020202',
}

RGB Array

[245, 254, 209], [139, 24, 41], [105, 2, 23], [66, 29, 37], [2, 2, 2]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5FED1, #8B1829, #690217, #421D25, #020202 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #f5fed1; --color-2: #8b1829; --color-3: #690217; --color-4: #421d25; --color-5: #020202. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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