← Back to Editor

#310C2A · #5B074E · #971D8C · #FD22AB · #666694

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

#310C2A

Rose Purple · Black · Dark Purple

HEX
#310C2A
RGB
rgb(49, 12, 42)
HSL
hsl(311, 61%, 12%)
HSB
hsb(311, 76%, 19%)
CMYK
cmyk(0%, 76%, 14%, 81%)
Oklch
oklch(23.1% 0.074 335.9)

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

#5B074E

Rose Purple · Purple · Dark Purple

HEX
#5B074E
RGB
rgb(91, 7, 78)
HSL
hsl(309, 86%, 19%)
HSB
hsb(309, 92%, 36%)
CMYK
cmyk(0%, 92%, 14%, 64%)
Oklch
oklch(32.6% 0.136 336.1)

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

#971D8C

Rose Purple · DarkMagenta · Eggplant

HEX
#971D8C
RGB
rgb(151, 29, 140)
HSL
hsl(305, 68%, 35%)
HSB
hsb(305, 81%, 59%)
CMYK
cmyk(0%, 81%, 7%, 41%)
Oklch
oklch(48.0% 0.194 332.3)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#FD22AB

Rose Purple · DeepPink · Rose Pink

HEX
#FD22AB
RGB
rgb(253, 34, 171)
HSL
hsl(322, 98%, 56%)
HSB
hsb(322, 87%, 99%)
CMYK
cmyk(0%, 87%, 32%, 1%)
Oklch
oklch(66.5% 0.264 349.6)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#666694

Deep Indigo · SlateGray · Navy Blue

HEX
#666694
RGB
rgb(102, 102, 148)
HSL
hsl(240, 18%, 49%)
HSB
hsb(240, 31%, 58%)
CMYK
cmyk(31%, 31%, 0%, 42%)
Oklch
oklch(52.9% 0.072 283.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

310C2A
0C3113

Analogous

250C31
310C2A
310C18

Triadic

310C2A
2A310C
0C2A31

Split-Comp.

310C2A
18310C
0C3125

Tetradic

310C2A
31250C
0C3113
0C1831

Contrast Matrix WCAG 2.1 Contrast

310C2A
5B074E
971D8C
FD22AB
666694
—
1.3
Fail
2.4
Fail
4.9
AA
3.2
AA Large
1.3
Fail
—
1.8
Fail
3.8
AA Large
2.5
Fail
2.4
Fail
1.8
Fail
—
2.1
Fail
1.4
Fail
4.9
AA
3.8
AA Large
2.1
Fail
—
1.5
Fail
3.2
AA Large
2.5
Fail
1.4
Fail
1.5
Fail
—
White BG
17.3AAA
13.2AAA
7.3AAA
3.5AA Large
5.4AA
Black BG
1.2Fail
1.6Fail
2.9Fail
6.0AA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

212123
37363D
626171
9E9C8A
666689

Deuteranopia

232621
3C4239
69726B
ABBB82
666686

Tritanopia

2F1D1C
572F2C
915C57
F2706A
66807E

Achromatopsia

1A1A1A
282828
4E4E4E
737373
6B6B6B

Shades & Tints Shades & Tints

#310C2A

Dark
Light

#5B074E

Dark
Light

#971D8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #310c2a;
  --color-2: #5b074e;
  --color-3: #971d8c;
  --color-4: #fd22ab;
  --color-5: #666694;
}

SCSS

$color-1: #310c2a;
$color-2: #5b074e;
$color-3: #971d8c;
$color-4: #fd22ab;
$color-5: #666694;

TAILWIND

colors: {
  'brand-1': '#310c2a',
  'brand-2': '#5b074e',
  'brand-3': '#971d8c',
  'brand-4': '#fd22ab',
  'brand-5': '#666694',
}

RGB Array

[49, 12, 42], [91, 7, 78], [151, 29, 140], [253, 34, 171], [102, 102, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #310C2A, #5B074E, #971D8C, #FD22AB, #666694 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #310c2a; --color-2: #5b074e; --color-3: #971d8c; --color-4: #fd22ab; --color-5: #666694. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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