← Back to Editor

#03001D · #0A1F34 · #1F4D5D · #4D8789 · #D9D8D4

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

#03001D

Deep Indigo · Black · Deep Sea Blue

HEX
#03001D
RGB
rgb(3, 0, 29)
HSL
hsl(246, 100%, 6%)
HSB
hsb(246, 100%, 11%)
CMYK
cmyk(90%, 100%, 0%, 89%)
Oklch
oklch(11.1% 0.069 277.5)

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

#0A1F34

Indigo · Black · Deep Sea Blue

HEX
#0A1F34
RGB
rgb(10, 31, 52)
HSL
hsl(210, 68%, 12%)
HSB
hsb(210, 81%, 20%)
CMYK
cmyk(81%, 40%, 0%, 80%)
Oklch
oklch(23.4% 0.049 250.7)

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

#1F4D5D

Slate Blue · DarkSlateGray · Peacock Green

HEX
#1F4D5D
RGB
rgb(31, 77, 93)
HSL
hsl(195, 50%, 24%)
HSB
hsb(195, 67%, 36%)
CMYK
cmyk(67%, 17%, 0%, 64%)
Oklch
oklch(39.6% 0.057 223.9)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#4D8789

Slate Blue · SlateGray · Mint Ice

HEX
#4D8789
RGB
rgb(77, 135, 137)
HSL
hsl(182, 28%, 42%)
HSB
hsb(182, 44%, 54%)
CMYK
cmyk(44%, 1%, 0%, 46%)
Oklch
oklch(58.5% 0.061 198.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#D9D8D4

Silver Gray · LightGray · Pearl Gray

HEX
#D9D8D4
RGB
rgb(217, 216, 212)
HSL
hsl(48, 6%, 84%)
HSB
hsb(48, 2%, 85%)
CMYK
cmyk(0%, 0%, 2%, 15%)
Oklch
oklch(88.2% 0.006 95.1)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

03001D
1C1F00

Analogous

000C1F
03001D
12001F

Triadic

03001D
1F0300
001F03

Split-Comp.

03001D
1F1200
0C1F00

Tetradic

03001D
1F000C
1C1F00
001F12

Contrast Matrix WCAG 2.1 Contrast

03001D
0A1F34
1F4D5D
4D8789
D9D8D4
—
1.2
Fail
2.2
Fail
5.0
AA
14.4
AAA
1.2
Fail
—
1.8
Fail
4.1
AA Large
11.7
AAA
2.2
Fail
1.8
Fail
—
2.3
Fail
6.5
AA
5.0
AA
4.1
AA Large
2.3
Fail
—
2.9
Fail
14.4
AAA
11.7
AAA
6.5
AA
2.9
Fail
—
White BG
20.6AAA
16.7AAA
9.2AAA
4.1AA Large
1.4Fail
Black BG
1.0Fail
1.3Fail
2.3Fail
5.1AA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

020216
13132F
333359
666789
D9D9D5

Deuteranopia

020214
12102E
302D58
635E88
D9D9D5

Tritanopia

03100F
0B2B2A
215655
508888
D9D6D6

Achromatopsia

040404
1B1B1B
414141
767676
D8D8D8

Shades & Tints Shades & Tints

#03001D

Dark
Light

#0A1F34

Dark
Light

#1F4D5D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #03001d;
  --color-2: #0a1f34;
  --color-3: #1f4d5d;
  --color-4: #4d8789;
  --color-5: #d9d8d4;
}

SCSS

$color-1: #03001d;
$color-2: #0a1f34;
$color-3: #1f4d5d;
$color-4: #4d8789;
$color-5: #d9d8d4;

TAILWIND

colors: {
  'brand-1': '#03001d',
  'brand-2': '#0a1f34',
  'brand-3': '#1f4d5d',
  'brand-4': '#4d8789',
  'brand-5': '#d9d8d4',
}

RGB Array

[3, 0, 29], [10, 31, 52], [31, 77, 93], [77, 135, 137], [217, 216, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #03001D, #0A1F34, #1F4D5D, #4D8789, #D9D8D4 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: #03001d; --color-2: #0a1f34; --color-3: #1f4d5d; --color-4: #4d8789; --color-5: #d9d8d4. 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