← Back to Editor

#421D47 · #9C0B45 · #D14B26 · #D97F25 · #F2CE49

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

#421D47

Dark Plum · DarkSlateGray · Dark Purple

HEX
#421D47
RGB
rgb(66, 29, 71)
HSL
hsl(293, 42%, 20%)
HSB
hsb(293, 59%, 28%)
CMYK
cmyk(7%, 59%, 0%, 72%)
Oklch
oklch(30.3% 0.085 322.7)

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

#9C0B45

Dark Violet · Brown · Camellia

HEX
#9C0B45
RGB
rgb(156, 11, 69)
HSL
hsl(336, 87%, 33%)
HSB
hsb(336, 93%, 61%)
CMYK
cmyk(0%, 93%, 56%, 39%)
Oklch
oklch(44.9% 0.174 6.5)

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

#D14B26

Vermilion · Chocolate · Passion Red

HEX
#D14B26
RGB
rgb(209, 75, 38)
HSL
hsl(13, 69%, 48%)
HSB
hsb(13, 82%, 82%)
CMYK
cmyk(0%, 64%, 82%, 18%)
Oklch
oklch(59.2% 0.176 35.8)

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

#D97F25

Ochre · Chocolate · Amber Brown

HEX
#D97F25
RGB
rgb(217, 127, 37)
HSL
hsl(30, 71%, 50%)
HSB
hsb(30, 83%, 85%)
CMYK
cmyk(0%, 41%, 83%, 15%)
Oklch
oklch(68.0% 0.147 59.6)

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

#F2CE49

Ginger · SandyBrown · Sunflower

HEX
#F2CE49
RGB
rgb(242, 206, 73)
HSL
hsl(47, 87%, 62%)
HSB
hsb(47, 70%, 95%)
CMYK
cmyk(0%, 15%, 70%, 5%)
Oklch
oklch(85.9% 0.151 93.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

421D47
23481E

Analogous

2E1E48
421D47
481E38

Triadic

421D47
48431E
1E4843

Split-Comp.

421D47
38481E
1E482E

Tetradic

421D47
482E1E
23481E
1E3848

Contrast Matrix WCAG 2.1 Contrast

421D47
9C0B45
D14B26
D97F25
F2CE49
—
1.7
Fail
3.2
AA Large
4.7
AA
9.1
AAA
1.7
Fail
—
1.9
Fail
2.8
Fail
5.4
AA
3.2
AA Large
1.9
Fail
—
1.5
Fail
2.9
Fail
4.7
AA
2.8
Fail
1.5
Fail
—
2.0
Fail
9.1
AAA
5.4
AA
2.9
Fail
2.0
Fail
—
White BG
14.0AAA
8.2AAA
4.4AA Large
3.0Fail
1.5Fail
Black BG
1.5Fail
2.5Fail
4.7AA
7.0AAA
13.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

32323D
5D5C37
97962F
B2B13B
E2E269

Deuteranopia

34373A
667034
9FA931
B7BE40
E5E771

Tritanopia

403533
952C29
CA3638
D44C50
F08388

Achromatopsia

2D2D2D
3D3D3D
6F6F6F
909090
CACACA

Shades & Tints Shades & Tints

#421D47

Dark
Light

#9C0B45

Dark
Light

#D14B26

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #421d47;
  --color-2: #9c0b45;
  --color-3: #d14b26;
  --color-4: #d97f25;
  --color-5: #f2ce49;
}

SCSS

$color-1: #421d47;
$color-2: #9c0b45;
$color-3: #d14b26;
$color-4: #d97f25;
$color-5: #f2ce49;

TAILWIND

colors: {
  'brand-1': '#421d47',
  'brand-2': '#9c0b45',
  'brand-3': '#d14b26',
  'brand-4': '#d97f25',
  'brand-5': '#f2ce49',
}

RGB Array

[66, 29, 71], [156, 11, 69], [209, 75, 38], [217, 127, 37], [242, 206, 73]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #421D47, #9C0B45, #D14B26, #D97F25, #F2CE49 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: #421d47; --color-2: #9c0b45; --color-3: #d14b26; --color-4: #d97f25; --color-5: #f2ce49. 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