← Back to Editor

#569CA9 · #487586 · #3A4E65 · #2C2743 · #2A1930

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

#569CA9

Slate Blue · CadetBlue · Mint Ice

HEX
#569CA9
RGB
rgb(86, 156, 169)
HSL
hsl(189, 33%, 50%)
HSB
hsb(189, 49%, 66%)
CMYK
cmyk(49%, 8%, 0%, 34%)
Oklch
oklch(65.2% 0.073 210.9)

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

#487586

Slate Blue · SlateGray · Mint Ice

HEX
#487586
RGB
rgb(72, 117, 134)
HSL
hsl(196, 30%, 40%)
HSB
hsb(196, 46%, 53%)
CMYK
cmyk(46%, 13%, 0%, 47%)
Oklch
oklch(53.7% 0.056 224.1)

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

#3A4E65

Indigo · DarkSlateGray · Prussian Blue

HEX
#3A4E65
RGB
rgb(58, 78, 101)
HSL
hsl(212, 27%, 31%)
HSB
hsb(212, 43%, 40%)
CMYK
cmyk(43%, 23%, 0%, 60%)
Oklch
oklch(41.7% 0.046 252.4)

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

#2C2743

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#2C2743
RGB
rgb(44, 39, 67)
HSL
hsl(251, 26%, 21%)
HSB
hsb(251, 42%, 26%)
CMYK
cmyk(34%, 42%, 0%, 74%)
Oklch
oklch(29.2% 0.050 291.1)

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

#2A1930

Dark Plum · DarkSlateGray · Dark Purple

HEX
#2A1930
RGB
rgb(42, 25, 48)
HSL
hsl(284, 32%, 14%)
HSB
hsb(284, 48%, 19%)
CMYK
cmyk(13%, 48%, 0%, 81%)
Oklch
oklch(24.7% 0.048 316.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

569CA9
AA6255

Analogous

55AA8C
569CA9
5573AA

Triadic

569CA9
AA559D
9DAA55

Split-Comp.

569CA9
AA5573
AA8C55

Tetradic

569CA9
8C55AA
AA6255
73AA55

Contrast Matrix WCAG 2.1 Contrast

569CA9
487586
3A4E65
2C2743
2A1930
—
1.6
Fail
2.7
Fail
4.5
AA
5.3
AA
1.6
Fail
—
1.7
Fail
2.8
Fail
3.3
AA Large
2.7
Fail
1.7
Fail
—
1.7
Fail
1.9
Fail
4.5
AA
2.8
Fail
1.7
Fail
—
1.2
Fail
5.3
AA
3.3
AA Large
1.9
Fail
1.2
Fail
—
White BG
3.1AA Large
5.0AA
8.5AAA
14.2AAA
16.4AAA
Black BG
6.7AA
4.2AA Large
2.5Fail
1.5Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475A6
5B5C82
43435F
2A2A3C
23222A

Deuteranopia

706BA5
595681
42405E
2A2B3B
242529

Tritanopia

5AA3A3
4A7F7E
3B5B5A
2C3736
292625

Achromatopsia

898989
696969
4B4B4B
2C2C2C
212121

Shades & Tints Shades & Tints

#569CA9

Dark
Light

#487586

Dark
Light

#3A4E65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #569ca9;
  --color-2: #487586;
  --color-3: #3a4e65;
  --color-4: #2c2743;
  --color-5: #2a1930;
}

SCSS

$color-1: #569ca9;
$color-2: #487586;
$color-3: #3a4e65;
$color-4: #2c2743;
$color-5: #2a1930;

TAILWIND

colors: {
  'brand-1': '#569ca9',
  'brand-2': '#487586',
  'brand-3': '#3a4e65',
  'brand-4': '#2c2743',
  'brand-5': '#2a1930',
}

RGB Array

[86, 156, 169], [72, 117, 134], [58, 78, 101], [44, 39, 67], [42, 25, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #569CA9, #487586, #3A4E65, #2C2743, #2A1930 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: #569ca9; --color-2: #487586; --color-3: #3a4e65; --color-4: #2c2743; --color-5: #2a1930. 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