← Back to Editor

#001830 · #022261 · #1890D8 · #00A8F0 · #00D8F0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#001830

Indigo · Black · Deep Sea Blue

HEX
#001830
RGB
rgb(0, 24, 48)
HSL
hsl(210, 100%, 9%)
HSB
hsb(210, 100%, 19%)
CMYK
cmyk(100%, 50%, 0%, 81%)
Oklch
oklch(20.5% 0.057 249.5)

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

#022261

Indigo · MidnightBlue · Deep Sea Blue

HEX
#022261
RGB
rgb(2, 34, 97)
HSL
hsl(220, 96%, 19%)
HSB
hsb(220, 98%, 38%)
CMYK
cmyk(98%, 65%, 0%, 62%)
Oklch
oklch(27.9% 0.118 261.5)

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

#1890D8

Lake Blue · DodgerBlue · Navy Blue

HEX
#1890D8
RGB
rgb(24, 144, 216)
HSL
hsl(203, 80%, 47%)
HSB
hsb(203, 89%, 85%)
CMYK
cmyk(89%, 33%, 0%, 15%)
Oklch
oklch(62.8% 0.145 242.9)

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

#00A8F0

Lake Blue · DeepSkyBlue · Mint Ice

HEX
#00A8F0
RGB
rgb(0, 168, 240)
HSL
hsl(198, 100%, 47%)
HSB
hsb(198, 100%, 94%)
CMYK
cmyk(100%, 30%, 0%, 6%)
Oklch
oklch(69.5% 0.154 238.0)

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

#00D8F0

Lake Blue · DeepSkyBlue · Mint Ice

HEX
#00D8F0
RGB
rgb(0, 216, 240)
HSL
hsl(186, 100%, 47%)
HSB
hsb(186, 100%, 94%)
CMYK
cmyk(100%, 10%, 0%, 6%)
Oklch
oklch(80.8% 0.139 208.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

001830
2E1700

Analogous

002E2E
001830
00002E

Triadic

001830
2E0017
172E00

Split-Comp.

001830
2E0000
2E2E00

Tetradic

001830
2E002E
2E1700
002E00

Contrast Matrix WCAG 2.1 Contrast

001830
022261
1890D8
00A8F0
00D8F0
—
1.2
Fail
5.1
AA
6.7
AA
10.3
AAA
1.2
Fail
—
4.3
AA Large
5.6
AA
8.6
AAA
5.1
AA
4.3
AA Large
—
1.3
Fail
2.0
Fail
6.7
AA
5.6
AA
1.3
Fail
—
1.5
Fail
10.3
AAA
8.6
AAA
2.0
Fail
1.5
Fail
—
White BG
17.9AAA
15.0AAA
3.5AA Large
2.7Fail
1.7Fail
Black BG
1.2Fail
1.4Fail
6.0AA
7.9AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0A0B2A
101052
4C4DC7
494ADF
5E5FEA

Deuteranopia

090729
0E0C4E
453CC2
3F32DA
5141E9

Tritanopia

012625
044643
1EB9B6
08D1CE
0BE6E5

Achromatopsia

141414
202020
747474
7E7E7E
9A9A9A

Shades & Tints Shades & Tints

#001830

Dark
Light

#022261

Dark
Light

#1890D8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #001830;
  --color-2: #022261;
  --color-3: #1890d8;
  --color-4: #00a8f0;
  --color-5: #00d8f0;
}

SCSS

$color-1: #001830;
$color-2: #022261;
$color-3: #1890d8;
$color-4: #00a8f0;
$color-5: #00d8f0;

TAILWIND

colors: {
  'brand-1': '#001830',
  'brand-2': '#022261',
  'brand-3': '#1890d8',
  'brand-4': '#00a8f0',
  'brand-5': '#00d8f0',
}

RGB Array

[0, 24, 48], [2, 34, 97], [24, 144, 216], [0, 168, 240], [0, 216, 240]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #001830, #022261, #1890D8, #00A8F0, #00D8F0 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs. Vivid colors effectively attract user attention. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #001830; --color-2: #022261; --color-3: #1890d8; --color-4: #00a8f0; --color-5: #00d8f0. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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