← Back to Editor

#31316D · #E73174 · #DF7F9D · #DCE3CB · #FBA619

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

#31316D

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#31316D
RGB
rgb(49, 49, 109)
HSL
hsl(240, 38%, 31%)
HSB
hsb(240, 55%, 43%)
CMYK
cmyk(55%, 55%, 0%, 57%)
Oklch
oklch(34.8% 0.102 279.7)

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

#E73174

Dark Violet · MediumVioletRed · Rose Pink

HEX
#E73174
RGB
rgb(231, 49, 116)
HSL
hsl(338, 79%, 55%)
HSB
hsb(338, 79%, 91%)
CMYK
cmyk(0%, 79%, 50%, 9%)
Oklch
oklch(61.8% 0.219 4.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#DF7F9D

Rouge · LightCoral · Rose Pink

HEX
#DF7F9D
RGB
rgb(223, 127, 157)
HSL
hsl(341, 60%, 69%)
HSB
hsb(341, 43%, 87%)
CMYK
cmyk(0%, 43%, 30%, 13%)
Oklch
oklch(70.9% 0.123 0.7)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#DCE3CB

Willow Green · LightGray · Mint Green

HEX
#DCE3CB
RGB
rgb(220, 227, 203)
HSL
hsl(77, 30%, 84%)
HSB
hsb(77, 11%, 89%)
CMYK
cmyk(3%, 0%, 11%, 11%)
Oklch
oklch(90.4% 0.033 120.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#FBA619

Ginger · Orange · Warm Sun

HEX
#FBA619
RGB
rgb(251, 166, 25)
HSL
hsl(37, 97%, 54%)
HSB
hsb(37, 90%, 98%)
CMYK
cmyk(0%, 34%, 90%, 2%)
Oklch
oklch(79.0% 0.165 71.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

31316D
6D6D31

Analogous

314F6D
31316D
4F316D

Triadic

31316D
6D3131
316D31

Split-Comp.

31316D
6D4F31
4F6D31

Tetradic

31316D
6D314F
6D6D31
316D4F

Contrast Matrix WCAG 2.1 Contrast

31316D
E73174
DF7F9D
DCE3CB
FBA619
—
2.8
Fail
4.3
AA Large
8.9
AAA
5.9
AA
2.8
Fail
—
1.5
Fail
3.1
AA Large
2.1
Fail
4.3
AA Large
1.5
Fail
—
2.1
Fail
1.4
Fail
8.9
AAA
3.1
AA Large
2.1
Fail
—
1.5
Fail
5.9
AA
2.1
Fail
1.4
Fail
1.5
Fail
—
White BG
11.7AAA
4.1AA Large
2.7Fail
1.3Fail
2.0Fail
Black BG
1.8Fail
5.1AA
7.7AAA
15.9AAA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31315E
989764
B5B596
DFDFD1
D6D53B

Deuteranopia

31315B
A3B060
BBC294
DFDED2
DBE243

Tritanopia

315351
DE5754
DA908F
DCD5D6
F7565C

Achromatopsia

383838
6F6F6F
9F9F9F
DEDEDE
AFAFAF

Shades & Tints Shades & Tints

#31316D

Dark
Light

#E73174

Dark
Light

#DF7F9D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #31316d;
  --color-2: #e73174;
  --color-3: #df7f9d;
  --color-4: #dce3cb;
  --color-5: #fba619;
}

SCSS

$color-1: #31316d;
$color-2: #e73174;
$color-3: #df7f9d;
$color-4: #dce3cb;
$color-5: #fba619;

TAILWIND

colors: {
  'brand-1': '#31316d',
  'brand-2': '#e73174',
  'brand-3': '#df7f9d',
  'brand-4': '#dce3cb',
  'brand-5': '#fba619',
}

RGB Array

[49, 49, 109], [231, 49, 116], [223, 127, 157], [220, 227, 203], [251, 166, 25]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #31316D, #E73174, #DF7F9D, #DCE3CB, #FBA619 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: #31316d; --color-2: #e73174; --color-3: #df7f9d; --color-4: #dce3cb; --color-5: #fba619. 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