← Back to Editor

#30203A · #6A6289 · #8A82A3 · #443D59 · #262232

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#30203A

Dark Plum · DarkSlateGray · Dark Purple

HEX
#30203A
RGB
rgb(48, 32, 58)
HSL
hsl(277, 29%, 18%)
HSB
hsb(277, 45%, 23%)
CMYK
cmyk(17%, 45%, 0%, 77%)
Oklch
oklch(27.5% 0.051 311.6)

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

#6A6289

Deep Indigo · SlateGray · Navy Blue

HEX
#6A6289
RGB
rgb(106, 98, 137)
HSL
hsl(252, 17%, 46%)
HSB
hsb(252, 28%, 54%)
CMYK
cmyk(23%, 28%, 0%, 46%)
Oklch
oklch(51.9% 0.061 293.6)

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

#8A82A3

Deep Indigo · LightSlateGray · Navy Blue

HEX
#8A82A3
RGB
rgb(138, 130, 163)
HSL
hsl(255, 15%, 57%)
HSB
hsb(255, 20%, 64%)
CMYK
cmyk(15%, 20%, 0%, 36%)
Oklch
oklch(62.5% 0.050 296.0)

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

#443D59

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#443D59
RGB
rgb(68, 61, 89)
HSL
hsl(255, 19%, 29%)
HSB
hsb(255, 31%, 35%)
CMYK
cmyk(24%, 31%, 0%, 65%)
Oklch
oklch(37.9% 0.048 295.5)

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

#262232

Deep Indigo · DarkSlateGray · Deep Sea Blue

HEX
#262232
RGB
rgb(38, 34, 50)
HSL
hsl(255, 19%, 16%)
HSB
hsb(255, 32%, 20%)
CMYK
cmyk(24%, 32%, 0%, 80%)
Oklch
oklch(26.4% 0.030 295.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

30203A
2B3B21

Analogous

24213B
30203A
3B2138

Triadic

30203A
3B3121
213B31

Split-Comp.

30203A
383B21
213B24

Tetradic

30203A
3B2421
2B3B21
21383B

Contrast Matrix WCAG 2.1 Contrast

30203A
6A6289
8A82A3
443D59
262232
—
2.7
Fail
4.2
AA Large
1.5
Fail
1.0
Fail
2.7
Fail
—
1.6
Fail
1.8
Fail
2.7
Fail
4.2
AA Large
1.6
Fail
—
2.8
Fail
4.3
AA Large
1.5
Fail
1.8
Fail
2.8
Fail
—
1.5
Fail
1.0
Fail
2.7
Fail
4.3
AA Large
1.5
Fail
—
White BG
15.1AAA
5.6AA
3.6AA Large
10.2AAA
15.5AAA
Black BG
1.4Fail
3.7AA Large
5.8AA
2.1Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

292934
676680
87869B
414152
24242E

Deuteranopia

2A2B32
67687D
878899
414251
25252D

Tritanopia

2F2F2E
6A7876
8A9593
444D4C
262B2A

Achromatopsia

282828
696969
888888
424242
252525

Shades & Tints Shades & Tints

#30203A

Dark
Light

#6A6289

Dark
Light

#8A82A3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #30203a;
  --color-2: #6a6289;
  --color-3: #8a82a3;
  --color-4: #443d59;
  --color-5: #262232;
}

SCSS

$color-1: #30203a;
$color-2: #6a6289;
$color-3: #8a82a3;
$color-4: #443d59;
$color-5: #262232;

TAILWIND

colors: {
  'brand-1': '#30203a',
  'brand-2': '#6a6289',
  'brand-3': '#8a82a3',
  'brand-4': '#443d59',
  'brand-5': '#262232',
}

RGB Array

[48, 32, 58], [106, 98, 137], [138, 130, 163], [68, 61, 89], [38, 34, 50]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #30203A, #6A6289, #8A82A3, #443D59, #262232 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: #30203a; --color-2: #6a6289; --color-3: #8a82a3; --color-4: #443d59; --color-5: #262232. 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