← Back to Editor

#00122A · #212E40 · #33414A · #849C7C · #ECE2BE

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 LibraryData Visualization

Color Details Color Details

#00122A

Indigo · Black · Deep Sea Blue

HEX
#00122A
RGB
rgb(0, 18, 42)
HSL
hsl(214, 100%, 8%)
HSB
hsb(214, 100%, 16%)
CMYK
cmyk(100%, 57%, 0%, 84%)
Oklch
oklch(18.2% 0.056 253.0)

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

#212E40

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#212E40
RGB
rgb(33, 46, 64)
HSL
hsl(215, 32%, 19%)
HSB
hsb(215, 48%, 25%)
CMYK
cmyk(48%, 28%, 0%, 75%)
Oklch
oklch(29.8% 0.037 256.6)

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

#33414A

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#33414A
RGB
rgb(51, 65, 74)
HSL
hsl(203, 18%, 25%)
HSB
hsb(203, 31%, 29%)
CMYK
cmyk(31%, 12%, 0%, 71%)
Oklch
oklch(36.7% 0.024 236.5)

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

#849C7C

Celadon · Gray · Olive Green

HEX
#849C7C
RGB
rgb(132, 156, 124)
HSL
hsl(105, 14%, 55%)
HSB
hsb(105, 21%, 61%)
CMYK
cmyk(15%, 0%, 21%, 39%)
Oklch
oklch(66.5% 0.054 137.9)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#ECE2BE

Goose Yellow · Wheat · Lemon Cream

HEX
#ECE2BE
RGB
rgb(236, 226, 190)
HSL
hsl(47, 55%, 84%)
HSB
hsb(47, 19%, 93%)
CMYK
cmyk(0%, 4%, 19%, 7%)
Oklch
oklch(91.2% 0.049 94.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

00122A
291700

Analogous

002629
00122A
030029

Triadic

00122A
290012
122900

Split-Comp.

00122A
290300
262900

Tetradic

00122A
290026
291700
002903

Contrast Matrix WCAG 2.1 Contrast

00122A
212E40
33414A
849C7C
ECE2BE
—
1.4
Fail
1.8
Fail
6.3
AA
14.5
AAA
1.4
Fail
—
1.3
Fail
4.6
AA
10.6
AAA
1.8
Fail
1.3
Fail
—
3.5
AA Large
8.1
AAA
6.3
AA
4.6
AA
3.5
AA Large
—
2.3
Fail
14.5
AAA
10.6
AAA
8.1
AAA
2.3
Fail
—
White BG
18.8AAA
13.7AAA
10.5AAA
3.0Fail
1.3Fail
Black BG
1.1Fail
1.5Fail
2.0Fail
7.0AAA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

080824
27273C
393948
8E8F84
E8E8C7

Deuteranopia

070523
26253B
383747
8D8B86
E8E9C9

Tritanopia

01201F
223837
344646
858A8B
ECCECF

Achromatopsia

0F0F0F
2C2C2C
3E3E3E
919191
E1E1E1

Shades & Tints Shades & Tints

#00122A

Dark
Light

#212E40

Dark
Light

#33414A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #00122a;
  --color-2: #212e40;
  --color-3: #33414a;
  --color-4: #849c7c;
  --color-5: #ece2be;
}

SCSS

$color-1: #00122a;
$color-2: #212e40;
$color-3: #33414a;
$color-4: #849c7c;
$color-5: #ece2be;

TAILWIND

colors: {
  'brand-1': '#00122a',
  'brand-2': '#212e40',
  'brand-3': '#33414a',
  'brand-4': '#849c7c',
  'brand-5': '#ece2be',
}

RGB Array

[0, 18, 42], [33, 46, 64], [51, 65, 74], [132, 156, 124], [236, 226, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #00122A, #212E40, #33414A, #849C7C, #ECE2BE 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: #00122a; --color-2: #212e40; --color-3: #33414a; --color-4: #849c7c; --color-5: #ece2be. 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