← Back to Editor

#302367 · #02A1EC · #50F6C3 · #AEF9A4 · #D6FB96

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

#302367

Deep Indigo · MidnightBlue · Prussian Blue

HEX
#302367
RGB
rgb(48, 35, 103)
HSL
hsl(251, 49%, 27%)
HSB
hsb(251, 66%, 40%)
CMYK
cmyk(53%, 66%, 0%, 60%)
Oklch
oklch(31.5% 0.114 286.7)

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

#02A1EC

Lake Blue · DeepSkyBlue · Mint Ice

HEX
#02A1EC
RGB
rgb(2, 161, 236)
HSL
hsl(199, 98%, 47%)
HSB
hsb(199, 99%, 93%)
CMYK
cmyk(99%, 32%, 0%, 7%)
Oklch
oklch(67.6% 0.155 240.2)

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

#50F6C3

Jade · Turquoise · Lake Green

HEX
#50F6C3
RGB
rgb(80, 246, 195)
HSL
hsl(162, 90%, 64%)
HSB
hsb(162, 67%, 96%)
CMYK
cmyk(67%, 0%, 21%, 4%)
Oklch
oklch(87.5% 0.154 168.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#AEF9A4

Emerald · LightGreen · Mint Green

HEX
#AEF9A4
RGB
rgb(174, 249, 164)
HSL
hsl(113, 88%, 81%)
HSB
hsb(113, 34%, 98%)
CMYK
cmyk(30%, 0%, 34%, 2%)
Oklch
oklch(91.2% 0.135 141.6)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#D6FB96

Willow Green · Khaki · Apple Green

HEX
#D6FB96
RGB
rgb(214, 251, 150)
HSL
hsl(82, 93%, 79%)
HSB
hsb(82, 40%, 98%)
CMYK
cmyk(15%, 0%, 40%, 2%)
Oklch
oklch(93.9% 0.133 125.3)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302367
5A6723

Analogous

233867
302367
512367

Triadic

302367
672F23
23672F

Split-Comp.

302367
675123
386723

Tetradic

302367
672338
5A6723
236751

Contrast Matrix WCAG 2.1 Contrast

302367
02A1EC
50F6C3
AEF9A4
D6FB96
—
4.7
AA
9.8
AAA
10.8
AAA
11.6
AAA
4.7
AA
—
2.1
Fail
2.3
Fail
2.5
Fail
9.8
AAA
2.1
Fail
—
1.1
Fail
1.2
Fail
10.8
AAA
2.3
Fail
1.1
Fail
—
1.1
Fail
11.6
AAA
2.5
Fail
1.2
Fail
1.1
Fail
—
White BG
13.4AAA
2.9Fail
1.4Fail
1.2Fail
1.2Fail
Black BG
1.6Fail
7.3AAA
15.3AAA
16.9AAA
18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2A2A57
4748DA
9899CF
CECFB9
E6E6AE

Deuteranopia

2B2C53
3E32D6
8E82D2
CAC5BE
E4E1B4

Tritanopia

2F4A47
0ACCC8
58D9DB
B2C9CC
D8C2C6

Achromatopsia

2F2F2F
7A7A7A
BFBFBF
D9D9D9
E4E4E4

Shades & Tints Shades & Tints

#302367

Dark
Light

#02A1EC

Dark
Light

#50F6C3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302367;
  --color-2: #02a1ec;
  --color-3: #50f6c3;
  --color-4: #aef9a4;
  --color-5: #d6fb96;
}

SCSS

$color-1: #302367;
$color-2: #02a1ec;
$color-3: #50f6c3;
$color-4: #aef9a4;
$color-5: #d6fb96;

TAILWIND

colors: {
  'brand-1': '#302367',
  'brand-2': '#02a1ec',
  'brand-3': '#50f6c3',
  'brand-4': '#aef9a4',
  'brand-5': '#d6fb96',
}

RGB Array

[48, 35, 103], [2, 161, 236], [80, 246, 195], [174, 249, 164], [214, 251, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #302367, #02A1EC, #50F6C3, #AEF9A4, #D6FB96 is ideal for: social media posters, mobile apps, e-commerce promos, 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: #302367; --color-2: #02a1ec; --color-3: #50f6c3; --color-4: #aef9a4; --color-5: #d6fb96. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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