← Back to Editor

#6E5C85 · #887A93 · #CDA6D3 · #4CA6B6 · #B4DCF6

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

#6E5C85

Deep Indigo · DimGray · Violet

HEX
#6E5C85
RGB
rgb(110, 92, 133)
HSL
hsl(266, 18%, 44%)
HSB
hsb(266, 31%, 52%)
CMYK
cmyk(17%, 31%, 0%, 48%)
Oklch
oklch(50.8% 0.067 304.2)

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

#887A93

Dark Plum · Gray · Violet

HEX
#887A93
RGB
rgb(136, 122, 147)
HSL
hsl(274, 10%, 53%)
HSB
hsb(274, 17%, 58%)
CMYK
cmyk(7%, 17%, 0%, 42%)
Oklch
oklch(60.1% 0.041 310.2)

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

#CDA6D3

Lilac · Silver · Lilac Purple

HEX
#CDA6D3
RGB
rgb(205, 166, 211)
HSL
hsl(292, 34%, 74%)
HSB
hsb(292, 21%, 83%)
CMYK
cmyk(3%, 21%, 0%, 17%)
Oklch
oklch(77.5% 0.076 321.9)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#4CA6B6

Slate Blue · CadetBlue · Lake Green

HEX
#4CA6B6
RGB
rgb(76, 166, 182)
HSL
hsl(189, 42%, 51%)
HSB
hsb(189, 58%, 71%)
CMYK
cmyk(58%, 9%, 0%, 29%)
Oklch
oklch(67.7% 0.088 210.9)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#B4DCF6

Sky Blue · LightBlue · Sky Blue

HEX
#B4DCF6
RGB
rgb(180, 220, 246)
HSL
hsl(204, 79%, 84%)
HSB
hsb(204, 27%, 96%)
CMYK
cmyk(27%, 11%, 0%, 4%)
Oklch
oklch(87.4% 0.055 236.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6E5C85
73845C

Analogous

5C5F84
6E5C85
825C84

Triadic

6E5C85
846E5C
5C846E

Split-Comp.

6E5C85
84825C
5F845C

Tetradic

6E5C85
845C5F
73845C
5C8482

Contrast Matrix WCAG 2.1 Contrast

6E5C85
887A93
CDA6D3
4CA6B6
B4DCF6
—
1.5
Fail
2.8
Fail
2.1
Fail
4.1
AA Large
1.5
Fail
—
1.9
Fail
1.4
Fail
2.8
Fail
2.8
Fail
1.9
Fail
—
1.3
Fail
1.5
Fail
2.1
Fail
1.4
Fail
1.3
Fail
—
2.0
Fail
4.1
AA Large
2.8
Fail
1.5
Fail
2.0
Fail
—
White BG
5.9AA
4.0AA Large
2.1Fail
2.8Fail
1.4Fail
Black BG
3.5AA Large
5.3AA
10.0AAA
7.4AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66667B
82828D
BCBCC8
7374B2
C5C6F0

Deuteranopia

676979
83848C
BEC1C6
6E67B1
C3C0EE

Tritanopia

6D7372
878887
CBC0BE
51AFAE
B6EBEA

Achromatopsia

666666
818181
B7B7B7
8D8D8D
D3D3D3

Shades & Tints Shades & Tints

#6E5C85

Dark
Light

#887A93

Dark
Light

#CDA6D3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6e5c85;
  --color-2: #887a93;
  --color-3: #cda6d3;
  --color-4: #4ca6b6;
  --color-5: #b4dcf6;
}

SCSS

$color-1: #6e5c85;
$color-2: #887a93;
$color-3: #cda6d3;
$color-4: #4ca6b6;
$color-5: #b4dcf6;

TAILWIND

colors: {
  'brand-1': '#6e5c85',
  'brand-2': '#887a93',
  'brand-3': '#cda6d3',
  'brand-4': '#4ca6b6',
  'brand-5': '#b4dcf6',
}

RGB Array

[110, 92, 133], [136, 122, 147], [205, 166, 211], [76, 166, 182], [180, 220, 246]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6E5C85, #887A93, #CDA6D3, #4CA6B6, #B4DCF6 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: #6e5c85; --color-2: #887a93; --color-3: #cda6d3; --color-4: #4ca6b6; --color-5: #b4dcf6. 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