← Back to Editor

#212838 · #2D3750 · #505C72 · #70A19D · #B9F3E7

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

#212838

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#212838
RGB
rgb(33, 40, 56)
HSL
hsl(222, 26%, 17%)
HSB
hsb(222, 41%, 22%)
CMYK
cmyk(41%, 29%, 0%, 78%)
Oklch
oklch(27.8% 0.031 266.1)

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

#2D3750

Indigo · DarkSlateGray · Prussian Blue

HEX
#2D3750
RGB
rgb(45, 55, 80)
HSL
hsl(223, 28%, 25%)
HSB
hsb(223, 44%, 31%)
CMYK
cmyk(44%, 31%, 0%, 69%)
Oklch
oklch(33.9% 0.046 267.2)

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

#505C72

Indigo · DimGray · Prussian Blue

HEX
#505C72
RGB
rgb(80, 92, 114)
HSL
hsl(219, 18%, 38%)
HSB
hsb(219, 30%, 45%)
CMYK
cmyk(30%, 19%, 0%, 55%)
Oklch
oklch(47.3% 0.039 262.5)

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

#70A19D

Mineral Blue · CadetBlue · Lake Green

HEX
#70A19D
RGB
rgb(112, 161, 157)
HSL
hsl(175, 21%, 54%)
HSB
hsb(175, 30%, 63%)
CMYK
cmyk(30%, 0%, 2%, 37%)
Oklch
oklch(67.3% 0.053 189.6)

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

#B9F3E7

Jade · LightBlue · Glacier Blue

HEX
#B9F3E7
RGB
rgb(185, 243, 231)
HSL
hsl(168, 71%, 84%)
HSB
hsb(168, 24%, 95%)
CMYK
cmyk(24%, 0%, 5%, 5%)
Oklch
oklch(92.1% 0.061 180.8)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

212838
373020

Analogous

203237
212838
252037

Triadic

212838
372027
273720

Split-Comp.

212838
372520
323720

Tetradic

212838
372032
373020
203725

Contrast Matrix WCAG 2.1 Contrast

212838
2D3750
505C72
70A19D
B9F3E7
—
1.2
Fail
2.2
Fail
5.1
AA
12.0
AAA
1.2
Fail
—
1.8
Fail
4.1
AA Large
9.6
AAA
2.2
Fail
1.8
Fail
—
2.3
Fail
5.5
AA
5.1
AA
4.1
AA Large
2.3
Fail
—
2.3
Fail
12.0
AAA
9.6
AAA
5.5
AA
2.3
Fail
—
White BG
14.7AAA
11.8AAA
6.7AA
2.9Fail
1.2Fail
Black BG
1.4Fail
1.8Fail
3.1AA Large
7.3AAA
17.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

242434
31314A
55556D
85869E
D2D3EA

Deuteranopia

242333
313049
55546B
827F9E
CFCAEB

Tritanopia

213130
2E4544
516868
729F9F
BCECED

Achromatopsia

282828
373737
5B5B5B
929292
E0E0E0

Shades & Tints Shades & Tints

#212838

Dark
Light

#2D3750

Dark
Light

#505C72

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #212838;
  --color-2: #2d3750;
  --color-3: #505c72;
  --color-4: #70a19d;
  --color-5: #b9f3e7;
}

SCSS

$color-1: #212838;
$color-2: #2d3750;
$color-3: #505c72;
$color-4: #70a19d;
$color-5: #b9f3e7;

TAILWIND

colors: {
  'brand-1': '#212838',
  'brand-2': '#2d3750',
  'brand-3': '#505c72',
  'brand-4': '#70a19d',
  'brand-5': '#b9f3e7',
}

RGB Array

[33, 40, 56], [45, 55, 80], [80, 92, 114], [112, 161, 157], [185, 243, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #212838, #2D3750, #505C72, #70A19D, #B9F3E7 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: #212838; --color-2: #2d3750; --color-3: #505c72; --color-4: #70a19d; --color-5: #b9f3e7. 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