← Back to Editor

#8C809F · #5183A0 · #536CA0 · #504D9E · #482E4F

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

#8C809F

Deep Indigo · LightSlateGray · Violet

HEX
#8C809F
RGB
rgb(140, 128, 159)
HSL
hsl(263, 14%, 56%)
HSB
hsb(263, 19%, 62%)
CMYK
cmyk(12%, 19%, 0%, 38%)
Oklch
oklch(62.1% 0.048 302.7)

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

#5183A0

Slate Blue · SteelBlue · Navy Blue

HEX
#5183A0
RGB
rgb(81, 131, 160)
HSL
hsl(202, 33%, 47%)
HSB
hsb(202, 49%, 63%)
CMYK
cmyk(49%, 18%, 0%, 37%)
Oklch
oklch(58.6% 0.070 235.2)

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

#536CA0

Indigo · SteelBlue · Navy Blue

HEX
#536CA0
RGB
rgb(83, 108, 160)
HSL
hsl(221, 32%, 48%)
HSB
hsb(221, 48%, 63%)
CMYK
cmyk(48%, 32%, 0%, 37%)
Oklch
oklch(53.4% 0.087 264.1)

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

#504D9E

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#504D9E
RGB
rgb(80, 77, 158)
HSL
hsl(242, 34%, 46%)
HSB
hsb(242, 51%, 62%)
CMYK
cmyk(49%, 51%, 0%, 38%)
Oklch
oklch(46.5% 0.128 281.9)

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

#482E4F

Dark Plum · DarkSlateGray · Eggplant

HEX
#482E4F
RGB
rgb(72, 46, 79)
HSL
hsl(287, 26%, 25%)
HSB
hsb(287, 42%, 31%)
CMYK
cmyk(9%, 42%, 0%, 69%)
Oklch
oklch(34.7% 0.065 318.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C809F
929F7F

Analogous

7F839F
8C809F
9B7F9F

Triadic

8C809F
9F8B7F
7F9F8B

Split-Comp.

8C809F
9F9B7F
839F7F

Tetradic

8C809F
9F7F83
929F7F
7F9F9B

Contrast Matrix WCAG 2.1 Contrast

8C809F
5183A0
536CA0
504D9E
482E4F
—
1.1
Fail
1.4
Fail
2.0
Fail
3.2
AA Large
1.1
Fail
—
1.3
Fail
1.8
Fail
2.9
Fail
1.4
Fail
1.3
Fail
—
1.4
Fail
2.3
Fail
2.0
Fail
1.8
Fail
1.4
Fail
—
1.6
Fail
3.2
AA Large
2.9
Fail
2.3
Fail
1.6
Fail
—
White BG
3.7AA Large
4.1AA Large
5.2AA
7.3AAA
11.8AAA
Black BG
5.7AA
5.1AA
4.0AA Large
2.9Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

878797
676799
5E5E93
4F4F8A
3D3D47

Deuteranopia

888896
646097
5C5B90
4F4F86
3E4045

Tritanopia

8B9290
549392
548987
507B78
47413F

Achromatopsia

878787
777777
6A6A6A
575757
3A3A3A

Shades & Tints Shades & Tints

#8C809F

Dark
Light

#5183A0

Dark
Light

#536CA0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c809f;
  --color-2: #5183a0;
  --color-3: #536ca0;
  --color-4: #504d9e;
  --color-5: #482e4f;
}

SCSS

$color-1: #8c809f;
$color-2: #5183a0;
$color-3: #536ca0;
$color-4: #504d9e;
$color-5: #482e4f;

TAILWIND

colors: {
  'brand-1': '#8c809f',
  'brand-2': '#5183a0',
  'brand-3': '#536ca0',
  'brand-4': '#504d9e',
  'brand-5': '#482e4f',
}

RGB Array

[140, 128, 159], [81, 131, 160], [83, 108, 160], [80, 77, 158], [72, 46, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C809F, #5183A0, #536CA0, #504D9E, #482E4F 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: #8c809f; --color-2: #5183a0; --color-3: #536ca0; --color-4: #504d9e; --color-5: #482e4f. 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