← Back to Editor

#503C54 · #8B456C · #EEC5C5 · #616671 · #A0CBCB

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

#503C54

Dark Plum · DarkSlateGray · Eggplant

HEX
#503C54
RGB
rgb(80, 60, 84)
HSL
hsl(290, 17%, 28%)
HSB
hsb(290, 29%, 33%)
CMYK
cmyk(5%, 29%, 0%, 67%)
Oklch
oklch(38.7% 0.047 320.7)

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

#8B456C

Rose Purple · DimGray · Camellia

HEX
#8B456C
RGB
rgb(139, 69, 108)
HSL
hsl(327, 34%, 41%)
HSB
hsb(327, 50%, 55%)
CMYK
cmyk(0%, 50%, 22%, 45%)
Oklch
oklch(49.1% 0.107 347.2)

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

#EEC5C5

Peach Pink · Pink · Cherry Blossom

HEX
#EEC5C5
RGB
rgb(238, 197, 197)
HSL
hsl(0, 55%, 85%)
HSB
hsb(0, 17%, 93%)
CMYK
cmyk(0%, 17%, 17%, 7%)
Oklch
oklch(85.9% 0.047 18.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#616671

Indigo · DimGray · Warm Gray

HEX
#616671
RGB
rgb(97, 102, 113)
HSL
hsl(221, 8%, 41%)
HSB
hsb(221, 14%, 44%)
CMYK
cmyk(14%, 10%, 0%, 56%)
Oklch
oklch(51.0% 0.018 266.2)

Traditional「Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#A0CBCB

Sky Blue · LightSteelBlue · Lake Green

HEX
#A0CBCB
RGB
rgb(160, 203, 203)
HSL
hsl(180, 29%, 71%)
HSB
hsb(180, 21%, 80%)
CMYK
cmyk(21%, 0%, 0%, 20%)
Oklch
oklch(81.2% 0.045 196.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

503C54
3F543B

Analogous

433B54
503C54
543B4B

Triadic

503C54
544F3B
3B544F

Split-Comp.

503C54
4B543B
3B5443

Tetradic

503C54
54433B
3F543B
3B4B54

Contrast Matrix WCAG 2.1 Contrast

503C54
8B456C
EEC5C5
616671
A0CBCB
—
1.5
Fail
6.3
AA
1.7
Fail
5.6
AA
1.5
Fail
—
4.2
AA Large
1.2
Fail
3.8
AA Large
6.3
AA
4.2
AA Large
—
3.7
AA Large
1.1
Fail
1.7
Fail
1.2
Fail
3.7
AA Large
—
3.3
AA Large
5.6
AA
3.8
AA Large
1.1
Fail
3.3
AA Large
—
White BG
9.9AAA
6.6AA
1.6Fail
5.8AA
1.8Fail
Black BG
2.1Fail
3.2AA Large
13.4AAA
3.6AA Large
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

47474E
6D6C63
DCDCC5
63636E
B3B3CB

Deuteranopia

494A4D
717660
DFE2C5
63626E
B0ADCB

Tritanopia

4F4A49
875B59
ECC5C5
616C6C
A2CBCB

Achromatopsia

454545
5E5E5E
D1D1D1
666666
BEBEBE

Shades & Tints Shades & Tints

#503C54

Dark
Light

#8B456C

Dark
Light

#EEC5C5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #503c54;
  --color-2: #8b456c;
  --color-3: #eec5c5;
  --color-4: #616671;
  --color-5: #a0cbcb;
}

SCSS

$color-1: #503c54;
$color-2: #8b456c;
$color-3: #eec5c5;
$color-4: #616671;
$color-5: #a0cbcb;

TAILWIND

colors: {
  'brand-1': '#503c54',
  'brand-2': '#8b456c',
  'brand-3': '#eec5c5',
  'brand-4': '#616671',
  'brand-5': '#a0cbcb',
}

RGB Array

[80, 60, 84], [139, 69, 108], [238, 197, 197], [97, 102, 113], [160, 203, 203]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #503C54, #8B456C, #EEC5C5, #616671, #A0CBCB is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #503c54; --color-2: #8b456c; --color-3: #eec5c5; --color-4: #616671; --color-5: #a0cbcb. 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. 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