← Back to Editor

#20303A · #305163 · #6C6C96 · #9D9DAF · #260729

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

#20303A

Slate Blue · DarkSlateGray · Deep Sea Blue

HEX
#20303A
RGB
rgb(32, 48, 58)
HSL
hsl(203, 29%, 18%)
HSB
hsb(203, 45%, 23%)
CMYK
cmyk(45%, 17%, 0%, 77%)
Oklch
oklch(30.0% 0.028 236.4)

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

#305163

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#305163
RGB
rgb(48, 81, 99)
HSL
hsl(201, 35%, 29%)
HSB
hsb(201, 52%, 39%)
CMYK
cmyk(52%, 18%, 0%, 61%)
Oklch
oklch(41.7% 0.049 233.5)

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

#6C6C96

Deep Indigo · SlateGray · Navy Blue

HEX
#6C6C96
RGB
rgb(108, 108, 150)
HSL
hsl(240, 17%, 51%)
HSB
hsb(240, 28%, 59%)
CMYK
cmyk(28%, 28%, 0%, 41%)
Oklch
oklch(54.8% 0.065 284.0)

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

#9D9DAF

Wisteria · DarkGray · Cobalt Blue

HEX
#9D9DAF
RGB
rgb(157, 157, 175)
HSL
hsl(240, 10%, 65%)
HSB
hsb(240, 10%, 69%)
CMYK
cmyk(10%, 10%, 0%, 31%)
Oklch
oklch(70.2% 0.026 285.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#260729

Royal Purple · Black · Dark Purple

HEX
#260729
RGB
rgb(38, 7, 41)
HSL
hsl(295, 71%, 9%)
HSB
hsb(295, 83%, 16%)
CMYK
cmyk(7%, 83%, 0%, 84%)
Oklch
oklch(20.3% 0.074 324.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

20303A
3B2B21

Analogous

213B38
20303A
21243B

Triadic

20303A
3B2131
313B21

Split-Comp.

20303A
3B2124
3B3821

Tetradic

20303A
38213B
3B2B21
243B21

Contrast Matrix WCAG 2.1 Contrast

20303A
305163
6C6C96
9D9DAF
260729
—
1.6
Fail
2.7
Fail
5.1
AA
1.3
Fail
1.6
Fail
—
1.7
Fail
3.2
AA Large
2.2
Fail
2.7
Fail
1.7
Fail
—
1.9
Fail
3.7
AA Large
5.1
AA
3.2
AA Large
1.9
Fail
—
6.9
AA
1.3
Fail
2.2
Fail
3.7
AA Large
6.9
AA
—
White BG
13.6AAA
8.5AAA
5.0AA
2.7Fail
18.3AAA
Black BG
1.5Fail
2.5Fail
4.2AA Large
7.9AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

272738
3E3F5F
6C6C8C
9D9DAB
191821

Deuteranopia

262537
3C3A5E
6C6C89
9D9DAA
1A1D1F

Tritanopia

213635
325B5A
6C8482
9DA7A6
241A19

Achromatopsia

2C2C2C
494949
717171
9F9F9F
141414

Shades & Tints Shades & Tints

#20303A

Dark
Light

#305163

Dark
Light

#6C6C96

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #20303a;
  --color-2: #305163;
  --color-3: #6c6c96;
  --color-4: #9d9daf;
  --color-5: #260729;
}

SCSS

$color-1: #20303a;
$color-2: #305163;
$color-3: #6c6c96;
$color-4: #9d9daf;
$color-5: #260729;

TAILWIND

colors: {
  'brand-1': '#20303a',
  'brand-2': '#305163',
  'brand-3': '#6c6c96',
  'brand-4': '#9d9daf',
  'brand-5': '#260729',
}

RGB Array

[32, 48, 58], [48, 81, 99], [108, 108, 150], [157, 157, 175], [38, 7, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #20303A, #305163, #6C6C96, #9D9DAF, #260729 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: #20303a; --color-2: #305163; --color-3: #6c6c96; --color-4: #9d9daf; --color-5: #260729. 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