← Back to Editor

#2A202A · #3E2643 · #4B5A64 · #44CD96 · #5AF288

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

#2A202A

Rose Purple · DarkSlateGray · Dark Purple

HEX
#2A202A
RGB
rgb(42, 32, 42)
HSL
hsl(300, 14%, 15%)
HSB
hsb(300, 24%, 16%)
CMYK
cmyk(0%, 24%, 0%, 84%)
Oklch
oklch(25.9% 0.023 326.2)

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

#3E2643

Dark Plum · DarkSlateGray · Eggplant

HEX
#3E2643
RGB
rgb(62, 38, 67)
HSL
hsl(290, 28%, 21%)
HSB
hsb(290, 43%, 26%)
CMYK
cmyk(7%, 43%, 0%, 74%)
Oklch
oklch(31.1% 0.059 320.5)

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

#4B5A64

Slate Blue · DimGray · Prussian Blue

HEX
#4B5A64
RGB
rgb(75, 90, 100)
HSL
hsl(204, 14%, 34%)
HSB
hsb(204, 25%, 39%)
CMYK
cmyk(25%, 10%, 0%, 61%)
Oklch
oklch(45.9% 0.025 237.3)

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

#44CD96

Mineral Blue · MediumAquaMarine · Olive Green

HEX
#44CD96
RGB
rgb(68, 205, 150)
HSL
hsl(156, 58%, 54%)
HSB
hsb(156, 67%, 80%)
CMYK
cmyk(67%, 0%, 27%, 20%)
Oklch
oklch(76.1% 0.143 162.5)

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

#5AF288

Emerald · MediumAquaMarine · Apple Green

HEX
#5AF288
RGB
rgb(90, 242, 136)
HSL
hsl(138, 85%, 65%)
HSB
hsb(138, 63%, 95%)
CMYK
cmyk(63%, 0%, 44%, 5%)
Oklch
oklch(85.6% 0.195 150.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2A202A
212C21

Analogous

26212C
2A202A
2C2126

Triadic

2A202A
2C2C21
212C2C

Split-Comp.

2A202A
262C21
212C26

Tetradic

2A202A
2C2621
212C21
21262C

Contrast Matrix WCAG 2.1 Contrast

2A202A
3E2643
4B5A64
44CD96
5AF288
—
1.2
Fail
2.2
Fail
7.8
AAA
10.8
AAA
1.2
Fail
—
1.9
Fail
6.7
AA
9.3
AAA
2.2
Fail
1.9
Fail
—
3.5
AA Large
4.9
AA
7.8
AAA
6.7
AA
3.5
AA Large
—
1.4
Fail
10.8
AAA
9.3
AAA
4.9
AA
1.4
Fail
—
White BG
15.7AAA
13.4AAA
7.1AAA
2.0Fail
1.4Fail
Black BG
1.3Fail
1.6Fail
2.9Fail
10.4AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

262628
34333C
515262
7F81A3
9C9DA2

Deuteranopia

262727
35373A
515061
776DA7
9388A8

Tritanopia

2A2625
3D3635
4C605F
4BAEB0
62B6BA

Achromatopsia

242424
303030
575757
9E9E9E
B8B8B8

Shades & Tints Shades & Tints

#2A202A

Dark
Light

#3E2643

Dark
Light

#4B5A64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2a202a;
  --color-2: #3e2643;
  --color-3: #4b5a64;
  --color-4: #44cd96;
  --color-5: #5af288;
}

SCSS

$color-1: #2a202a;
$color-2: #3e2643;
$color-3: #4b5a64;
$color-4: #44cd96;
$color-5: #5af288;

TAILWIND

colors: {
  'brand-1': '#2a202a',
  'brand-2': '#3e2643',
  'brand-3': '#4b5a64',
  'brand-4': '#44cd96',
  'brand-5': '#5af288',
}

RGB Array

[42, 32, 42], [62, 38, 67], [75, 90, 100], [68, 205, 150], [90, 242, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2A202A, #3E2643, #4B5A64, #44CD96, #5AF288 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: #2a202a; --color-2: #3e2643; --color-3: #4b5a64; --color-4: #44cd96; --color-5: #5af288. 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 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