← Back to Editor

#322E39 · #615390 · #A36E8D · #D89693 · #B9B49F

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

#322E39

Deep Indigo · DarkSlateGray · Dark Purple

HEX
#322E39
RGB
rgb(50, 46, 57)
HSL
hsl(262, 11%, 20%)
HSB
hsb(262, 19%, 22%)
CMYK
cmyk(12%, 19%, 0%, 78%)
Oklch
oklch(31.0% 0.020 301.8)

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

#615390

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#615390
RGB
rgb(97, 83, 144)
HSL
hsl(254, 27%, 45%)
HSB
hsb(254, 42%, 56%)
CMYK
cmyk(33%, 42%, 0%, 44%)
Oklch
oklch(48.3% 0.097 293.0)

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

#A36E8D

Rose Purple · Gray · Rose Pink

HEX
#A36E8D
RGB
rgb(163, 110, 141)
HSL
hsl(325, 22%, 54%)
HSB
hsb(325, 33%, 64%)
CMYK
cmyk(0%, 33%, 13%, 36%)
Oklch
oklch(60.3% 0.079 343.8)

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

#D89693

Peach Pink · DarkSalmon · Coral Red

HEX
#D89693
RGB
rgb(216, 150, 147)
HSL
hsl(3, 47%, 71%)
HSB
hsb(3, 32%, 85%)
CMYK
cmyk(0%, 31%, 32%, 15%)
Oklch
oklch(73.7% 0.080 22.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B9B49F

Ginger · DarkGray · Sunflower

HEX
#B9B49F
RGB
rgb(185, 180, 159)
HSL
hsl(48, 16%, 67%)
HSB
hsb(48, 14%, 73%)
CMYK
cmyk(0%, 3%, 14%, 27%)
Oklch
oklch(76.8% 0.030 96.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

322E39
34392D

Analogous

2D2F39
322E39
372D39

Triadic

322E39
39322D
2D3932

Split-Comp.

322E39
39372D
2F392D

Tetradic

322E39
392D2F
34392D
2D3937

Contrast Matrix WCAG 2.1 Contrast

322E39
615390
A36E8D
D89693
B9B49F
—
2.0
Fail
3.3
AA Large
5.5
AA
6.4
AA
2.0
Fail
—
1.6
Fail
2.8
Fail
3.2
AA Large
3.3
AA Large
1.6
Fail
—
1.7
Fail
2.0
Fail
5.5
AA
2.8
Fail
1.7
Fail
—
1.2
Fail
6.4
AA
3.2
AA Large
2.0
Fail
1.2
Fail
—
White BG
13.2AAA
6.7AA
4.1AA Large
2.4Fail
2.1Fail
Black BG
1.6Fail
3.1AA Large
5.2AA
8.7AAA
10.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

303036
5B5B81
8C8C85
BBBB94
B7B7A4

Deuteranopia

313136
5C5D7E
8F9384
BFC494
B7B8A5

Tritanopia

323434
607673
A0807E
D59494
B9A8A9

Achromatopsia

303030
5E5E5E
818181
A9A9A9
B3B3B3

Shades & Tints Shades & Tints

#322E39

Dark
Light

#615390

Dark
Light

#A36E8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #322e39;
  --color-2: #615390;
  --color-3: #a36e8d;
  --color-4: #d89693;
  --color-5: #b9b49f;
}

SCSS

$color-1: #322e39;
$color-2: #615390;
$color-3: #a36e8d;
$color-4: #d89693;
$color-5: #b9b49f;

TAILWIND

colors: {
  'brand-1': '#322e39',
  'brand-2': '#615390',
  'brand-3': '#a36e8d',
  'brand-4': '#d89693',
  'brand-5': '#b9b49f',
}

RGB Array

[50, 46, 57], [97, 83, 144], [163, 110, 141], [216, 150, 147], [185, 180, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #322E39, #615390, #A36E8D, #D89693, #B9B49F 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: #322e39; --color-2: #615390; --color-3: #a36e8d; --color-4: #d89693; --color-5: #b9b49f. 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