← Back to Editor

#582770 · #773D94 · #943D8A · #C22760 · #E81764

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#582770

Dark Plum · DarkSlateBlue · Eggplant

HEX
#582770
RGB
rgb(88, 39, 112)
HSL
hsl(280, 48%, 30%)
HSB
hsb(280, 65%, 44%)
CMYK
cmyk(21%, 65%, 0%, 56%)
Oklch
oklch(37.6% 0.127 312.9)

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

#773D94

Dark Plum · DarkSlateBlue · Violet

HEX
#773D94
RGB
rgb(119, 61, 148)
HSL
hsl(280, 42%, 41%)
HSB
hsb(280, 59%, 58%)
CMYK
cmyk(20%, 59%, 0%, 42%)
Oklch
oklch(47.2% 0.145 313.0)

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

#943D8A

Rose Purple · DarkMagenta · Violet

HEX
#943D8A
RGB
rgb(148, 61, 138)
HSL
hsl(307, 42%, 41%)
HSB
hsb(307, 59%, 58%)
CMYK
cmyk(0%, 59%, 7%, 42%)
Oklch
oklch(50.5% 0.151 332.2)

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

#C22760

Dark Violet · MediumVioletRed · Camellia

HEX
#C22760
RGB
rgb(194, 39, 96)
HSL
hsl(338, 67%, 46%)
HSB
hsb(338, 80%, 76%)
CMYK
cmyk(0%, 80%, 51%, 24%)
Oklch
oklch(54.1% 0.192 5.0)

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

#E81764

Dark Violet · Crimson · Camellia

HEX
#E81764
RGB
rgb(232, 23, 100)
HSL
hsl(338, 82%, 50%)
HSB
hsb(338, 90%, 91%)
CMYK
cmyk(0%, 90%, 57%, 9%)
Oklch
oklch(60.2% 0.232 8.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

582770
407128

Analogous

342871
582770
712865

Triadic

582770
715928
287159

Split-Comp.

582770
657128
287134

Tetradic

582770
713428
407128
286571

Contrast Matrix WCAG 2.1 Contrast

582770
773D94
943D8A
C22760
E81764
—
1.5
Fail
1.7
Fail
1.9
Fail
2.4
Fail
1.5
Fail
—
1.1
Fail
1.3
Fail
1.6
Fail
1.7
Fail
1.1
Fail
—
1.1
Fail
1.4
Fail
1.9
Fail
1.3
Fail
1.1
Fail
—
1.3
Fail
2.4
Fail
1.6
Fail
1.4
Fail
1.3
Fail
—
White BG
10.8AAA
7.3AAA
6.4AA
5.6AA
4.4AA Large
Black BG
1.9Fail
2.9Fail
3.3AA Large
3.8AA Large
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

43425E
5E5D7F
6E6E77
7F7D52
8E8C51

Deuteranopia

46495A
61667A
737A73
88934F
9AA94D

Tritanopia

56504D
746E6B
906965
BA4745
DE433F

Achromatopsia

3E3E3E
585858
606060
5C5C5C
5E5E5E

Shades & Tints Shades & Tints

#582770

Dark
Light

#773D94

Dark
Light

#943D8A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #582770;
  --color-2: #773d94;
  --color-3: #943d8a;
  --color-4: #c22760;
  --color-5: #e81764;
}

SCSS

$color-1: #582770;
$color-2: #773d94;
$color-3: #943d8a;
$color-4: #c22760;
$color-5: #e81764;

TAILWIND

colors: {
  'brand-1': '#582770',
  'brand-2': '#773d94',
  'brand-3': '#943d8a',
  'brand-4': '#c22760',
  'brand-5': '#e81764',
}

RGB Array

[88, 39, 112], [119, 61, 148], [148, 61, 138], [194, 39, 96], [232, 23, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #582770, #773D94, #943D8A, #C22760, #E81764 is ideal for: corporate websites, product showcases, portfolios. 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: #582770; --color-2: #773d94; --color-3: #943d8a; --color-4: #c22760; --color-5: #e81764. 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. 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