← Back to Editor

#504C63 · #3E2D3F · #210D28 · #91102E · #D8A46A

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#504C63

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#504C63
RGB
rgb(80, 76, 99)
HSL
hsl(250, 13%, 34%)
HSB
hsb(250, 23%, 39%)
CMYK
cmyk(19%, 23%, 0%, 61%)
Oklch
oklch(42.9% 0.038 292.7)

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

#3E2D3F

Dark Plum · DarkSlateGray · Eggplant

HEX
#3E2D3F
RGB
rgb(62, 45, 63)
HSL
hsl(297, 17%, 21%)
HSB
hsb(297, 29%, 25%)
CMYK
cmyk(2%, 29%, 0%, 75%)
Oklch
oklch(32.4% 0.039 324.6)

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

#210D28

Royal Purple · Black · Dark Purple

HEX
#210D28
RGB
rgb(33, 13, 40)
HSL
hsl(284, 51%, 10%)
HSB
hsb(284, 68%, 16%)
CMYK
cmyk(18%, 67%, 0%, 84%)
Oklch
oklch(20.4% 0.058 316.6)

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

#91102E

Vermilion · Brown · Wine Red

HEX
#91102E
RGB
rgb(145, 16, 46)
HSL
hsl(346, 80%, 32%)
HSB
hsb(346, 89%, 57%)
CMYK
cmyk(0%, 89%, 68%, 43%)
Oklch
oklch(42.4% 0.160 16.4)

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

#D8A46A

Ginger · DarkSalmon · Warm Sun

HEX
#D8A46A
RGB
rgb(216, 164, 106)
HSL
hsl(32, 59%, 63%)
HSB
hsb(32, 51%, 85%)
CMYK
cmyk(0%, 24%, 51%, 15%)
Oklch
oklch(75.5% 0.097 68.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

504C63
5E624B

Analogous

4B5362
504C63
5A4B62

Triadic

504C63
624F4B
4B624F

Split-Comp.

504C63
625A4B
53624B

Tetradic

504C63
624B53
5E624B
4B625A

Contrast Matrix WCAG 2.1 Contrast

504C63
3E2D3F
210D28
91102E
D8A46A
—
1.5
Fail
2.2
Fail
1.1
Fail
3.7
AA Large
1.5
Fail
—
1.4
Fail
1.4
Fail
5.7
AA
2.2
Fail
1.4
Fail
—
2.0
Fail
8.2
AAA
1.1
Fail
1.4
Fail
2.0
Fail
—
4.1
AA Large
3.7
AA Large
5.7
AA
8.2
AAA
4.1
AA Large
—
White BG
8.2AAA
12.7AAA
18.2AAA
9.1AAA
2.2Fail
Black BG
2.6Fail
1.7Fail
1.2Fail
2.3Fail
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E5D
37363B
181821
595827
C1C178

Deuteranopia

4F4F5C
38393A
1A1B20
616A25
C5C87B

Tritanopia

505958
3D3736
201C1B
8B2120
D58386

Achromatopsia

505050
343434
161616
3A3A3A
ADADAD

Shades & Tints Shades & Tints

#504C63

Dark
Light

#3E2D3F

Dark
Light

#210D28

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #504c63;
  --color-2: #3e2d3f;
  --color-3: #210d28;
  --color-4: #91102e;
  --color-5: #d8a46a;
}

SCSS

$color-1: #504c63;
$color-2: #3e2d3f;
$color-3: #210d28;
$color-4: #91102e;
$color-5: #d8a46a;

TAILWIND

colors: {
  'brand-1': '#504c63',
  'brand-2': '#3e2d3f',
  'brand-3': '#210d28',
  'brand-4': '#91102e',
  'brand-5': '#d8a46a',
}

RGB Array

[80, 76, 99], [62, 45, 63], [33, 13, 40], [145, 16, 46], [216, 164, 106]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #504C63, #3E2D3F, #210D28, #91102E, #D8A46A is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #504c63; --color-2: #3e2d3f; --color-3: #210d28; --color-4: #91102e; --color-5: #d8a46a. 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 tech, SaaS, healthcare, eco industries. 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