← Back to Editor

#281D42 · #1D102B · #2BFFF1 · #0D404D · #0B0017

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 AppData Visualization

Color Details Color Details

#281D42

Deep Indigo · MidnightBlue · Deep Sea Blue

HEX
#281D42
RGB
rgb(40, 29, 66)
HSL
hsl(258, 39%, 19%)
HSB
hsb(258, 56%, 26%)
CMYK
cmyk(39%, 56%, 0%, 74%)
Oklch
oklch(26.5% 0.068 295.1)

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

#1D102B

Deep Indigo · Black · Dark Purple

HEX
#1D102B
RGB
rgb(29, 16, 43)
HSL
hsl(269, 46%, 12%)
HSB
hsb(269, 63%, 17%)
CMYK
cmyk(33%, 63%, 0%, 83%)
Oklch
oklch(20.6% 0.054 304.3)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#2BFFF1

Mineral Blue · Cyan · Lake Green

HEX
#2BFFF1
RGB
rgb(43, 255, 241)
HSL
hsl(176, 100%, 58%)
HSB
hsb(176, 83%, 100%)
CMYK
cmyk(83%, 0%, 5%, 0%)
Oklch
oklch(90.3% 0.152 187.6)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#0D404D

Lake Blue · DarkSlateGray · Peacock Green

HEX
#0D404D
RGB
rgb(13, 64, 77)
HSL
hsl(192, 71%, 18%)
HSB
hsb(192, 83%, 30%)
CMYK
cmyk(83%, 17%, 0%, 70%)
Oklch
oklch(34.5% 0.056 219.1)

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

#0B0017

Deep Indigo · Black · Dark Purple

HEX
#0B0017
RGB
rgb(11, 0, 23)
HSL
hsl(269, 100%, 5%)
HSB
hsb(269, 100%, 9%)
CMYK
cmyk(52%, 100%, 0%, 91%)
Oklch
oklch(11.8% 0.061 306.4)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

281D42
38431E

Analogous

1E2543
281D42
3C1E43

Triadic

281D42
43291E
1E4329

Split-Comp.

281D42
433C1E
25431E

Tetradic

281D42
431E25
38431E
1E433C

Contrast Matrix WCAG 2.1 Contrast

281D42
1D102B
2BFFF1
0D404D
0B0017
—
1.2
Fail
12.4
AAA
1.4
Fail
1.3
Fail
1.2
Fail
—
14.4
AAA
1.6
Fail
1.1
Fail
12.4
AAA
14.4
AAA
—
9.0
AAA
16.2
AAA
1.4
Fail
1.6
Fail
9.0
AAA
—
1.8
Fail
1.3
Fail
1.1
Fail
16.2
AAA
1.8
Fail
—
White BG
15.6AAA
18.1AAA
1.3Fail
11.3AAA
20.5AAA
Black BG
1.3Fail
1.2Fail
16.7AAA
1.9Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

232339
171724
8789F4
23244A
060611

Deuteranopia

242537
181923
7B6BF5
201C49
070810

Tritanopia

273230
1C1F1E
36F7F8
104747
0A0D0C

Achromatopsia

252525
171717
BEBEBE
323232
060606

Shades & Tints Shades & Tints

#281D42

Dark
Light

#1D102B

Dark
Light

#2BFFF1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #281d42;
  --color-2: #1d102b;
  --color-3: #2bfff1;
  --color-4: #0d404d;
  --color-5: #0b0017;
}

SCSS

$color-1: #281d42;
$color-2: #1d102b;
$color-3: #2bfff1;
$color-4: #0d404d;
$color-5: #0b0017;

TAILWIND

colors: {
  'brand-1': '#281d42',
  'brand-2': '#1d102b',
  'brand-3': '#2bfff1',
  'brand-4': '#0d404d',
  'brand-5': '#0b0017',
}

RGB Array

[40, 29, 66], [29, 16, 43], [43, 255, 241], [13, 64, 77], [11, 0, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #281D42, #1D102B, #2BFFF1, #0D404D, #0B0017 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. 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: #281d42; --color-2: #1d102b; --color-3: #2bfff1; --color-4: #0d404d; --color-5: #0b0017. 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 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