← Back to Editor

#010101 · #FFFFFF · #556A99 · #3B3654 · #431539

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#010101

Ink Black · Black · Jet Black

HEX
#010101
RGB
rgb(1, 1, 1)
HSL
hsl(0, 0%, 0%)
HSB
hsb(0, 0%, 0%)
CMYK
cmyk(0%, 0%, 0%, 100%)
Oklch
oklch(6.7% 0.000 89.9)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#556A99

Indigo · SlateGray · Navy Blue

HEX
#556A99
RGB
rgb(85, 106, 153)
HSL
hsl(221, 29%, 47%)
HSB
hsb(221, 44%, 60%)
CMYK
cmyk(44%, 31%, 0%, 40%)
Oklch
oklch(52.7% 0.079 265.4)

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

#3B3654

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#3B3654
RGB
rgb(59, 54, 84)
HSL
hsl(250, 22%, 27%)
HSB
hsb(250, 36%, 33%)
CMYK
cmyk(30%, 36%, 0%, 67%)
Oklch
oklch(35.2% 0.052 291.1)

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

#431539

Rose Purple · DarkSlateGray · Dark Purple

HEX
#431539
RGB
rgb(67, 21, 57)
HSL
hsl(313, 52%, 17%)
HSB
hsb(313, 69%, 26%)
CMYK
cmyk(0%, 69%, 15%, 74%)
Oklch
oklch(28.4% 0.087 337.1)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

010101
000000

Analogous

000000
010101
000000

Triadic

010101
000000
000000

Split-Comp.

010101
000000
000000

Tetradic

010101
000000
000000
000000

Contrast Matrix WCAG 2.1 Contrast

010101
FFFFFF
556A99
3B3654
431539
—
20.9
AAA
3.9
AA Large
1.8
Fail
1.4
Fail
20.9
AAA
—
5.4
AA
11.4
AAA
14.9
AAA
3.9
AA Large
5.4
AA
—
2.1
Fail
2.8
Fail
1.8
Fail
11.4
AAA
2.1
Fail
—
1.3
Fail
1.4
Fail
14.9
AAA
2.8
Fail
1.3
Fail
—
White BG
20.9AAA
1.0Fail
5.4AA
11.4AAA
14.9AAA
Black BG
1.0Fail
21.0AAA
3.9AA Large
1.8Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

010101
FFFFFF
5E5E8E
39394D
2F2F30

Deuteranopia

010101
FFFFFF
5D5B8B
393A4B
32352E

Tritanopia

010101
FFFFFF
568583
3B4746
412928

Achromatopsia

010101
FFFFFF
696969
3B3B3B
272727

Shades & Tints Shades & Tints

#010101

Dark
Light

#FFFFFF

Dark
Light

#556A99

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #010101;
  --color-2: #ffffff;
  --color-3: #556a99;
  --color-4: #3b3654;
  --color-5: #431539;
}

SCSS

$color-1: #010101;
$color-2: #ffffff;
$color-3: #556a99;
$color-4: #3b3654;
$color-5: #431539;

TAILWIND

colors: {
  'brand-1': '#010101',
  'brand-2': '#ffffff',
  'brand-3': '#556a99',
  'brand-4': '#3b3654',
  'brand-5': '#431539',
}

RGB Array

[1, 1, 1], [255, 255, 255], [85, 106, 153], [59, 54, 84], [67, 21, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #010101, #FFFFFF, #556A99, #3B3654, #431539 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #010101; --color-2: #ffffff; --color-3: #556a99; --color-4: #3b3654; --color-5: #431539. 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 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