← Back to Editor

#3F0D54 · #D42F2F · #E89D51 · #C3CF6B · #F0DF95

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

#3F0D54

Royal Purple · MidnightBlue · Dark Purple

HEX
#3F0D54
RGB
rgb(63, 13, 84)
HSL
hsl(282, 73%, 19%)
HSB
hsb(282, 85%, 33%)
CMYK
cmyk(25%, 85%, 0%, 67%)
Oklch
oklch(28.7% 0.123 313.3)

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

#D42F2F

Vermilion · Crimson · Passion Red

HEX
#D42F2F
RGB
rgb(212, 47, 47)
HSL
hsl(0, 66%, 51%)
HSB
hsb(0, 78%, 83%)
CMYK
cmyk(0%, 78%, 78%, 17%)
Oklch
oklch(57.0% 0.201 26.4)

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

#E89D51

Ginger · SandyBrown · Warm Sun

HEX
#E89D51
RGB
rgb(232, 157, 81)
HSL
hsl(30, 77%, 61%)
HSB
hsb(30, 65%, 91%)
CMYK
cmyk(0%, 32%, 65%, 9%)
Oklch
oklch(75.6% 0.128 64.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#C3CF6B

Fresh Green · BurlyWood · Sunflower

HEX
#C3CF6B
RGB
rgb(195, 207, 107)
HSL
hsl(67, 51%, 62%)
HSB
hsb(67, 48%, 81%)
CMYK
cmyk(6%, 0%, 48%, 19%)
Oklch
oklch(82.4% 0.126 114.8)

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

#F0DF95

Goose Yellow · Khaki · Lemon Cream

HEX
#F0DF95
RGB
rgb(240, 223, 149)
HSL
hsl(49, 75%, 76%)
HSB
hsb(49, 38%, 94%)
CMYK
cmyk(0%, 7%, 38%, 6%)
Oklch
oklch(90.1% 0.095 96.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3F0D54
22540D

Analogous

1B0D54
3F0D54
540D46

Triadic

3F0D54
543F0D
0D543F

Split-Comp.

3F0D54
46540D
0D541B

Tetradic

3F0D54
541B0D
22540D
0D4654

Contrast Matrix WCAG 2.1 Contrast

3F0D54
D42F2F
E89D51
C3CF6B
F0DF95
—
3.0
AA Large
6.7
AA
8.9
AAA
11.2
AAA
3.0
AA Large
—
2.2
Fail
2.9
Fail
3.7
AA Large
6.7
AA
2.2
Fail
—
1.3
Fail
1.7
Fail
8.9
AAA
2.9
Fail
1.3
Fail
—
1.3
Fail
11.2
AAA
3.7
AA Large
1.7
Fail
1.3
Fail
—
White BG
15.0AAA
4.9AA
2.2Fail
1.7Fail
1.3Fail
Black BG
1.4Fail
4.2AA Large
9.4AAA
12.5AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

292943
8D8B2F
C8C763
C8C883
E9E8A7

Deuteranopia

2C303F
96A22F
CCD168
C8C789
EAEBAB

Tritanopia

3C3532
CC2F2F
E47275
C4969B
EFB5B8

Achromatopsia

242424
606060
ABABAB
C0C0C0
DCDCDC

Shades & Tints Shades & Tints

#3F0D54

Dark
Light

#D42F2F

Dark
Light

#E89D51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3f0d54;
  --color-2: #d42f2f;
  --color-3: #e89d51;
  --color-4: #c3cf6b;
  --color-5: #f0df95;
}

SCSS

$color-1: #3f0d54;
$color-2: #d42f2f;
$color-3: #e89d51;
$color-4: #c3cf6b;
$color-5: #f0df95;

TAILWIND

colors: {
  'brand-1': '#3f0d54',
  'brand-2': '#d42f2f',
  'brand-3': '#e89d51',
  'brand-4': '#c3cf6b',
  'brand-5': '#f0df95',
}

RGB Array

[63, 13, 84], [212, 47, 47], [232, 157, 81], [195, 207, 107], [240, 223, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3F0D54, #D42F2F, #E89D51, #C3CF6B, #F0DF95 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: #3f0d54; --color-2: #d42f2f; --color-3: #e89d51; --color-4: #c3cf6b; --color-5: #f0df95. 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