← Back to Editor

#282552 · #F52151 · #F96153 · #E9CBA7 · #FFF7CC

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 AppData Visualization

Color Details Color Details

#282552

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#282552
RGB
rgb(40, 37, 82)
HSL
hsl(244, 38%, 23%)
HSB
hsb(244, 55%, 32%)
CMYK
cmyk(51%, 55%, 0%, 68%)
Oklch
oklch(29.4% 0.079 283.4)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#F52151

Vermilion · Crimson · Passion Red

HEX
#F52151
RGB
rgb(245, 33, 81)
HSL
hsl(346, 91%, 55%)
HSB
hsb(346, 87%, 96%)
CMYK
cmyk(0%, 87%, 67%, 4%)
Oklch
oklch(62.5% 0.237 17.1)

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

#F96153

Peach Pink · Tomato · Coral Red

HEX
#F96153
RGB
rgb(249, 97, 83)
HSL
hsl(5, 93%, 65%)
HSB
hsb(5, 67%, 98%)
CMYK
cmyk(0%, 61%, 67%, 2%)
Oklch
oklch(68.6% 0.189 28.3)

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

#E9CBA7

Goose Yellow · Wheat · Peach Orange

HEX
#E9CBA7
RGB
rgb(233, 203, 167)
HSL
hsl(33, 60%, 78%)
HSB
hsb(33, 28%, 91%)
CMYK
cmyk(0%, 13%, 28%, 9%)
Oklch
oklch(85.8% 0.059 72.0)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFF7CC

Fresh Green · Beige · Lemon Cream

HEX
#FFF7CC
RGB
rgb(255, 247, 204)
HSL
hsl(51, 100%, 90%)
HSB
hsb(51, 20%, 100%)
CMYK
cmyk(0%, 3%, 20%, 0%)
Oklch
oklch(97.2% 0.056 98.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

282552
4E5124

Analogous

243851
282552
3E2451

Triadic

282552
512724
245127

Split-Comp.

282552
513E24
385124

Tetradic

282552
512438
4E5124
24513E

Contrast Matrix WCAG 2.1 Contrast

282552
F52151
F96153
E9CBA7
FFF7CC
—
3.5
AA Large
4.6
AA
9.2
AAA
13.2
AAA
3.5
AA Large
—
1.3
Fail
2.6
Fail
3.7
AA Large
4.6
AA
1.3
Fail
—
2.0
Fail
2.8
Fail
9.2
AAA
2.6
Fail
2.0
Fail
—
1.4
Fail
13.2
AAA
3.7
AA Large
2.8
Fail
1.4
Fail
—
White BG
14.2AAA
4.0AA Large
3.1AA Large
1.5Fail
1.1Fail
Black BG
1.5Fail
5.2AA
6.9AA
13.6AAA
19.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

272747
999745
B7B656
DCDCB0
FCFBD6

Deuteranopia

272745
A6B543
C0CB57
DEE0B2
FCFDD9

Tritanopia

283F3D
EA3C3A
F1595A
E8B7B8
FFDFE0

Achromatopsia

2B2B2B
666666
8D8D8D
D0D0D0
F4F4F4

Shades & Tints Shades & Tints

#282552

Dark
Light

#F52151

Dark
Light

#F96153

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #282552;
  --color-2: #f52151;
  --color-3: #f96153;
  --color-4: #e9cba7;
  --color-5: #fff7cc;
}

SCSS

$color-1: #282552;
$color-2: #f52151;
$color-3: #f96153;
$color-4: #e9cba7;
$color-5: #fff7cc;

TAILWIND

colors: {
  'brand-1': '#282552',
  'brand-2': '#f52151',
  'brand-3': '#f96153',
  'brand-4': '#e9cba7',
  'brand-5': '#fff7cc',
}

RGB Array

[40, 37, 82], [245, 33, 81], [249, 97, 83], [233, 203, 167], [255, 247, 204]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #282552, #F52151, #F96153, #E9CBA7, #FFF7CC 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: #282552; --color-2: #f52151; --color-3: #f96153; --color-4: #e9cba7; --color-5: #fff7cc. 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