← Back to Editor

#1F3759 · #33211D · #171516 · #5B0007 · #971203

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 Library

Color Details Color Details

#1F3759

Indigo · DarkSlateGray · Prussian Blue

HEX
#1F3759
RGB
rgb(31, 55, 89)
HSL
hsl(215, 48%, 24%)
HSB
hsb(215, 65%, 35%)
CMYK
cmyk(65%, 38%, 0%, 65%)
Oklch
oklch(33.5% 0.067 257.3)

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

#33211D

Crimson · Black · Deep Berry

HEX
#33211D
RGB
rgb(51, 33, 29)
HSL
hsl(11, 28%, 16%)
HSB
hsb(11, 43%, 20%)
CMYK
cmyk(0%, 35%, 43%, 80%)
Oklch
oklch(26.9% 0.029 33.0)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#171516

Ink Black · Black · Jet Black

HEX
#171516
RGB
rgb(23, 21, 22)
HSL
hsl(330, 5%, 9%)
HSB
hsb(330, 9%, 9%)
CMYK
cmyk(0%, 9%, 4%, 91%)
Oklch
oklch(19.8% 0.004 345.6)

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

#5B0007

Vermilion · Maroon · Deep Berry

HEX
#5B0007
RGB
rgb(91, 0, 7)
HSL
hsl(355, 100%, 18%)
HSB
hsb(355, 100%, 36%)
CMYK
cmyk(0%, 100%, 92%, 64%)
Oklch
oklch(29.7% 0.120 25.7)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#971203

Vermilion · DarkRed · Wine Red

HEX
#971203
RGB
rgb(151, 18, 3)
HSL
hsl(6, 96%, 30%)
HSB
hsb(6, 98%, 59%)
CMYK
cmyk(0%, 88%, 98%, 41%)
Oklch
oklch(43.2% 0.167 30.7)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F3759
5B4220

Analogous

20565B
1F3759
25205B

Triadic

1F3759
5B2038
385B20

Split-Comp.

1F3759
5B2520
565B20

Tetradic

1F3759
5B2056
5B4220
205B25

Contrast Matrix WCAG 2.1 Contrast

1F3759
33211D
171516
5B0007
971203
—
1.3
Fail
1.5
Fail
1.2
Fail
1.4
Fail
1.3
Fail
—
1.2
Fail
1.1
Fail
1.7
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.1
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.7
Fail
1.4
Fail
1.7
Fail
2.1
Fail
1.7
Fail
—
White BG
12.0AAA
15.3AAA
18.2AAA
14.5AAA
8.7AAA
Black BG
1.7Fail
1.4Fail
1.2Fail
1.4Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292A51
2B2B1E
161616
343305
5D5C07

Deuteranopia

28264F
2C2E1E
161616
394005
656F07

Tritanopia

204A49
321F1F
171616
560404
90090A

Achromatopsia

343434
262626
161616
1C1C1C
383838

Shades & Tints Shades & Tints

#1F3759

Dark
Light

#33211D

Dark
Light

#171516

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f3759;
  --color-2: #33211d;
  --color-3: #171516;
  --color-4: #5b0007;
  --color-5: #971203;
}

SCSS

$color-1: #1f3759;
$color-2: #33211d;
$color-3: #171516;
$color-4: #5b0007;
$color-5: #971203;

TAILWIND

colors: {
  'brand-1': '#1f3759',
  'brand-2': '#33211d',
  'brand-3': '#171516',
  'brand-4': '#5b0007',
  'brand-5': '#971203',
}

RGB Array

[31, 55, 89], [51, 33, 29], [23, 21, 22], [91, 0, 7], [151, 18, 3]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F3759, #33211D, #171516, #5B0007, #971203 is ideal for: tech websites, dark mode UIs, game UIs. 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: #1f3759; --color-2: #33211d; --color-3: #171516; --color-4: #5b0007; --color-5: #971203. 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 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