← Back to Editor

#101012 · #222028 · #322F3C · #3C3D58 · #50618B

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporate

Color Details Color Details

#101012

Ink Black · Black · Jet Black

HEX
#101012
RGB
rgb(16, 16, 18)
HSL
hsl(240, 6%, 7%)
HSB
hsb(240, 11%, 7%)
CMYK
cmyk(11%, 11%, 0%, 93%)
Oklch
oklch(17.4% 0.004 286.0)

Traditional「Ink Black」· Paint「Jet Black」· Creative Midnight Shadow

#222028

Deep Indigo · Black · Deep Sea Blue

HEX
#222028
RGB
rgb(34, 32, 40)
HSL
hsl(255, 11%, 14%)
HSB
hsb(255, 20%, 16%)
CMYK
cmyk(15%, 20%, 0%, 84%)
Oklch
oklch(24.9% 0.015 296.7)

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

#322F3C

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#322F3C
RGB
rgb(50, 47, 60)
HSL
hsl(254, 12%, 21%)
HSB
hsb(254, 22%, 24%)
CMYK
cmyk(17%, 22%, 0%, 76%)
Oklch
oklch(31.4% 0.023 295.6)

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

#3C3D58

Indigo · DarkSlateGray · Prussian Blue

HEX
#3C3D58
RGB
rgb(60, 61, 88)
HSL
hsl(238, 19%, 29%)
HSB
hsb(238, 32%, 35%)
CMYK
cmyk(32%, 31%, 0%, 65%)
Oklch
oklch(37.1% 0.046 282.3)

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

#50618B

Indigo · DarkSlateBlue · Navy Blue

HEX
#50618B
RGB
rgb(80, 97, 139)
HSL
hsl(223, 27%, 43%)
HSB
hsb(223, 42%, 55%)
CMYK
cmyk(42%, 30%, 0%, 45%)
Oklch
oklch(49.7% 0.071 266.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

101012
131311

Analogous

111213
101012
121113

Triadic

101012
131111
111311

Split-Comp.

101012
131211
121311

Tetradic

101012
131112
131311
111312

Contrast Matrix WCAG 2.1 Contrast

101012
222028
322F3C
3C3D58
50618B
—
1.2
Fail
1.5
Fail
1.8
Fail
3.1
AA Large
1.2
Fail
—
1.2
Fail
1.5
Fail
2.6
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
2.1
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.7
Fail
3.1
AA Large
2.6
Fail
2.1
Fail
1.7
Fail
—
White BG
19.0AAA
16.1AAA
13.1AAA
10.5AAA
6.1AA
Black BG
1.1Fail
1.3Fail
1.6Fail
2.0Fail
3.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

101012
212126
313139
3C3C51
575881

Deuteranopia

101011
212126
313138
3C3C50
56557E

Tritanopia

101111
222524
323636
3C4C4B
517977

Achromatopsia

101010
222222
313131
404040
616161

Shades & Tints Shades & Tints

#101012

Dark
Light

#222028

Dark
Light

#322F3C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #101012;
  --color-2: #222028;
  --color-3: #322f3c;
  --color-4: #3c3d58;
  --color-5: #50618b;
}

SCSS

$color-1: #101012;
$color-2: #222028;
$color-3: #322f3c;
$color-4: #3c3d58;
$color-5: #50618b;

TAILWIND

colors: {
  'brand-1': '#101012',
  'brand-2': '#222028',
  'brand-3': '#322f3c',
  'brand-4': '#3c3d58',
  'brand-5': '#50618b',
}

RGB Array

[16, 16, 18], [34, 32, 40], [50, 47, 60], [60, 61, 88], [80, 97, 139]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #101012, #222028, #322F3C, #3C3D58, #50618B is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs. 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: #101012; --color-2: #222028; --color-3: #322f3c; --color-4: #3c3d58; --color-5: #50618b. 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. 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 finance, legal, luxury 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