← Back to Editor

#5C4466 · #7B7EAD · #84A8C1 · #9BCCB9 · #EBE4BC

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

#5C4466

Dark Plum · DimGray · Eggplant

HEX
#5C4466
RGB
rgb(92, 68, 102)
HSL
hsl(282, 20%, 33%)
HSB
hsb(282, 33%, 40%)
CMYK
cmyk(10%, 33%, 0%, 60%)
Oklch
oklch(42.6% 0.062 315.7)

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

#7B7EAD

Azure · LightSlateGray · Navy Blue

HEX
#7B7EAD
RGB
rgb(123, 126, 173)
HSL
hsl(236, 23%, 58%)
HSB
hsb(236, 29%, 68%)
CMYK
cmyk(29%, 27%, 0%, 32%)
Oklch
oklch(60.9% 0.071 281.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#84A8C1

Sky Blue · DarkGray · Cobalt Blue

HEX
#84A8C1
RGB
rgb(132, 168, 193)
HSL
hsl(205, 33%, 64%)
HSB
hsb(205, 32%, 76%)
CMYK
cmyk(32%, 13%, 0%, 24%)
Oklch
oklch(71.4% 0.054 238.8)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#9BCCB9

Jade · Silver · Apple Green

HEX
#9BCCB9
RGB
rgb(155, 204, 185)
HSL
hsl(157, 32%, 70%)
HSB
hsb(157, 24%, 80%)
CMYK
cmyk(24%, 0%, 9%, 20%)
Oklch
oklch(80.5% 0.058 169.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#EBE4BC

Fresh Green · Wheat · Lemon Cream

HEX
#EBE4BC
RGB
rgb(235, 228, 188)
HSL
hsl(51, 54%, 83%)
HSB
hsb(51, 20%, 92%)
CMYK
cmyk(0%, 3%, 20%, 8%)
Oklch
oklch(91.4% 0.053 99.1)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5C4466
4D6543

Analogous

4A4365
5C4466
65435E

Triadic

5C4466
655B43
43655B

Split-Comp.

5C4466
5E6543
43654A

Tetradic

5C4466
654A43
4D6543
435E65

Contrast Matrix WCAG 2.1 Contrast

5C4466
7B7EAD
84A8C1
9BCCB9
EBE4BC
—
2.2
Fail
3.4
AA Large
4.7
AA
6.6
AA
2.2
Fail
—
1.5
Fail
2.2
Fail
3.0
AA Large
3.4
AA Large
1.5
Fail
—
1.4
Fail
2.0
Fail
4.7
AA
2.2
Fail
1.4
Fail
—
1.4
Fail
6.6
AA
3.0
AA Large
2.0
Fail
1.4
Fail
—
White BG
8.5AAA
3.9AA Large
2.5Fail
1.8Fail
1.3Fail
Black BG
2.5Fail
5.4AA
8.4AAA
11.7AAA
16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

52515E
7C7CA2
9494BB
B0B1BE
E8E8C6

Deuteranopia

53555C
7C7C9F
928FBA
ADAABF
E8E9C8

Tritanopia

5B5756
7B9997
86B6B5
9DC1C2
EBCDCF

Achromatopsia

4F4F4F
828282
A0A0A0
BBBBBB
E2E2E2

Shades & Tints Shades & Tints

#5C4466

Dark
Light

#7B7EAD

Dark
Light

#84A8C1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5c4466;
  --color-2: #7b7ead;
  --color-3: #84a8c1;
  --color-4: #9bccb9;
  --color-5: #ebe4bc;
}

SCSS

$color-1: #5c4466;
$color-2: #7b7ead;
$color-3: #84a8c1;
$color-4: #9bccb9;
$color-5: #ebe4bc;

TAILWIND

colors: {
  'brand-1': '#5c4466',
  'brand-2': '#7b7ead',
  'brand-3': '#84a8c1',
  'brand-4': '#9bccb9',
  'brand-5': '#ebe4bc',
}

RGB Array

[92, 68, 102], [123, 126, 173], [132, 168, 193], [155, 204, 185], [235, 228, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5C4466, #7B7EAD, #84A8C1, #9BCCB9, #EBE4BC is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #5c4466; --color-2: #7b7ead; --color-3: #84a8c1; --color-4: #9bccb9; --color-5: #ebe4bc. 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. 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