← Back to Editor

#322B36 · #513A5E · #624D85 · #7276A3 · #CACBEB

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

#322B36

Dark Plum · DarkSlateGray · Dark Purple

HEX
#322B36
RGB
rgb(50, 43, 54)
HSL
hsl(278, 11%, 19%)
HSB
hsb(278, 20%, 21%)
CMYK
cmyk(7%, 20%, 0%, 79%)
Oklch
oklch(30.1% 0.022 313.3)

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

#513A5E

Dark Plum · DarkSlateGray · Eggplant

HEX
#513A5E
RGB
rgb(81, 58, 94)
HSL
hsl(278, 24%, 30%)
HSB
hsb(278, 38%, 37%)
CMYK
cmyk(14%, 38%, 0%, 63%)
Oklch
oklch(38.9% 0.066 312.8)

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

#624D85

Deep Indigo · DarkSlateBlue · Violet

HEX
#624D85
RGB
rgb(98, 77, 133)
HSL
hsl(263, 27%, 41%)
HSB
hsb(263, 42%, 52%)
CMYK
cmyk(26%, 42%, 0%, 48%)
Oklch
oklch(46.6% 0.091 300.2)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#7276A3

Azure · LightSlateGray · Navy Blue

HEX
#7276A3
RGB
rgb(114, 118, 163)
HSL
hsl(235, 21%, 54%)
HSB
hsb(235, 30%, 64%)
CMYK
cmyk(30%, 28%, 0%, 36%)
Oklch
oklch(58.0% 0.069 280.1)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#CACBEB

Azure · LightGray · Sky Blue

HEX
#CACBEB
RGB
rgb(202, 203, 235)
HSL
hsl(238, 45%, 86%)
HSB
hsb(238, 14%, 92%)
CMYK
cmyk(14%, 14%, 0%, 8%)
Oklch
oklch(85.1% 0.044 284.0)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322B36
2F362B

Analogous

2D2B36
322B36
362B34

Triadic

322B36
36322B
2B3632

Split-Comp.

322B36
34362B
2B362D

Tetradic

322B36
362D2B
2F362B
2B3436

Contrast Matrix WCAG 2.1 Contrast

322B36
513A5E
624D85
7276A3
CACBEB
—
1.4
Fail
1.9
Fail
3.2
AA Large
8.6
AAA
1.4
Fail
—
1.4
Fail
2.3
Fail
6.3
AA
1.9
Fail
1.4
Fail
—
1.7
Fail
4.5
AA
3.2
AA Large
2.3
Fail
1.7
Fail
—
2.7
Fail
8.6
AAA
6.3
AA
4.5
AA
2.7
Fail
—
White BG
13.7AAA
9.9AAA
7.2AAA
4.3AA Large
1.6Fail
Black BG
1.5Fail
2.1Fail
2.9Fail
4.8AA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F33
474755
595977
747498
CACAE3

Deuteranopia

2F3033
484A53
5A5C74
747396
CACAE1

Tritanopia

323131
504E4D
616D6A
72908E
CADDDC

Achromatopsia

2E2E2E
454545
5A5A5A
7A7A7A
CECECE

Shades & Tints Shades & Tints

#322B36

Dark
Light

#513A5E

Dark
Light

#624D85

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322b36;
  --color-2: #513a5e;
  --color-3: #624d85;
  --color-4: #7276a3;
  --color-5: #cacbeb;
}

SCSS

$color-1: #322b36;
$color-2: #513a5e;
$color-3: #624d85;
$color-4: #7276a3;
$color-5: #cacbeb;

TAILWIND

colors: {
  'brand-1': '#322b36',
  'brand-2': '#513a5e',
  'brand-3': '#624d85',
  'brand-4': '#7276a3',
  'brand-5': '#cacbeb',
}

RGB Array

[50, 43, 54], [81, 58, 94], [98, 77, 133], [114, 118, 163], [202, 203, 235]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #322B36, #513A5E, #624D85, #7276A3, #CACBEB is ideal for: brand design, premium product pages, magazine layouts, 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: #322b36; --color-2: #513a5e; --color-3: #624d85; --color-4: #7276a3; --color-5: #cacbeb. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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. 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