← Back to Editor

#82B1A7 · #3F888F · #416075 · #2C334F · #21112C

dark

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#82B1A7

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#82B1A7
RGB
rgb(130, 177, 167)
HSL
hsl(167, 23%, 60%)
HSB
hsb(167, 27%, 69%)
CMYK
cmyk(27%, 0%, 6%, 31%)
Oklch
oklch(72.4% 0.052 180.2)

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

#3F888F

Slate Blue · SteelBlue · Mint Ice

HEX
#3F888F
RGB
rgb(63, 136, 143)
HSL
hsl(185, 39%, 40%)
HSB
hsb(185, 56%, 56%)
CMYK
cmyk(56%, 5%, 0%, 44%)
Oklch
oklch(58.3% 0.073 203.8)

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

#416075

Slate Blue · DarkSlateBlue · Prussian Blue

HEX
#416075
RGB
rgb(65, 96, 117)
HSL
hsl(204, 29%, 36%)
HSB
hsb(204, 44%, 46%)
CMYK
cmyk(44%, 18%, 0%, 54%)
Oklch
oklch(47.4% 0.050 238.8)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#2C334F

Indigo · DarkSlateGray · Prussian Blue

HEX
#2C334F
RGB
rgb(44, 51, 79)
HSL
hsl(228, 28%, 24%)
HSB
hsb(228, 44%, 31%)
CMYK
cmyk(44%, 35%, 0%, 69%)
Oklch
oklch(32.8% 0.051 272.6)

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

#21112C

Dark Plum · Black · Dark Purple

HEX
#21112C
RGB
rgb(33, 17, 44)
HSL
hsl(276, 44%, 12%)
HSB
hsb(276, 61%, 17%)
CMYK
cmyk(25%, 61%, 0%, 83%)
Oklch
oklch(21.5% 0.055 309.9)

Traditional「Dark Plum」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

82B1A7
B0828C

Analogous

82B08F
82B1A7
82A3B0

Triadic

82B1A7
A682B0
B0A682

Split-Comp.

82B1A7
B082A3
B08F82

Tetradic

82B1A7
8F82B0
B0828C
A3B082

Contrast Matrix WCAG 2.1 Contrast

82B1A7
3F888F
416075
2C334F
21112C
—
1.7
Fail
2.8
Fail
5.2
AA
7.4
AAA
1.7
Fail
—
1.6
Fail
3.0
AA Large
4.3
AA Large
2.8
Fail
1.6
Fail
—
1.9
Fail
2.7
Fail
5.2
AA
3.0
AA Large
1.9
Fail
—
1.4
Fail
7.4
AAA
4.3
AA Large
2.7
Fail
1.4
Fail
—
White BG
2.4Fail
4.1AA Large
6.7AA
12.4AAA
17.8AAA
Black BG
8.8AAA
5.1AA
3.2AA Large
1.7Fail
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9697A9
5F5F8D
4E4F70
2F2F48
1A1A25

Deuteranopia

9490AA
5A558D
4D4A6F
2F2E47
1B1C24

Tritanopia

84ABAC
438C8C
436C6B
2C4342
20201F

Achromatopsia

A2A2A2
737373
595959
343434
191919

Shades & Tints Shades & Tints

#82B1A7

Dark
Light

#3F888F

Dark
Light

#416075

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #82b1a7;
  --color-2: #3f888f;
  --color-3: #416075;
  --color-4: #2c334f;
  --color-5: #21112c;
}

SCSS

$color-1: #82b1a7;
$color-2: #3f888f;
$color-3: #416075;
$color-4: #2c334f;
$color-5: #21112c;

TAILWIND

colors: {
  'brand-1': '#82b1a7',
  'brand-2': '#3f888f',
  'brand-3': '#416075',
  'brand-4': '#2c334f',
  'brand-5': '#21112c',
}

RGB Array

[130, 177, 167], [63, 136, 143], [65, 96, 117], [44, 51, 79], [33, 17, 44]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #82B1A7, #3F888F, #416075, #2C334F, #21112C is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #82b1a7; --color-2: #3f888f; --color-3: #416075; --color-4: #2c334f; --color-5: #21112c. 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 tech, SaaS, healthcare, eco industries. 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