← Back to Editor

#21FCF8 · #34BAC3 · #007775 · #064733 · #002B16

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

#21FCF8

Mineral Blue · Cyan · Lake Green

HEX
#21FCF8
RGB
rgb(33, 252, 248)
HSL
hsl(179, 97%, 56%)
HSB
hsb(179, 87%, 99%)
CMYK
cmyk(87%, 0%, 2%, 1%)
Oklch
oklch(89.8% 0.150 192.7)

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

#34BAC3

Lake Blue · MediumTurquoise · Mint Ice

HEX
#34BAC3
RGB
rgb(52, 186, 195)
HSL
hsl(184, 58%, 48%)
HSB
hsb(184, 73%, 76%)
CMYK
cmyk(73%, 5%, 0%, 24%)
Oklch
oklch(72.3% 0.111 201.7)

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

#007775

Mineral Blue · Teal · Peacock Green

HEX
#007775
RGB
rgb(0, 119, 117)
HSL
hsl(179, 100%, 23%)
HSB
hsb(179, 100%, 47%)
CMYK
cmyk(100%, 0%, 2%, 53%)
Oklch
oklch(51.5% 0.088 192.7)

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

#064733

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#064733
RGB
rgb(6, 71, 51)
HSL
hsl(162, 84%, 15%)
HSB
hsb(162, 92%, 28%)
CMYK
cmyk(92%, 0%, 28%, 72%)
Oklch
oklch(35.4% 0.070 166.0)

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

#002B16

Mineral Blue · Black · Dark Green

HEX
#002B16
RGB
rgb(0, 43, 22)
HSL
hsl(151, 100%, 8%)
HSB
hsb(151, 100%, 17%)
CMYK
cmyk(100%, 0%, 49%, 83%)
Oklch
oklch(25.4% 0.061 156.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

21FCF8
FC2226

Analogous

22FC8B
21FCF8
2292FC

Triadic

21FCF8
F822FC
FCF822

Split-Comp.

21FCF8
FC2292
FC8B22

Tetradic

21FCF8
8B22FC
FC2226
92FC22

Contrast Matrix WCAG 2.1 Contrast

21FCF8
34BAC3
007775
064733
002B16
—
1.8
Fail
4.2
AA Large
8.4
AAA
12.0
AAA
1.8
Fail
—
2.3
Fail
4.6
AA
6.6
AA
4.2
AA Large
2.3
Fail
—
2.0
Fail
2.9
Fail
8.4
AAA
4.6
AA
2.0
Fail
—
1.4
Fail
12.0
AAA
6.6
AA
2.9
Fail
1.4
Fail
—
White BG
1.3Fail
2.3Fail
5.4AA
10.7AAA
15.5AAA
Black BG
16.3AAA
9.0AAA
3.9AA Large
2.0Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8082F9
6E6FC1
343575
222338
13131B

Deuteranopia

7363F9
665CC0
2D2476
1E1A39
100D1C

Tritanopia

2CFAFA
3BBFBF
067676
093C3D
021F20

Achromatopsia

BABABA
939393
535353
313131
1C1C1C

Shades & Tints Shades & Tints

#21FCF8

Dark
Light

#34BAC3

Dark
Light

#007775

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #21fcf8;
  --color-2: #34bac3;
  --color-3: #007775;
  --color-4: #064733;
  --color-5: #002b16;
}

SCSS

$color-1: #21fcf8;
$color-2: #34bac3;
$color-3: #007775;
$color-4: #064733;
$color-5: #002b16;

TAILWIND

colors: {
  'brand-1': '#21fcf8',
  'brand-2': '#34bac3',
  'brand-3': '#007775',
  'brand-4': '#064733',
  'brand-5': '#002b16',
}

RGB Array

[33, 252, 248], [52, 186, 195], [0, 119, 117], [6, 71, 51], [0, 43, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #21FCF8, #34BAC3, #007775, #064733, #002B16 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: #21fcf8; --color-2: #34bac3; --color-3: #007775; --color-4: #064733; --color-5: #002b16. 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