← Back to Editor

#D3CFE7 · #0A93C4 · #015370 · #22044D · #1A0439

dark

A 5-color dark 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

#D3CFE7

Wisteria · LightGray · Sky Blue

HEX
#D3CFE7
RGB
rgb(211, 207, 231)
HSL
hsl(250, 33%, 86%)
HSB
hsb(250, 10%, 91%)
CMYK
cmyk(9%, 10%, 0%, 9%)
Oklch
oklch(86.5% 0.033 293.3)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#0A93C4

Lake Blue · LightSeaGreen · Mint Ice

HEX
#0A93C4
RGB
rgb(10, 147, 196)
HSL
hsl(196, 90%, 40%)
HSB
hsb(196, 95%, 77%)
CMYK
cmyk(95%, 25%, 0%, 23%)
Oklch
oklch(62.3% 0.124 231.3)

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

#015370

Lake Blue · Teal · Peacock Green

HEX
#015370
RGB
rgb(1, 83, 112)
HSL
hsl(196, 98%, 22%)
HSB
hsb(196, 99%, 44%)
CMYK
cmyk(99%, 26%, 0%, 56%)
Oklch
oklch(41.5% 0.083 230.6)

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

#22044D

Deep Indigo · MidnightBlue · Dark Purple

HEX
#22044D
RGB
rgb(34, 4, 77)
HSL
hsl(265, 90%, 16%)
HSB
hsb(265, 95%, 30%)
CMYK
cmyk(56%, 95%, 0%, 70%)
Oklch
oklch(22.8% 0.118 293.0)

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

#1A0439

Deep Indigo · MidnightBlue · Dark Purple

HEX
#1A0439
RGB
rgb(26, 4, 57)
HSL
hsl(265, 87%, 12%)
HSB
hsb(265, 93%, 22%)
CMYK
cmyk(54%, 93%, 0%, 78%)
Oklch
oklch(19.4% 0.094 295.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3CFE7
E3E7D0

Analogous

D0D7E7
D3CFE7
DFD0E7

Triadic

D3CFE7
E7D3D0
D0E7D3

Split-Comp.

D3CFE7
E7DFD0
D7E7D0

Tetradic

D3CFE7
E7D0D7
E3E7D0
D0E7DF

Contrast Matrix WCAG 2.1 Contrast

D3CFE7
0A93C4
015370
22044D
1A0439
—
2.3
Fail
5.6
AA
11.6
AAA
12.4
AAA
2.3
Fail
—
2.4
Fail
5.0
AA
5.3
AA
5.6
AA
2.4
Fail
—
2.1
Fail
2.2
Fail
11.6
AAA
5.0
AA
2.1
Fail
—
1.1
Fail
12.4
AAA
5.3
AA
2.2
Fail
1.1
Fail
—
White BG
1.5Fail
3.5AA Large
8.5AAA
17.6AAA
18.7AAA
Black BG
13.8AAA
6.0AA
2.5Fail
1.2Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1E1
4547B8
252569
15153B
10102C

Deuteranopia

D2D2E0
3D33B5
201A67
171937
121329

Tritanopia

D3DDDC
11AFAD
056362
212D2A
192220

Achromatopsia

D3D3D3
707070
3E3E3E
151515
111111

Shades & Tints Shades & Tints

#D3CFE7

Dark
Light

#0A93C4

Dark
Light

#015370

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3cfe7;
  --color-2: #0a93c4;
  --color-3: #015370;
  --color-4: #22044d;
  --color-5: #1a0439;
}

SCSS

$color-1: #d3cfe7;
$color-2: #0a93c4;
$color-3: #015370;
$color-4: #22044d;
$color-5: #1a0439;

TAILWIND

colors: {
  'brand-1': '#d3cfe7',
  'brand-2': '#0a93c4',
  'brand-3': '#015370',
  'brand-4': '#22044d',
  'brand-5': '#1a0439',
}

RGB Array

[211, 207, 231], [10, 147, 196], [1, 83, 112], [34, 4, 77], [26, 4, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #D3CFE7, #0A93C4, #015370, #22044D, #1A0439 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: #d3cfe7; --color-2: #0a93c4; --color-3: #015370; --color-4: #22044d; --color-5: #1a0439. 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 dark-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