#03070D + #0A111C + #1B2433 + #353F4F + #4E5666 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#03070D

Indigo · Black · Deep Sea Blue

HEX

#03070D

RGB

rgb(3, 7, 13)

HSL

hsl(216, 63%, 3%)

HSB

hsb(216, 77%, 5%)

CMYK

cmyk(77%, 46%, 0%, 95%)

Oklch

oklch(12.6% 0.018 250.0)

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

#0A111C

Indigo · Black · Deep Sea Blue

HEX

#0A111C

RGB

rgb(10, 17, 28)

HSL

hsl(217, 47%, 7%)

HSB

hsb(217, 64%, 11%)

CMYK

cmyk(64%, 39%, 0%, 89%)

Oklch

oklch(17.7% 0.025 259.2)

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

#1B2433

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#1B2433

RGB

rgb(27, 36, 51)

HSL

hsl(218, 31%, 15%)

HSB

hsb(218, 47%, 20%)

CMYK

cmyk(47%, 29%, 0%, 80%)

Oklch

oklch(25.9% 0.031 260.4)

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

#353F4F

Indigo · DarkSlateGray · Prussian Blue

HEX

#353F4F

RGB

rgb(53, 63, 79)

HSL

hsl(217, 20%, 26%)

HSB

hsb(217, 33%, 31%)

CMYK

cmyk(33%, 20%, 0%, 69%)

Oklch

oklch(36.5% 0.031 259.7)

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

#4E5666

Indigo · DimGray · Prussian Blue

HEX

#4E5666

RGB

rgb(78, 86, 102)

HSL

hsl(220, 13%, 35%)

HSB

hsb(220, 24%, 40%)

CMYK

cmyk(24%, 16%, 0%, 60%)

Oklch

oklch(45.2% 0.028 264.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

03070D

0C0903

Analogous

030C0C

03070D

04030C

Triadic

03070D

0C0307

070C03

Split-Comp.

03070D

0C0403

0C0C03

Tetradic

03070D

0C030C

0C0903

030C04

Contrast Matrix WCAG 2.1 Contrast

03070D	0A111C	1B2433	353F4F	4E5666
—	1.1 Fail	1.3 Fail	1.9 Fail	2.7 Fail
1.1 Fail	—	1.2 Fail	1.8 Fail	2.6 Fail
1.3 Fail	1.2 Fail	—	1.5 Fail	2.1 Fail
1.9 Fail	1.8 Fail	1.5 Fail	—	1.4 Fail
2.7 Fail	2.6 Fail	2.1 Fail	1.4 Fail	—

White BG

20.2AAA

18.9AAA

15.6AAA

10.6AAA

7.4AAA

Black BG

1.0Fail

1.1Fail

1.3Fail

2.0Fail

2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

05050C

0D0D19

1F1F2F

39394B

515262

Deuteranopia

05040B

0D0C19

1E1E2E

39384A

515061

Tritanopia

030A0A

0A1717

1B2D2C

354847

4E5F5E

Achromatopsia

060606

101010

232323

3E3E3E

555555

Shades & Tints Shades & Tints

#03070D

Dark

Light

#0A111C

Dark

Light

#1B2433

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #03070d;
  --color-2: #0a111c;
  --color-3: #1b2433;
  --color-4: #353f4f;
  --color-5: #4e5666;
}

SCSS

$color-1: #03070d;
$color-2: #0a111c;
$color-3: #1b2433;
$color-4: #353f4f;
$color-5: #4e5666;

TAILWIND

colors: {
  'brand-1': '#03070d',
  'brand-2': '#0a111c',
  'brand-3': '#1b2433',
  'brand-4': '#353f4f',
  'brand-5': '#4e5666',
}

RGB Array

[3, 7, 13], [10, 17, 28], [27, 36, 51], [53, 63, 79], [78, 86, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #03070D, #0A111C, #1B2433, #353F4F, #4E5666 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: #03070d; --color-2: #0a111c; --color-3: #1b2433; --color-4: #353f4f; --color-5: #4e5666. 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