← Back to Editor

#5F7F84 · #475770 · #473B50 · #41293D · #391928

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#5F7F84

Slate Blue · SlateGray · Mint Ice

HEX
#5F7F84
RGB
rgb(95, 127, 132)
HSL
hsl(188, 16%, 45%)
HSB
hsb(188, 28%, 52%)
CMYK
cmyk(28%, 4%, 0%, 48%)
Oklch
oklch(57.4% 0.037 208.1)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#475770

Indigo · DarkSlateBlue · Prussian Blue

HEX
#475770
RGB
rgb(71, 87, 112)
HSL
hsl(217, 22%, 36%)
HSB
hsb(217, 37%, 44%)
CMYK
cmyk(37%, 22%, 0%, 56%)
Oklch
oklch(45.4% 0.046 259.2)

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

#473B50

Dark Plum · DarkSlateGray · Eggplant

HEX
#473B50
RGB
rgb(71, 59, 80)
HSL
hsl(274, 15%, 27%)
HSB
hsb(274, 26%, 31%)
CMYK
cmyk(11%, 26%, 0%, 69%)
Oklch
oklch(37.3% 0.038 310.4)

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

#41293D

Rose Purple · DarkSlateGray · Eggplant

HEX
#41293D
RGB
rgb(65, 41, 61)
HSL
hsl(310, 23%, 21%)
HSB
hsb(310, 37%, 25%)
CMYK
cmyk(0%, 37%, 6%, 75%)
Oklch
oklch(31.8% 0.048 332.7)

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

#391928

Dark Violet · DarkSlateGray · Raspberry

HEX
#391928
RGB
rgb(57, 25, 40)
HSL
hsl(332, 39%, 16%)
HSB
hsb(332, 56%, 22%)
CMYK
cmyk(0%, 56%, 30%, 78%)
Oklch
oklch(26.5% 0.055 352.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F7F84
856560

Analogous

608578
5F7F84
606E85

Triadic

5F7F84
856080
808560

Split-Comp.

5F7F84
85606E
857860

Tetradic

5F7F84
786085
856560
6E8560

Contrast Matrix WCAG 2.1 Contrast

5F7F84
475770
473B50
41293D
391928
—
1.7
Fail
2.4
Fail
3.0
AA Large
3.6
AA Large
1.7
Fail
—
1.4
Fail
1.8
Fail
2.1
Fail
2.4
Fail
1.4
Fail
—
1.2
Fail
1.5
Fail
3.0
AA Large
1.8
Fail
1.2
Fail
—
1.2
Fail
3.6
AA Large
2.1
Fail
1.5
Fail
1.2
Fail
—
White BG
4.3AA Large
7.3AAA
10.5AAA
13.0AAA
15.6AAA
Black BG
4.9AA
2.9Fail
2.0Fail
1.6Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D83
4E4E6A
42424B
373638
2B2B24

Deuteranopia

6B6983
4D4C68
43434A
383A37
2D2F24

Tritanopia

618282
486564
464746
403434
372221

Achromatopsia

767676
555555
414141
323232
242424

Shades & Tints Shades & Tints

#5F7F84

Dark
Light

#475770

Dark
Light

#473B50

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f7f84;
  --color-2: #475770;
  --color-3: #473b50;
  --color-4: #41293d;
  --color-5: #391928;
}

SCSS

$color-1: #5f7f84;
$color-2: #475770;
$color-3: #473b50;
$color-4: #41293d;
$color-5: #391928;

TAILWIND

colors: {
  'brand-1': '#5f7f84',
  'brand-2': '#475770',
  'brand-3': '#473b50',
  'brand-4': '#41293d',
  'brand-5': '#391928',
}

RGB Array

[95, 127, 132], [71, 87, 112], [71, 59, 80], [65, 41, 61], [57, 25, 40]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F7F84, #475770, #473B50, #41293D, #391928 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5f7f84; --color-2: #475770; --color-3: #473b50; --color-4: #41293d; --color-5: #391928. 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. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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