← Back to Editor

#E13D22 · #E68615 · #F50DA0 · #21B97C · #F6C403

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#E13D22

Vermilion · OrangeRed · Passion Red

HEX
#E13D22
RGB
rgb(225, 61, 34)
HSL
hsl(8, 76%, 51%)
HSB
hsb(8, 85%, 88%)
CMYK
cmyk(0%, 73%, 85%, 12%)
Oklch
oklch(60.3% 0.205 32.0)

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

#E68615

Ochre · GoldenRod · Amber Brown

HEX
#E68615
RGB
rgb(230, 134, 21)
HSL
hsl(32, 83%, 49%)
HSB
hsb(32, 91%, 90%)
CMYK
cmyk(0%, 42%, 91%, 10%)
Oklch
oklch(70.9% 0.159 61.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#F50DA0

Rose Purple · DeepPink · Rose Pink

HEX
#F50DA0
RGB
rgb(245, 13, 160)
HSL
hsl(322, 92%, 51%)
HSB
hsb(322, 95%, 96%)
CMYK
cmyk(0%, 95%, 35%, 4%)
Oklch
oklch(64.1% 0.263 350.8)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#21B97C

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#21B97C
RGB
rgb(33, 185, 124)
HSL
hsl(156, 70%, 43%)
HSB
hsb(156, 82%, 73%)
CMYK
cmyk(82%, 0%, 33%, 27%)
Oklch
oklch(69.7% 0.150 159.9)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#F6C403

Ochre · Gold · Honey Gold

HEX
#F6C403
RGB
rgb(246, 196, 3)
HSL
hsl(48, 98%, 49%)
HSB
hsb(48, 99%, 96%)
CMYK
cmyk(0%, 20%, 99%, 4%)
Oklch
oklch(84.1% 0.171 90.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E13D22
23C8E1

Analogous

E12369
E13D22
E19B23

Triadic

E13D22
23E13C
3C23E1

Split-Comp.

E13D22
23E19B
2369E1

Tetradic

E13D22
69E123
23C8E1
9B23E1

Contrast Matrix WCAG 2.1 Contrast

E13D22
E68615
F50DA0
21B97C
F6C403
—
1.6
Fail
1.1
Fail
1.7
Fail
2.6
Fail
1.6
Fail
—
1.4
Fail
1.1
Fail
1.6
Fail
1.1
Fail
1.4
Fail
—
1.5
Fail
2.4
Fail
1.7
Fail
1.1
Fail
1.5
Fail
—
1.5
Fail
2.6
Fail
1.6
Fail
2.4
Fail
1.5
Fail
—
White BG
4.3AA Large
2.7Fail
3.9AA Large
2.5Fail
1.6Fail
Black BG
4.9AA
7.8AAA
5.4AA
8.3AAA
12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9A9929
BCBC30
918E7C
63648B
E0E032

Deuteranopia

A4B02A
C2C937
9EAF74
5A4F8E
E3E73D

Tritanopia

D92E2F
E1464B
E9605A
299699
F4575F

Achromatopsia

6B6B6B
969696
636363
858585
BDBDBD

Shades & Tints Shades & Tints

#E13D22

Dark
Light

#E68615

Dark
Light

#F50DA0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e13d22;
  --color-2: #e68615;
  --color-3: #f50da0;
  --color-4: #21b97c;
  --color-5: #f6c403;
}

SCSS

$color-1: #e13d22;
$color-2: #e68615;
$color-3: #f50da0;
$color-4: #21b97c;
$color-5: #f6c403;

TAILWIND

colors: {
  'brand-1': '#e13d22',
  'brand-2': '#e68615',
  'brand-3': '#f50da0',
  'brand-4': '#21b97c',
  'brand-5': '#f6c403',
}

RGB Array

[225, 61, 34], [230, 134, 21], [245, 13, 160], [33, 185, 124], [246, 196, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E13D22, #E68615, #F50DA0, #21B97C, #F6C403 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: #e13d22; --color-2: #e68615; --color-3: #f50da0; --color-4: #21b97c; --color-5: #f6c403. 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