#57106C + #731970 + #80306D + #874E85 + #917FA7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#57106C

Royal Purple · Purple · Eggplant

HEX

#57106C

RGB

rgb(87, 16, 108)

HSL

hsl(286, 74%, 24%)

HSB

hsb(286, 85%, 42%)

CMYK

cmyk(19%, 85%, 0%, 58%)

Oklch

oklch(34.7% 0.152 316.7)

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

#731970

Rose Purple · Purple · Eggplant

HEX

#731970

RGB

rgb(115, 25, 112)

HSL

hsl(302, 64%, 27%)

HSB

hsb(302, 78%, 45%)

CMYK

cmyk(0%, 78%, 3%, 55%)

Oklch

oklch(40.2% 0.159 329.5)

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

#80306D

Rose Purple · Purple · Eggplant

HEX

#80306D

RGB

rgb(128, 48, 109)

HSL

hsl(314, 45%, 35%)

HSB

hsb(314, 63%, 50%)

CMYK

cmyk(0%, 63%, 15%, 50%)

Oklch

oklch(44.5% 0.133 338.0)

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

#874E85

Rose Purple · DimGray · Violet

HEX

#874E85

RGB

rgb(135, 78, 133)

HSL

hsl(302, 27%, 42%)

HSB

hsb(302, 42%, 53%)

CMYK

cmyk(0%, 42%, 1%, 47%)

Oklch

oklch(51.1% 0.108 328.3)

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

#917FA7

Deep Indigo · LightSlateGray · Violet

HEX

#917FA7

RGB

rgb(145, 127, 167)

HSL

hsl(267, 19%, 58%)

HSB

hsb(267, 24%, 65%)

CMYK

cmyk(13%, 24%, 0%, 35%)

Oklch

oklch(62.7% 0.062 305.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

57106C

256A10

Analogous

28106A

57106C

6A1052

Triadic

57106C

6A5510

106A55

Split-Comp.

57106C

526A10

106A28

Tetradic

57106C

6A2810

256A10

10526A

Contrast Matrix WCAG 2.1 Contrast

57106C	731970	80306D	874E85	917FA7
—	1.2 Fail	1.5 Fail	2.0 Fail	3.4 AA Large
1.2 Fail	—	1.2 Fail	1.6 Fail	2.8 Fail
1.5 Fail	1.2 Fail	—	1.4 Fail	2.3 Fail
2.0 Fail	1.6 Fail	1.4 Fail	—	1.7 Fail
3.4 AA Large	2.8 Fail	2.3 Fail	1.7 Fail	—

White BG

12.4AAA

10.0AAA

8.2AAA

6.1AA

3.6AA Large

Black BG

1.7Fail

2.1Fail

2.6Fail

3.5AA Large

5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

383856

4C4B5B

5D5D5E

6E6E78

89899D

Deuteranopia

3C4250

515856

62685B

727675

8A8C9B

Tritanopia

534440

6F4A47

7C5350

846D6B

909694

Achromatopsia

303030

3E3E3E

4F4F4F

656565

898989

Shades & Tints Shades & Tints

#57106C

Dark

Light

#731970

Dark

Light

#80306D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #57106c;
  --color-2: #731970;
  --color-3: #80306d;
  --color-4: #874e85;
  --color-5: #917fa7;
}

SCSS

$color-1: #57106c;
$color-2: #731970;
$color-3: #80306d;
$color-4: #874e85;
$color-5: #917fa7;

TAILWIND

colors: {
  'brand-1': '#57106c',
  'brand-2': '#731970',
  'brand-3': '#80306d',
  'brand-4': '#874e85',
  'brand-5': '#917fa7',
}

RGB Array

[87, 16, 108], [115, 25, 112], [128, 48, 109], [135, 78, 133], [145, 127, 167]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #57106C, #731970, #80306D, #874E85, #917FA7 is ideal for: tech websites, dark mode UIs, game UIs. 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: #57106c; --color-2: #731970; --color-3: #80306d; --color-4: #874e85; --color-5: #917fa7. 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. 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