← Back to Editor

#3C326A · #BC457C · #8D3D79 · #899896 · #393F4C

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 Library

Color Details Color Details

#3C326A

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#3C326A
RGB
rgb(60, 50, 106)
HSL
hsl(251, 36%, 31%)
HSB
hsb(251, 53%, 42%)
CMYK
cmyk(43%, 53%, 0%, 58%)
Oklch
oklch(35.8% 0.094 289.0)

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

#BC457C

Dark Violet · MediumVioletRed · Camellia

HEX
#BC457C
RGB
rgb(188, 69, 124)
HSL
hsl(332, 47%, 50%)
HSB
hsb(332, 63%, 74%)
CMYK
cmyk(0%, 63%, 34%, 26%)
Oklch
oklch(56.9% 0.162 354.9)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#8D3D79

Rose Purple · DimGray · Eggplant

HEX
#8D3D79
RGB
rgb(141, 61, 121)
HSL
hsl(315, 40%, 40%)
HSB
hsb(315, 57%, 55%)
CMYK
cmyk(0%, 57%, 14%, 45%)
Oklch
oklch(48.7% 0.132 338.1)

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

#899896

Ash · LightSlateGray · Silver Sand

HEX
#899896
RGB
rgb(137, 152, 150)
HSL
hsl(172, 7%, 57%)
HSB
hsb(172, 10%, 60%)
CMYK
cmyk(10%, 0%, 1%, 40%)
Oklch
oklch(66.7% 0.017 187.1)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#393F4C

Indigo · DarkSlateGray · Prussian Blue

HEX
#393F4C
RGB
rgb(57, 63, 76)
HSL
hsl(221, 14%, 26%)
HSB
hsb(221, 25%, 30%)
CMYK
cmyk(25%, 17%, 0%, 70%)
Oklch
oklch(36.7% 0.024 265.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C326A
616C33

Analogous

33456C
3C326A
59336C

Triadic

3C326A
6C3D33
336C3D

Split-Comp.

3C326A
6C5933
456C33

Tetradic

3C326A
6C3345
616C33
336C59

Contrast Matrix WCAG 2.1 Contrast

3C326A
BC457C
8D3D79
899896
393F4C
—
2.3
Fail
1.7
Fail
3.8
AA Large
1.1
Fail
2.3
Fail
—
1.4
Fail
1.6
Fail
2.2
Fail
1.7
Fail
1.4
Fail
—
2.3
Fail
1.5
Fail
3.8
AA Large
1.6
Fail
2.3
Fail
—
3.5
AA Large
1.1
Fail
2.2
Fail
1.5
Fail
3.5
AA Large
—
White BG
11.3AAA
4.9AA
6.8AA
3.0AA Large
10.6AAA
Black BG
1.9Fail
4.3AA Large
3.1AA Large
7.0AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

38385C
88876F
6A6A6A
8F9096
3C3C49

Deuteranopia

383959
8F986C
6F7567
8F8E97
3B3B48

Tritanopia

3C524F
B66462
895F5D
8A9797
394646

Achromatopsia

3B3B3B
6F6F6F
5C5C5C
939393
3F3F3F

Shades & Tints Shades & Tints

#3C326A

Dark
Light

#BC457C

Dark
Light

#8D3D79

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c326a;
  --color-2: #bc457c;
  --color-3: #8d3d79;
  --color-4: #899896;
  --color-5: #393f4c;
}

SCSS

$color-1: #3c326a;
$color-2: #bc457c;
$color-3: #8d3d79;
$color-4: #899896;
$color-5: #393f4c;

TAILWIND

colors: {
  'brand-1': '#3c326a',
  'brand-2': '#bc457c',
  'brand-3': '#8d3d79',
  'brand-4': '#899896',
  'brand-5': '#393f4c',
}

RGB Array

[60, 50, 106], [188, 69, 124], [141, 61, 121], [137, 152, 150], [57, 63, 76]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C326A, #BC457C, #8D3D79, #899896, #393F4C is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #3c326a; --color-2: #bc457c; --color-3: #8d3d79; --color-4: #899896; --color-5: #393f4c. 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. 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