← Back to Editor

#5C9AAE · #57799A · #4D5B81 · #423C61 · #201C2A

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#5C9AAE

Slate Blue · CadetBlue · Lake Green

HEX
#5C9AAE
RGB
rgb(92, 154, 174)
HSL
hsl(195, 34%, 52%)
HSB
hsb(195, 47%, 68%)
CMYK
cmyk(47%, 11%, 0%, 32%)
Oklch
oklch(65.2% 0.071 220.7)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#57799A

Indigo · SlateGray · Navy Blue

HEX
#57799A
RGB
rgb(87, 121, 154)
HSL
hsl(210, 28%, 47%)
HSB
hsb(210, 44%, 60%)
CMYK
cmyk(44%, 21%, 0%, 40%)
Oklch
oklch(56.4% 0.064 248.3)

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

#4D5B81

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4D5B81
RGB
rgb(77, 91, 129)
HSL
hsl(224, 25%, 40%)
HSB
hsb(224, 40%, 51%)
CMYK
cmyk(40%, 29%, 0%, 49%)
Oklch
oklch(47.6% 0.064 268.4)

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

#423C61

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#423C61
RGB
rgb(66, 60, 97)
HSL
hsl(250, 24%, 31%)
HSB
hsb(250, 38%, 38%)
CMYK
cmyk(32%, 38%, 0%, 62%)
Oklch
oklch(37.9% 0.062 290.5)

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

#201C2A

Deep Indigo · Black · Deep Sea Blue

HEX
#201C2A
RGB
rgb(32, 28, 42)
HSL
hsl(257, 20%, 14%)
HSB
hsb(257, 33%, 16%)
CMYK
cmyk(24%, 33%, 0%, 84%)
Oklch
oklch(23.8% 0.027 297.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C9AAE
AE705B

Analogous

5BAE99
5C9AAE
5B70AE

Triadic

5C9AAE
AE5B99
99AE5B

Split-Comp.

5C9AAE
AE5B70
AE995B

Tetradic

5C9AAE
995BAE
AE705B
70AE5B

Contrast Matrix WCAG 2.1 Contrast

5C9AAE
57799A
4D5B81
423C61
201C2A
—
1.5
Fail
2.1
Fail
3.3
AA Large
5.3
AA
1.5
Fail
—
1.5
Fail
2.2
Fail
3.7
AA Large
2.1
Fail
1.5
Fail
—
1.5
Fail
2.5
Fail
3.3
AA Large
2.2
Fail
1.5
Fail
—
1.6
Fail
5.3
AA
3.7
AA Large
2.5
Fail
1.6
Fail
—
White BG
3.1AA Large
4.6AA
6.7AA
10.2AAA
16.7AAA
Black BG
6.7AA
4.6AA
3.1AA Large
2.1Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7777A9
666692
535378
3F3F58
1E1E27

Deuteranopia

736FA8
646190
525176
404056
1F1F26

Tritanopia

5FA5A5
598C8A
4E716F
42514F
202423

Achromatopsia

8A8A8A
737373
5B5B5B
424242
1F1F1F

Shades & Tints Shades & Tints

#5C9AAE

Dark
Light

#57799A

Dark
Light

#4D5B81

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c9aae;
  --color-2: #57799a;
  --color-3: #4d5b81;
  --color-4: #423c61;
  --color-5: #201c2a;
}

SCSS

$color-1: #5c9aae;
$color-2: #57799a;
$color-3: #4d5b81;
$color-4: #423c61;
$color-5: #201c2a;

TAILWIND

colors: {
  'brand-1': '#5c9aae',
  'brand-2': '#57799a',
  'brand-3': '#4d5b81',
  'brand-4': '#423c61',
  'brand-5': '#201c2a',
}

RGB Array

[92, 154, 174], [87, 121, 154], [77, 91, 129], [66, 60, 97], [32, 28, 42]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C9AAE, #57799A, #4D5B81, #423C61, #201C2A 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: #5c9aae; --color-2: #57799a; --color-3: #4d5b81; --color-4: #423c61; --color-5: #201c2a. 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