← Back to Editor

#2E2240 · #30112E · #86B0A5 · #66858C · #444866

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#2E2240

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#2E2240
RGB
rgb(46, 34, 64)
HSL
hsl(264, 31%, 19%)
HSB
hsb(264, 47%, 25%)
CMYK
cmyk(28%, 47%, 0%, 75%)
Oklch
oklch(28.1% 0.056 301.4)

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

#30112E

Rose Purple · Black · Dark Purple

HEX
#30112E
RGB
rgb(48, 17, 46)
HSL
hsl(304, 48%, 13%)
HSB
hsb(304, 65%, 19%)
CMYK
cmyk(0%, 65%, 4%, 81%)
Oklch
oklch(23.9% 0.067 329.9)

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

#86B0A5

Jade · DarkSeaGreen · Lake Green

HEX
#86B0A5
RGB
rgb(134, 176, 165)
HSL
hsl(164, 21%, 61%)
HSB
hsb(164, 24%, 69%)
CMYK
cmyk(24%, 0%, 6%, 31%)
Oklch
oklch(72.3% 0.048 177.0)

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

#66858C

Slate Blue · SlateGray · Mint Ice

HEX
#66858C
RGB
rgb(102, 133, 140)
HSL
hsl(191, 16%, 47%)
HSB
hsb(191, 27%, 55%)
CMYK
cmyk(27%, 5%, 0%, 45%)
Oklch
oklch(59.5% 0.037 213.1)

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

#444866

Indigo · DarkSlateGray · Prussian Blue

HEX
#444866
RGB
rgb(68, 72, 102)
HSL
hsl(233, 20%, 33%)
HSB
hsb(233, 33%, 40%)
CMYK
cmyk(33%, 29%, 0%, 60%)
Oklch
oklch(41.1% 0.050 278.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2E2240
333F21

Analogous

21243F
2E2240
3C213F

Triadic

2E2240
3F2D21
213F2D

Split-Comp.

2E2240
3F3C21
243F21

Tetradic

2E2240
3F2124
333F21
213F3C

Contrast Matrix WCAG 2.1 Contrast

2E2240
30112E
86B0A5
66858C
444866
—
1.1
Fail
6.2
AA
3.7
AA Large
1.7
Fail
1.1
Fail
—
7.0
AAA
4.3
AA Large
1.9
Fail
6.2
AA
7.0
AAA
—
1.7
Fail
3.7
AA Large
3.7
AA Large
4.3
AA Large
1.7
Fail
—
2.2
Fail
1.7
Fail
1.9
Fail
3.7
AA Large
2.2
Fail
—
White BG
14.8AAA
16.9AAA
2.4Fail
4.0AA Large
8.9AAA
Black BG
1.4Fail
1.2Fail
8.8AAA
5.3AA
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292939
232227
9899A8
73748A
46465F

Deuteranopia

2A2A37
242725
9693A8
726F8A
46455D

Tritanopia

2D3332
2E2120
88AAAA
688989
445958

Achromatopsia

292929
1E1E1E
A2A2A2
7D7D7D
4A4A4A

Shades & Tints Shades & Tints

#2E2240

Dark
Light

#30112E

Dark
Light

#86B0A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2e2240;
  --color-2: #30112e;
  --color-3: #86b0a5;
  --color-4: #66858c;
  --color-5: #444866;
}

SCSS

$color-1: #2e2240;
$color-2: #30112e;
$color-3: #86b0a5;
$color-4: #66858c;
$color-5: #444866;

TAILWIND

colors: {
  'brand-1': '#2e2240',
  'brand-2': '#30112e',
  'brand-3': '#86b0a5',
  'brand-4': '#66858c',
  'brand-5': '#444866',
}

RGB Array

[46, 34, 64], [48, 17, 46], [134, 176, 165], [102, 133, 140], [68, 72, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2E2240, #30112E, #86B0A5, #66858C, #444866 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #2e2240; --color-2: #30112e; --color-3: #86b0a5; --color-4: #66858c; --color-5: #444866. 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 finance, legal, luxury industries. Restrained colors convey professionalism and trust. 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