← Back to Editor

#64798C · #495880 · #4D4B78 · #583475 · #020A1C

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#64798C

Slate Blue · SlateGray · Navy Blue

HEX
#64798C
RGB
rgb(100, 121, 140)
HSL
hsl(209, 17%, 47%)
HSB
hsb(209, 29%, 55%)
CMYK
cmyk(29%, 14%, 0%, 45%)
Oklch
oklch(56.6% 0.038 245.9)

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

#495880

Indigo · DarkSlateBlue · Prussian Blue

HEX
#495880
RGB
rgb(73, 88, 128)
HSL
hsl(224, 27%, 39%)
HSB
hsb(224, 43%, 50%)
CMYK
cmyk(43%, 31%, 0%, 50%)
Oklch
oklch(46.5% 0.068 268.0)

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

#4D4B78

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4D4B78
RGB
rgb(77, 75, 120)
HSL
hsl(243, 23%, 38%)
HSB
hsb(243, 37%, 47%)
CMYK
cmyk(36%, 37%, 0%, 53%)
Oklch
oklch(43.5% 0.073 284.9)

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

#583475

Dark Plum · DarkSlateBlue · Eggplant

HEX
#583475
RGB
rgb(88, 52, 117)
HSL
hsl(273, 38%, 33%)
HSB
hsb(273, 56%, 46%)
CMYK
cmyk(25%, 56%, 0%, 54%)
Oklch
oklch(40.0% 0.111 307.7)

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

#020A1C

Indigo · Black · Deep Sea Blue

HEX
#020A1C
RGB
rgb(2, 10, 28)
HSL
hsl(222, 87%, 6%)
HSB
hsb(222, 93%, 11%)
CMYK
cmyk(93%, 64%, 0%, 89%)
Oklch
oklch(14.7% 0.042 258.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

64798C
8C7763

Analogous

638C8C
64798C
63648C

Triadic

64798C
8C6379
798C63

Split-Comp.

64798C
8C6364
8C8C63

Tetradic

64798C
8C638C
8C7763
648C63

Contrast Matrix WCAG 2.1 Contrast

64798C
495880
4D4B78
583475
020A1C
—
1.6
Fail
1.8
Fail
2.2
Fail
4.4
AA Large
1.6
Fail
—
1.2
Fail
1.4
Fail
2.8
Fail
1.8
Fail
1.2
Fail
—
1.2
Fail
2.4
Fail
2.2
Fail
1.4
Fail
1.2
Fail
—
2.0
Fail
4.4
AA Large
2.8
Fail
2.4
Fail
2.0
Fail
—
White BG
4.5AA
7.0AAA
8.1AAA
9.7AAA
19.8AAA
Black BG
4.7AA
3.0Fail
2.6Fail
2.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6D6D87
4F5076
4C4C6D
484865
050618

Deuteranopia

6C6A86
4F4E74
4C4C6B
4B4D61
050417

Tritanopia

658483
4A6F6D
4D6563
565956
021413

Achromatopsia

757575
585858
515151
464646
0A0A0A

Shades & Tints Shades & Tints

#64798C

Dark
Light

#495880

Dark
Light

#4D4B78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #64798c;
  --color-2: #495880;
  --color-3: #4d4b78;
  --color-4: #583475;
  --color-5: #020a1c;
}

SCSS

$color-1: #64798c;
$color-2: #495880;
$color-3: #4d4b78;
$color-4: #583475;
$color-5: #020a1c;

TAILWIND

colors: {
  'brand-1': '#64798c',
  'brand-2': '#495880',
  'brand-3': '#4d4b78',
  'brand-4': '#583475',
  'brand-5': '#020a1c',
}

RGB Array

[100, 121, 140], [73, 88, 128], [77, 75, 120], [88, 52, 117], [2, 10, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #64798C, #495880, #4D4B78, #583475, #020A1C 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: #64798c; --color-2: #495880; --color-3: #4d4b78; --color-4: #583475; --color-5: #020a1c. 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