← Back to Editor

#24102C · #ED4A5D · #FF918A · #F1E3A2 · #F9CFB9

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

#24102C

Dark Plum · Black · Dark Purple

HEX
#24102C
RGB
rgb(36, 16, 44)
HSL
hsl(283, 47%, 12%)
HSB
hsb(283, 64%, 17%)
CMYK
cmyk(18%, 64%, 0%, 83%)
Oklch
oklch(21.7% 0.059 315.5)

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

#ED4A5D

Peach Pink · Tomato · Coral Red

HEX
#ED4A5D
RGB
rgb(237, 74, 93)
HSL
hsl(353, 82%, 61%)
HSB
hsb(353, 69%, 93%)
CMYK
cmyk(0%, 69%, 61%, 7%)
Oklch
oklch(64.3% 0.198 18.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FF918A

Peach Pink · LightSalmon · Coral Red

HEX
#FF918A
RGB
rgb(255, 145, 138)
HSL
hsl(4, 100%, 77%)
HSB
hsb(4, 46%, 100%)
CMYK
cmyk(0%, 43%, 46%, 0%)
Oklch
oklch(77.2% 0.134 24.5)

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

#F1E3A2

Goose Yellow · Wheat · Lemon Cream

HEX
#F1E3A2
RGB
rgb(241, 227, 162)
HSL
hsl(49, 74%, 79%)
HSB
hsb(49, 33%, 95%)
CMYK
cmyk(0%, 6%, 33%, 5%)
Oklch
oklch(91.2% 0.084 97.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F9CFB9

Apricot · Wheat · Peach Orange

HEX
#F9CFB9
RGB
rgb(249, 207, 185)
HSL
hsl(21, 84%, 85%)
HSB
hsb(21, 26%, 98%)
CMYK
cmyk(0%, 17%, 26%, 2%)
Oklch
oklch(88.5% 0.056 49.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

24102C
182D10

Analogous

16102D
24102C
2D1027

Triadic

24102C
2D2510
102D25

Split-Comp.

24102C
272D10
102D16

Tetradic

24102C
2D1610
182D10
10272D

Contrast Matrix WCAG 2.1 Contrast

24102C
ED4A5D
FF918A
F1E3A2
F9CFB9
—
4.8
AA
8.2
AAA
13.7
AAA
12.4
AAA
4.8
AA
—
1.7
Fail
2.8
Fail
2.6
Fail
8.2
AAA
1.7
Fail
—
1.7
Fail
1.5
Fail
13.7
AAA
2.8
Fail
1.7
Fail
—
1.1
Fail
12.4
AAA
2.6
Fail
1.5
Fail
1.1
Fail
—
White BG
17.7AAA
3.7AA Large
2.2Fail
1.3Fail
1.4Fail
Black BG
1.2Fail
5.7AA
9.7AAA
16.2AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

1B1B25
A6A558
CFCE8C
EBEBB2
E7E6BE

Deuteranopia

1D1E24
B0BC57
D6DE8C
ECEDB6
E9ECC0

Tritanopia

23201F
E55554
FA8D8D
F0BEC1
F7C3C3

Achromatopsia

191919
7D7D7D
B1B1B1
E0E0E0
D9D9D9

Shades & Tints Shades & Tints

#24102C

Dark
Light

#ED4A5D

Dark
Light

#FF918A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #24102c;
  --color-2: #ed4a5d;
  --color-3: #ff918a;
  --color-4: #f1e3a2;
  --color-5: #f9cfb9;
}

SCSS

$color-1: #24102c;
$color-2: #ed4a5d;
$color-3: #ff918a;
$color-4: #f1e3a2;
$color-5: #f9cfb9;

TAILWIND

colors: {
  'brand-1': '#24102c',
  'brand-2': '#ed4a5d',
  'brand-3': '#ff918a',
  'brand-4': '#f1e3a2',
  'brand-5': '#f9cfb9',
}

RGB Array

[36, 16, 44], [237, 74, 93], [255, 145, 138], [241, 227, 162], [249, 207, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #24102C, #ED4A5D, #FF918A, #F1E3A2, #F9CFB9 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: #24102c; --color-2: #ed4a5d; --color-3: #ff918a; --color-4: #f1e3a2; --color-5: #f9cfb9. 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