← Back to Editor

#5C787C · #50606D · #4E5162 · #44384E · #402B3E

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

#5C787C

Slate Blue · DimGray · Mint Ice

HEX
#5C787C
RGB
rgb(92, 120, 124)
HSL
hsl(188, 15%, 42%)
HSB
hsb(188, 26%, 49%)
CMYK
cmyk(26%, 3%, 0%, 51%)
Oklch
oklch(55.2% 0.033 207.1)

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

#50606D

Slate Blue · DimGray · Prussian Blue

HEX
#50606D
RGB
rgb(80, 96, 109)
HSL
hsl(207, 15%, 37%)
HSB
hsb(207, 27%, 43%)
CMYK
cmyk(27%, 12%, 0%, 57%)
Oklch
oklch(48.1% 0.029 242.8)

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

#4E5162

Indigo · DarkSlateGray · Prussian Blue

HEX
#4E5162
RGB
rgb(78, 81, 98)
HSL
hsl(231, 11%, 35%)
HSB
hsb(231, 20%, 38%)
CMYK
cmyk(20%, 17%, 0%, 62%)
Oklch
oklch(43.9% 0.028 277.3)

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

#44384E

Dark Plum · DarkSlateGray · Eggplant

HEX
#44384E
RGB
rgb(68, 56, 78)
HSL
hsl(273, 16%, 26%)
HSB
hsb(273, 28%, 31%)
CMYK
cmyk(13%, 28%, 0%, 69%)
Oklch
oklch(36.2% 0.040 309.2)

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

#402B3E

Rose Purple · DarkSlateGray · Eggplant

HEX
#402B3E
RGB
rgb(64, 43, 62)
HSL
hsl(306, 20%, 21%)
HSB
hsb(306, 33%, 25%)
CMYK
cmyk(0%, 33%, 3%, 75%)
Oklch
oklch(32.2% 0.044 329.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C787C
7B5F5B

Analogous

5B7B6F
5C787C
5B677B

Triadic

5C787C
7B5B77
777B5B

Split-Comp.

5C787C
7B5B67
7B6F5B

Tetradic

5C787C
6F5B7B
7B5F5B
677B5B

Contrast Matrix WCAG 2.1 Contrast

5C787C
50606D
4E5162
44384E
402B3E
—
1.4
Fail
1.7
Fail
2.3
Fail
2.7
Fail
1.4
Fail
—
1.2
Fail
1.7
Fail
2.0
Fail
1.7
Fail
1.2
Fail
—
1.4
Fail
1.6
Fail
2.3
Fail
1.7
Fail
1.4
Fail
—
1.2
Fail
2.7
Fail
2.0
Fail
1.6
Fail
1.2
Fail
—
White BG
4.7AA
6.5AA
7.8AAA
10.9AAA
12.9AAA
Black BG
4.4AA Large
3.2AA Large
2.7Fail
1.9Fail
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

68687B
57576A
4F4F5E
3F3F49
373739

Deuteranopia

67647B
565569
4F4F5D
404047
383A38

Tritanopia

5D7A7A
516767
4E5B5A
434444
3F3635

Achromatopsia

707070
5D5D5D
525252
3E3E3E
333333

Shades & Tints Shades & Tints

#5C787C

Dark
Light

#50606D

Dark
Light

#4E5162

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c787c;
  --color-2: #50606d;
  --color-3: #4e5162;
  --color-4: #44384e;
  --color-5: #402b3e;
}

SCSS

$color-1: #5c787c;
$color-2: #50606d;
$color-3: #4e5162;
$color-4: #44384e;
$color-5: #402b3e;

TAILWIND

colors: {
  'brand-1': '#5c787c',
  'brand-2': '#50606d',
  'brand-3': '#4e5162',
  'brand-4': '#44384e',
  'brand-5': '#402b3e',
}

RGB Array

[92, 120, 124], [80, 96, 109], [78, 81, 98], [68, 56, 78], [64, 43, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C787C, #50606D, #4E5162, #44384E, #402B3E 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: #5c787c; --color-2: #50606d; --color-3: #4e5162; --color-4: #44384e; --color-5: #402b3e. 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