← Back to Editor

#E03045 · #F54B3C · #F4845F · #FFBAB8 · #9870B9

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 App

Color Details Color Details

#E03045

Vermilion · Crimson · Passion Red

HEX
#E03045
RGB
rgb(224, 48, 69)
HSL
hsl(353, 74%, 53%)
HSB
hsb(353, 79%, 88%)
CMYK
cmyk(0%, 79%, 69%, 12%)
Oklch
oklch(59.5% 0.210 20.7)

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

#F54B3C

Vermilion · Tomato · Passion Red

HEX
#F54B3C
RGB
rgb(245, 75, 60)
HSL
hsl(5, 90%, 60%)
HSB
hsb(5, 76%, 96%)
CMYK
cmyk(0%, 69%, 76%, 4%)
Oklch
oklch(65.3% 0.209 29.1)

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

#F4845F

Apricot · Coral · Warm Sun

HEX
#F4845F
RGB
rgb(244, 132, 95)
HSL
hsl(15, 87%, 66%)
HSB
hsb(15, 61%, 96%)
CMYK
cmyk(0%, 46%, 61%, 4%)
Oklch
oklch(73.0% 0.147 38.9)

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

#FFBAB8

Peach Pink · LightPink · Cherry Blossom

HEX
#FFBAB8
RGB
rgb(255, 186, 184)
HSL
hsl(2, 100%, 86%)
HSB
hsb(2, 28%, 100%)
CMYK
cmyk(0%, 27%, 28%, 0%)
Oklch
oklch(85.2% 0.080 20.8)

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

#9870B9

Dark Plum · MediumOrchid · Violet

HEX
#9870B9
RGB
rgb(152, 112, 185)
HSL
hsl(273, 34%, 58%)
HSB
hsb(273, 39%, 73%)
CMYK
cmyk(18%, 39%, 0%, 27%)
Oklch
oklch(61.4% 0.115 308.5)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E03045
2EE0CB

Analogous

E02E9C
E03045
E0722E

Triadic

E03045
43E02E
2E43E0

Split-Comp.

E03045
2EE072
2E9CE0

Tetradic

E03045
9CE02E
2EE0CB
722EE0

Contrast Matrix WCAG 2.1 Contrast

E03045
F54B3C
F4845F
FFBAB8
9870B9
—
1.3
Fail
1.8
Fail
2.8
Fail
1.1
Fail
1.3
Fail
—
1.4
Fail
2.2
Fail
1.1
Fail
1.8
Fail
1.4
Fail
—
1.6
Fail
1.6
Fail
2.8
Fail
2.2
Fail
1.6
Fail
—
2.4
Fail
1.1
Fail
1.1
Fail
1.6
Fail
2.4
Fail
—
White BG
4.5AA Large
3.5AA Large
2.5Fail
1.6Fail
3.9AA Large
Black BG
4.7AA
6.0AA
8.3AAA
13.0AAA
5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

949240
ABAA40
C4C268
E1E1B8
8786A7

Deuteranopia

9EAB3F
B5C241
CAD26A
E5EAB9
898CA3

Tritanopia

D73C3B
ED4243
EE6F71
FCB9B9
969996

Achromatopsia

676767
7C7C7C
A1A1A1
CECECE
848484

Shades & Tints Shades & Tints

#E03045

Dark
Light

#F54B3C

Dark
Light

#F4845F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e03045;
  --color-2: #f54b3c;
  --color-3: #f4845f;
  --color-4: #ffbab8;
  --color-5: #9870b9;
}

SCSS

$color-1: #e03045;
$color-2: #f54b3c;
$color-3: #f4845f;
$color-4: #ffbab8;
$color-5: #9870b9;

TAILWIND

colors: {
  'brand-1': '#e03045',
  'brand-2': '#f54b3c',
  'brand-3': '#f4845f',
  'brand-4': '#ffbab8',
  'brand-5': '#9870b9',
}

RGB Array

[224, 48, 69], [245, 75, 60], [244, 132, 95], [255, 186, 184], [152, 112, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E03045, #F54B3C, #F4845F, #FFBAB8, #9870B9 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #e03045; --color-2: #f54b3c; --color-3: #f4845f; --color-4: #ffbab8; --color-5: #9870b9. 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. 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