← Back to Editor

#F23040 · #DC0A37 · #E5D747 · #8F043A · #9D164A

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

#F23040

Vermilion · Crimson · Passion Red

HEX
#F23040
RGB
rgb(242, 48, 64)
HSL
hsl(355, 88%, 57%)
HSB
hsb(355, 80%, 95%)
CMYK
cmyk(0%, 80%, 74%, 5%)
Oklch
oklch(62.6% 0.226 23.2)

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

#DC0A37

Vermilion · Crimson · Passion Red

HEX
#DC0A37
RGB
rgb(220, 10, 55)
HSL
hsl(347, 91%, 45%)
HSB
hsb(347, 95%, 86%)
CMYK
cmyk(0%, 95%, 75%, 14%)
Oklch
oklch(56.8% 0.225 21.0)

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

#E5D747

Autumn Sage · SandyBrown · Sunflower

HEX
#E5D747
RGB
rgb(229, 215, 71)
HSL
hsl(55, 75%, 59%)
HSB
hsb(55, 69%, 90%)
CMYK
cmyk(0%, 6%, 69%, 10%)
Oklch
oklch(86.6% 0.159 103.7)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#8F043A

Dark Violet · Brown · Camellia

HEX
#8F043A
RGB
rgb(143, 4, 58)
HSL
hsl(337, 95%, 29%)
HSB
hsb(337, 97%, 56%)
CMYK
cmyk(0%, 97%, 59%, 44%)
Oklch
oklch(41.8% 0.165 8.6)

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

#9D164A

Dark Violet · Brown · Camellia

HEX
#9D164A
RGB
rgb(157, 22, 74)
HSL
hsl(337, 75%, 35%)
HSB
hsb(337, 86%, 62%)
CMYK
cmyk(0%, 86%, 53%, 38%)
Oklch
oklch(45.7% 0.170 5.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F23040
31F2E2

Analogous

F231A1
F23040
F28131

Triadic

F23040
41F231
3141F2

Split-Comp.

F23040
31F281
31A1F2

Tetradic

F23040
A1F231
31F2E2
8131F2

Contrast Matrix WCAG 2.1 Contrast

F23040
DC0A37
E5D747
8F043A
9D164A
—
1.3
Fail
2.7
Fail
2.3
Fail
2.0
Fail
1.3
Fail
—
3.4
AA Large
1.8
Fail
1.6
Fail
2.7
Fail
3.4
AA Large
—
6.3
AA
5.3
AA
2.3
Fail
1.8
Fail
6.3
AA
—
1.2
Fail
2.0
Fail
1.6
Fail
5.3
AA
1.2
Fail
—
White BG
4.0AA Large
5.1AA
1.5Fail
9.3AAA
7.9AAA
Black BG
5.3AA
4.1AA Large
14.1AAA
2.2Fail
2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9E9C3C
817F2C
DFDF6A
53522D
63613D

Deuteranopia

A9B83B
8D9D2A
E0E172
5B652A
6A743A

Tritanopia

E83938
D22422
E4858B
882320
963331

Achromatopsia

6C6C6C
4E4E4E
CBCBCB
343434
444444

Shades & Tints Shades & Tints

#F23040

Dark
Light

#DC0A37

Dark
Light

#E5D747

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f23040;
  --color-2: #dc0a37;
  --color-3: #e5d747;
  --color-4: #8f043a;
  --color-5: #9d164a;
}

SCSS

$color-1: #f23040;
$color-2: #dc0a37;
$color-3: #e5d747;
$color-4: #8f043a;
$color-5: #9d164a;

TAILWIND

colors: {
  'brand-1': '#f23040',
  'brand-2': '#dc0a37',
  'brand-3': '#e5d747',
  'brand-4': '#8f043a',
  'brand-5': '#9d164a',
}

RGB Array

[242, 48, 64], [220, 10, 55], [229, 215, 71], [143, 4, 58], [157, 22, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F23040, #DC0A37, #E5D747, #8F043A, #9D164A 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: #f23040; --color-2: #dc0a37; --color-3: #e5d747; --color-4: #8f043a; --color-5: #9d164a. 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