← Back to Editor

#120D1C · #30244C · #4C4A68 · #97D2B9 · #94B1AF

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

#120D1C

Deep Indigo · Black · Dark Purple

HEX
#120D1C
RGB
rgb(18, 13, 28)
HSL
hsl(260, 37%, 8%)
HSB
hsb(260, 54%, 11%)
CMYK
cmyk(36%, 54%, 0%, 89%)
Oklch
oklch(17.4% 0.031 298.5)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#30244C

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#30244C
RGB
rgb(48, 36, 76)
HSL
hsl(258, 36%, 22%)
HSB
hsb(258, 53%, 30%)
CMYK
cmyk(37%, 53%, 0%, 70%)
Oklch
oklch(29.6% 0.071 295.5)

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

#4C4A68

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#4C4A68
RGB
rgb(76, 74, 104)
HSL
hsl(244, 17%, 35%)
HSB
hsb(244, 29%, 41%)
CMYK
cmyk(27%, 29%, 0%, 59%)
Oklch
oklch(42.4% 0.049 287.1)

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

#97D2B9

Jade · Silver · Apple Green

HEX
#97D2B9
RGB
rgb(151, 210, 185)
HSL
hsl(155, 40%, 71%)
HSB
hsb(155, 28%, 82%)
CMYK
cmyk(28%, 0%, 12%, 18%)
Oklch
oklch(81.6% 0.070 166.6)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#94B1AF

Jade · DarkGray · Lake Green

HEX
#94B1AF
RGB
rgb(148, 177, 175)
HSL
hsl(176, 16%, 64%)
HSB
hsb(176, 16%, 69%)
CMYK
cmyk(16%, 0%, 1%, 31%)
Oklch
oklch(73.8% 0.032 191.4)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

120D1C
171C0D

Analogous

0D0F1C
120D1C
190D1C

Triadic

120D1C
1C120D
0D1C12

Split-Comp.

120D1C
1C190D
0F1C0D

Tetradic

120D1C
1C0D0F
171C0D
0D1C19

Contrast Matrix WCAG 2.1 Contrast

120D1C
30244C
4C4A68
97D2B9
94B1AF
—
1.3
Fail
2.3
Fail
11.1
AAA
8.3
AAA
1.3
Fail
—
1.7
Fail
8.3
AAA
6.2
AA
2.3
Fail
1.7
Fail
—
4.9
AA
3.7
AA Large
11.1
AAA
8.3
AAA
4.9
AA
—
1.3
Fail
8.3
AAA
6.2
AA
3.7
AA Large
1.3
Fail
—
White BG
19.1AAA
14.2AAA
8.4AAA
1.7Fail
2.3Fail
Black BG
1.1Fail
1.5Fail
2.5Fail
12.2AAA
9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

101018
2B2B42
4B4B61
B1B1BF
A1A1AF

Deuteranopia

101117
2C2C40
4B4B5F
ADA9C1
9F9DB0

Tritanopia

121615
2F3B39
4C5B5A
9AC4C5
95B0B0

Achromatopsia

101010
2C2C2C
4E4E4E
BEBEBE
A8A8A8

Shades & Tints Shades & Tints

#120D1C

Dark
Light

#30244C

Dark
Light

#4C4A68

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #120d1c;
  --color-2: #30244c;
  --color-3: #4c4a68;
  --color-4: #97d2b9;
  --color-5: #94b1af;
}

SCSS

$color-1: #120d1c;
$color-2: #30244c;
$color-3: #4c4a68;
$color-4: #97d2b9;
$color-5: #94b1af;

TAILWIND

colors: {
  'brand-1': '#120d1c',
  'brand-2': '#30244c',
  'brand-3': '#4c4a68',
  'brand-4': '#97d2b9',
  'brand-5': '#94b1af',
}

RGB Array

[18, 13, 28], [48, 36, 76], [76, 74, 104], [151, 210, 185], [148, 177, 175]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #120D1C, #30244C, #4C4A68, #97D2B9, #94B1AF is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #120d1c; --color-2: #30244c; --color-3: #4c4a68; --color-4: #97d2b9; --color-5: #94b1af. 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. 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