← Back to Editor

#212D61 · #3B4964 · #5B6C98 · #8D8B7E · #97A1AB

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#212D61

Indigo · MidnightBlue · Prussian Blue

HEX
#212D61
RGB
rgb(33, 45, 97)
HSL
hsl(229, 49%, 25%)
HSB
hsb(229, 66%, 38%)
CMYK
cmyk(66%, 54%, 0%, 62%)
Oklch
oklch(31.8% 0.093 270.5)

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

#3B4964

Indigo · DarkSlateGray · Prussian Blue

HEX
#3B4964
RGB
rgb(59, 73, 100)
HSL
hsl(220, 26%, 31%)
HSB
hsb(220, 41%, 39%)
CMYK
cmyk(41%, 27%, 0%, 61%)
Oklch
oklch(40.5% 0.049 263.1)

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

#5B6C98

Indigo · SlateGray · Navy Blue

HEX
#5B6C98
RGB
rgb(91, 108, 152)
HSL
hsl(223, 25%, 48%)
HSB
hsb(223, 40%, 60%)
CMYK
cmyk(40%, 29%, 0%, 40%)
Oklch
oklch(53.6% 0.072 267.7)

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

#8D8B7E

Ash · Gray · Warm Gray

HEX
#8D8B7E
RGB
rgb(141, 139, 126)
HSL
hsl(52, 6%, 52%)
HSB
hsb(52, 11%, 55%)
CMYK
cmyk(0%, 1%, 11%, 45%)
Oklch
oklch(63.5% 0.019 99.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#97A1AB

Azure · DarkGray · Cobalt Blue

HEX
#97A1AB
RGB
rgb(151, 161, 171)
HSL
hsl(210, 11%, 63%)
HSB
hsb(210, 12%, 67%)
CMYK
cmyk(12%, 6%, 0%, 33%)
Oklch
oklch(70.4% 0.019 248.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

212D61
5F5421

Analogous

214B5F
212D61
34215F

Triadic

212D61
5F212C
2C5F21

Split-Comp.

212D61
5F3421
4B5F21

Tetradic

212D61
5F214B
5F5421
215F34

Contrast Matrix WCAG 2.1 Contrast

212D61
3B4964
5B6C98
8D8B7E
97A1AB
—
1.4
Fail
2.5
Fail
3.8
AA Large
5.0
AA
1.4
Fail
—
1.7
Fail
2.6
Fail
3.4
AA Large
2.5
Fail
1.7
Fail
—
1.5
Fail
2.0
Fail
3.8
AA Large
2.6
Fail
1.5
Fail
—
1.3
Fail
5.0
AA
3.4
AA Large
2.0
Fail
1.3
Fail
—
White BG
13.0AAA
9.0AAA
5.2AA
3.4AA Large
2.6Fail
Black BG
1.6Fail
2.3Fail
4.0AA Large
6.1AA
8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262654
41415D
62638D
8C8C81
9B9BA9

Deuteranopia

262551
403F5C
61608B
8C8C82
9B9AA8

Tritanopia

224A48
3C5857
5C8583
8D8484
98A7A6

Achromatopsia

2F2F2F
484848
6C6C6C
8A8A8A
9F9F9F

Shades & Tints Shades & Tints

#212D61

Dark
Light

#3B4964

Dark
Light

#5B6C98

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #212d61;
  --color-2: #3b4964;
  --color-3: #5b6c98;
  --color-4: #8d8b7e;
  --color-5: #97a1ab;
}

SCSS

$color-1: #212d61;
$color-2: #3b4964;
$color-3: #5b6c98;
$color-4: #8d8b7e;
$color-5: #97a1ab;

TAILWIND

colors: {
  'brand-1': '#212d61',
  'brand-2': '#3b4964',
  'brand-3': '#5b6c98',
  'brand-4': '#8d8b7e',
  'brand-5': '#97a1ab',
}

RGB Array

[33, 45, 97], [59, 73, 100], [91, 108, 152], [141, 139, 126], [151, 161, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #212D61, #3B4964, #5B6C98, #8D8B7E, #97A1AB is ideal for: brand design, premium product pages, magazine layouts. 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: #212d61; --color-2: #3b4964; --color-3: #5b6c98; --color-4: #8d8b7e; --color-5: #97a1ab. 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. 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. 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