← Back to Editor

#57316A · #675994 · #84609D · #938AA7 · #AC90C3

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 Library

Color Details Color Details

#57316A

Dark Plum · DarkSlateBlue · Eggplant

HEX
#57316A
RGB
rgb(87, 49, 106)
HSL
hsl(280, 37%, 30%)
HSB
hsb(280, 54%, 42%)
CMYK
cmyk(18%, 54%, 0%, 58%)
Oklch
oklch(38.7% 0.102 313.3)

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

#675994

Deep Indigo · SlateGray · Navy Blue

HEX
#675994
RGB
rgb(103, 89, 148)
HSL
hsl(254, 25%, 46%)
HSB
hsb(254, 40%, 58%)
CMYK
cmyk(30%, 40%, 0%, 42%)
Oklch
oklch(50.3% 0.093 293.7)

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

#84609D

Dark Plum · SlateGray · Violet

HEX
#84609D
RGB
rgb(132, 96, 157)
HSL
hsl(275, 24%, 50%)
HSB
hsb(275, 39%, 62%)
CMYK
cmyk(16%, 39%, 0%, 38%)
Oklch
oklch(55.0% 0.100 310.5)

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

#938AA7

Deep Indigo · LightSlateGray · Navy Blue

HEX
#938AA7
RGB
rgb(147, 138, 167)
HSL
hsl(259, 14%, 60%)
HSB
hsb(259, 17%, 65%)
CMYK
cmyk(12%, 17%, 0%, 35%)
Oklch
oklch(65.1% 0.044 299.4)

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

#AC90C3

Lilac · DarkGray · Lilac Purple

HEX
#AC90C3
RGB
rgb(172, 144, 195)
HSL
hsl(273, 30%, 66%)
HSB
hsb(273, 26%, 76%)
CMYK
cmyk(12%, 26%, 0%, 24%)
Oklch
oklch(69.7% 0.079 309.3)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57316A
436930

Analogous

3A3069
57316A
69305F

Triadic

57316A
695630
306956

Split-Comp.

57316A
5F6930
30693A

Tetradic

57316A
693A30
436930
305F69

Contrast Matrix WCAG 2.1 Contrast

57316A
675994
84609D
938AA7
AC90C3
—
1.7
Fail
2.0
Fail
3.1
AA Large
3.7
AA Large
1.7
Fail
—
1.2
Fail
1.9
Fail
2.2
Fail
2.0
Fail
1.2
Fail
—
1.6
Fail
1.8
Fail
3.1
AA Large
1.9
Fail
1.6
Fail
—
1.2
Fail
3.7
AA Large
2.2
Fail
1.8
Fail
1.2
Fail
—
White BG
10.2AAA
6.1AA
5.1AA
3.3AA Large
2.8Fail
Black BG
2.1Fail
3.4AA Large
4.1AA Large
6.4AA
7.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47465C
616186
74748E
8F8FA0
A0A0B7

Deuteranopia

494C59
626382
77798B
90909E
A2A4B4

Tritanopia

55514F
667A78
828380
939A99
ABADAB

Achromatopsia

434343
646464
727272
909090
9E9E9E

Shades & Tints Shades & Tints

#57316A

Dark
Light

#675994

Dark
Light

#84609D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57316a;
  --color-2: #675994;
  --color-3: #84609d;
  --color-4: #938aa7;
  --color-5: #ac90c3;
}

SCSS

$color-1: #57316a;
$color-2: #675994;
$color-3: #84609d;
$color-4: #938aa7;
$color-5: #ac90c3;

TAILWIND

colors: {
  'brand-1': '#57316a',
  'brand-2': '#675994',
  'brand-3': '#84609d',
  'brand-4': '#938aa7',
  'brand-5': '#ac90c3',
}

RGB Array

[87, 49, 106], [103, 89, 148], [132, 96, 157], [147, 138, 167], [172, 144, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57316A, #675994, #84609D, #938AA7, #AC90C3 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: #57316a; --color-2: #675994; --color-3: #84609d; --color-4: #938aa7; --color-5: #ac90c3. 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