← Back to Editor

#2C4362 · #32517D · #5681AC · #7692B9 · #D7DEE8

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

#2C4362

Indigo · DarkSlateGray · Prussian Blue

HEX
#2C4362
RGB
rgb(44, 67, 98)
HSL
hsl(214, 38%, 28%)
HSB
hsb(214, 55%, 38%)
CMYK
cmyk(55%, 32%, 0%, 62%)
Oklch
oklch(37.9% 0.061 256.1)

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

#32517D

Indigo · DarkSlateBlue · Prussian Blue

HEX
#32517D
RGB
rgb(50, 81, 125)
HSL
hsl(215, 43%, 34%)
HSB
hsb(215, 60%, 49%)
CMYK
cmyk(60%, 35%, 0%, 51%)
Oklch
oklch(43.2% 0.082 257.3)

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

#5681AC

Azure · SteelBlue · Navy Blue

HEX
#5681AC
RGB
rgb(86, 129, 172)
HSL
hsl(210, 34%, 51%)
HSB
hsb(210, 50%, 67%)
CMYK
cmyk(50%, 25%, 0%, 33%)
Oklch
oklch(59.0% 0.082 249.4)

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

#7692B9

Azure · LightSlateGray · Navy Blue

HEX
#7692B9
RGB
rgb(118, 146, 185)
HSL
hsl(215, 32%, 59%)
HSB
hsb(215, 36%, 73%)
CMYK
cmyk(36%, 21%, 0%, 27%)
Oklch
oklch(65.3% 0.067 256.7)

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

#D7DEE8

Azure · LightGray · Sky Blue

HEX
#D7DEE8
RGB
rgb(215, 222, 232)
HSL
hsl(215, 27%, 88%)
HSB
hsb(215, 7%, 91%)
CMYK
cmyk(7%, 4%, 0%, 9%)
Oklch
oklch(89.8% 0.016 257.2)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2C4362
634B2C

Analogous

2C5F63
2C4362
302C63

Triadic

2C4362
632C44
44632C

Split-Comp.

2C4362
63302C
5F632C

Tetradic

2C4362
632C5F
634B2C
2C6330

Contrast Matrix WCAG 2.1 Contrast

2C4362
32517D
5681AC
7692B9
D7DEE8
—
1.3
Fail
2.5
Fail
3.2
AA Large
7.4
AAA
1.3
Fail
—
2.0
Fail
2.5
Fail
5.9
AA
2.5
Fail
2.0
Fail
—
1.3
Fail
3.0
AA Large
3.2
AA Large
2.5
Fail
1.3
Fail
—
2.4
Fail
7.4
AAA
5.9
AA
3.0
AA Large
2.4
Fail
—
White BG
10.1AAA
8.0AAA
4.1AA Large
3.2AA Large
1.4Fail
Black BG
2.1Fail
2.6Fail
5.1AA
6.6AA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

36365A
3F4072
6969A2
8282B0
DADAE6

Deuteranopia

353359
3E3B70
66639F
817EAD
DAD9E5

Tritanopia

2D5553
346A68
589998
77A8A6
D7E4E3

Achromatopsia

404040
4D4D4D
797979
8E8E8E
DDDDDD

Shades & Tints Shades & Tints

#2C4362

Dark
Light

#32517D

Dark
Light

#5681AC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2c4362;
  --color-2: #32517d;
  --color-3: #5681ac;
  --color-4: #7692b9;
  --color-5: #d7dee8;
}

SCSS

$color-1: #2c4362;
$color-2: #32517d;
$color-3: #5681ac;
$color-4: #7692b9;
$color-5: #d7dee8;

TAILWIND

colors: {
  'brand-1': '#2c4362',
  'brand-2': '#32517d',
  'brand-3': '#5681ac',
  'brand-4': '#7692b9',
  'brand-5': '#d7dee8',
}

RGB Array

[44, 67, 98], [50, 81, 125], [86, 129, 172], [118, 146, 185], [215, 222, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2C4362, #32517D, #5681AC, #7692B9, #D7DEE8 is ideal for: 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: #2c4362; --color-2: #32517d; --color-3: #5681ac; --color-4: #7692b9; --color-5: #d7dee8. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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