← Back to Editor

#333464 · #160621 · #3E213A · #67998E · #C6E2EE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#333464

Indigo · DarkSlateGray · Prussian Blue

HEX
#333464
RGB
rgb(51, 52, 100)
HSL
hsl(239, 32%, 30%)
HSB
hsb(239, 49%, 39%)
CMYK
cmyk(49%, 48%, 0%, 61%)
Oklch
oklch(35.0% 0.082 280.3)

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

#160621

Royal Purple · Black · Dark Purple

HEX
#160621
RGB
rgb(22, 6, 33)
HSL
hsl(276, 69%, 8%)
HSB
hsb(276, 82%, 13%)
CMYK
cmyk(33%, 82%, 0%, 87%)
Oklch
oklch(16.7% 0.057 309.2)

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

#3E213A

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3E213A
RGB
rgb(62, 33, 58)
HSL
hsl(308, 31%, 19%)
HSB
hsb(308, 47%, 24%)
CMYK
cmyk(0%, 47%, 6%, 76%)
Oklch
oklch(29.7% 0.059 332.1)

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

#67998E

Mineral Blue · CadetBlue · Mint Ice

HEX
#67998E
RGB
rgb(103, 153, 142)
HSL
hsl(167, 20%, 50%)
HSB
hsb(167, 33%, 60%)
CMYK
cmyk(33%, 0%, 7%, 40%)
Oklch
oklch(64.4% 0.056 179.1)

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

#C6E2EE

Sky Blue · LightBlue · Glacier Blue

HEX
#C6E2EE
RGB
rgb(198, 226, 238)
HSL
hsl(198, 54%, 85%)
HSB
hsb(198, 17%, 93%)
CMYK
cmyk(17%, 5%, 0%, 7%)
Oklch
oklch(89.6% 0.034 225.5)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

333464
656434

Analogous

344D65
333464
4C3465

Triadic

333464
653435
356534

Split-Comp.

333464
654C34
4D6534

Tetradic

333464
65344D
656434
34654C

Contrast Matrix WCAG 2.1 Contrast

333464
160621
3E213A
67998E
C6E2EE
—
1.7
Fail
1.2
Fail
3.6
AA Large
8.5
AAA
1.7
Fail
—
1.4
Fail
6.0
AA
14.3
AAA
1.2
Fail
1.4
Fail
—
4.4
AA Large
10.5
AAA
3.6
AA Large
6.0
AA
4.4
AA Large
—
2.4
Fail
8.5
AAA
14.3
AAA
10.5
AAA
2.4
Fail
—
White BG
11.6AAA
19.4AAA
14.2AAA
3.2AA Large
1.4Fail
Black BG
1.8Fail
1.1Fail
1.5Fail
6.5AA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

333358
0F0F1A
313134
7D7D91
D2D2EB

Deuteranopia

333356
101119
333532
7A7691
D1CEEA

Tritanopia

334F4D
151514
3D2F2E
6A9393
C7E9E8

Achromatopsia

393939
0E0E0E
2D2D2D
898989
DBDBDB

Shades & Tints Shades & Tints

#333464

Dark
Light

#160621

Dark
Light

#3E213A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #333464;
  --color-2: #160621;
  --color-3: #3e213a;
  --color-4: #67998e;
  --color-5: #c6e2ee;
}

SCSS

$color-1: #333464;
$color-2: #160621;
$color-3: #3e213a;
$color-4: #67998e;
$color-5: #c6e2ee;

TAILWIND

colors: {
  'brand-1': '#333464',
  'brand-2': '#160621',
  'brand-3': '#3e213a',
  'brand-4': '#67998e',
  'brand-5': '#c6e2ee',
}

RGB Array

[51, 52, 100], [22, 6, 33], [62, 33, 58], [103, 153, 142], [198, 226, 238]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #333464, #160621, #3E213A, #67998E, #C6E2EE 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: #333464; --color-2: #160621; --color-3: #3e213a; --color-4: #67998e; --color-5: #c6e2ee. 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