← Back to Editor

#E02247 · #F97D63 · #E1B074 · #AF955E · #4E301D

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

#E02247

Vermilion · Crimson · Passion Red

HEX
#E02247
RGB
rgb(224, 34, 71)
HSL
hsl(348, 75%, 51%)
HSB
hsb(348, 85%, 88%)
CMYK
cmyk(0%, 85%, 68%, 12%)
Oklch
oklch(58.6% 0.219 18.3)

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

#F97D63

Peach Pink · Salmon · Coral Red

HEX
#F97D63
RGB
rgb(249, 125, 99)
HSL
hsl(10, 93%, 68%)
HSB
hsb(10, 60%, 98%)
CMYK
cmyk(0%, 50%, 60%, 2%)
Oklch
oklch(72.7% 0.157 33.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#E1B074

Ginger · BurlyWood · Warm Sun

HEX
#E1B074
RGB
rgb(225, 176, 116)
HSL
hsl(33, 64%, 67%)
HSB
hsb(33, 48%, 88%)
CMYK
cmyk(0%, 22%, 48%, 12%)
Oklch
oklch(78.9% 0.096 71.3)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#AF955E

Ginger · Gray · Sunflower

HEX
#AF955E
RGB
rgb(175, 149, 94)
HSL
hsl(41, 34%, 53%)
HSB
hsb(41, 46%, 69%)
CMYK
cmyk(0%, 15%, 46%, 31%)
Oklch
oklch(68.1% 0.079 85.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#4E301D

Tangerine · DarkOliveGreen · Cinnamon

HEX
#4E301D
RGB
rgb(78, 48, 29)
HSL
hsl(23, 46%, 21%)
HSB
hsb(23, 63%, 31%)
CMYK
cmyk(0%, 38%, 63%, 69%)
Oklch
oklch(34.1% 0.053 52.4)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E02247
24E0BA

Analogous

E024A8
E02247
E05D24

Triadic

E02247
4AE024
244AE0

Split-Comp.

E02247
24E05D
24A8E0

Tetradic

E02247
A8E024
24E0BA
5D24E0

Contrast Matrix WCAG 2.1 Contrast

E02247
F97D63
E1B074
AF955E
4E301D
—
1.8
Fail
2.4
Fail
1.6
Fail
2.5
Fail
1.8
Fail
—
1.3
Fail
1.1
Fail
4.6
AA
2.4
Fail
1.3
Fail
—
1.5
Fail
6.0
AA
1.6
Fail
1.1
Fail
1.5
Fail
—
4.1
AA Large
2.5
Fail
4.6
AA
6.0
AA
4.1
AA Large
—
White BG
4.7AA
2.6Fail
2.0Fail
2.9Fail
11.9AAA
Black BG
4.5AA Large
8.1AAA
10.7AAA
7.3AAA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8E8C3E
C3C269
CCCB83
A4A46B
414122

Deuteranopia

99A73C
CBD46B
CFD286
A5A76F
434523

Tritanopia

D63735
F36E6F
DF8E91
AE7678
4D2526

Achromatopsia

5F5F5F
9F9F9F
B8B8B8
979797
373737

Shades & Tints Shades & Tints

#E02247

Dark
Light

#F97D63

Dark
Light

#E1B074

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e02247;
  --color-2: #f97d63;
  --color-3: #e1b074;
  --color-4: #af955e;
  --color-5: #4e301d;
}

SCSS

$color-1: #e02247;
$color-2: #f97d63;
$color-3: #e1b074;
$color-4: #af955e;
$color-5: #4e301d;

TAILWIND

colors: {
  'brand-1': '#e02247',
  'brand-2': '#f97d63',
  'brand-3': '#e1b074',
  'brand-4': '#af955e',
  'brand-5': '#4e301d',
}

RGB Array

[224, 34, 71], [249, 125, 99], [225, 176, 116], [175, 149, 94], [78, 48, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E02247, #F97D63, #E1B074, #AF955E, #4E301D 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: #e02247; --color-2: #f97d63; --color-3: #e1b074; --color-4: #af955e; --color-5: #4e301d. 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