#B96CD0 + #5D559E + #8DB2B3 + #A4B0C2 + #B7ABEC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B96CD0

Lilac · MediumOrchid · Lilac Purple

HEX

#B96CD0

RGB

rgb(185, 108, 208)

HSL

hsl(286, 52%, 62%)

HSB

hsb(286, 48%, 82%)

CMYK

cmyk(11%, 48%, 0%, 18%)

Oklch

oklch(65.4% 0.163 318.1)

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

#5D559E

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#5D559E

RGB

rgb(93, 85, 158)

HSL

hsl(247, 30%, 48%)

HSB

hsb(247, 46%, 62%)

CMYK

cmyk(41%, 46%, 0%, 38%)

Oklch

oklch(49.2% 0.114 286.4)

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

#8DB2B3

Sky Blue · DarkGray · Lake Green

HEX

#8DB2B3

RGB

rgb(141, 178, 179)

HSL

hsl(182, 20%, 63%)

HSB

hsb(182, 21%, 70%)

CMYK

cmyk(21%, 1%, 0%, 30%)

Oklch

oklch(73.7% 0.040 198.4)

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

#A4B0C2

Azure · DarkGray · Cobalt Blue

HEX

#A4B0C2

RGB

rgb(164, 176, 194)

HSL

hsl(216, 20%, 70%)

HSB

hsb(216, 15%, 76%)

CMYK

cmyk(15%, 9%, 0%, 24%)

Oklch

oklch(75.4% 0.029 258.4)

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

#B7ABEC

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B7ABEC

RGB

rgb(183, 171, 236)

HSL

hsl(251, 63%, 80%)

HSB

hsb(251, 28%, 93%)

CMYK

cmyk(22%, 28%, 0%, 7%)

Oklch

oklch(77.4% 0.092 292.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B96CD0

83D06C

Analogous

876CD0

B96CD0

D06CB6

Triadic

B96CD0

D0B96C

6CD0B9

Split-Comp.

B96CD0

B6D06C

6CD087

Tetradic

B96CD0

D0876C

83D06C

6CB6D0

Contrast Matrix WCAG 2.1 Contrast

B96CD0	5D559E	8DB2B3	A4B0C2	B7ABEC
—	1.9 Fail	1.5 Fail	1.6 Fail	1.6 Fail
1.9 Fail	—	2.8 Fail	2.9 Fail	3.1 AA Large
1.5 Fail	2.8 Fail	—	1.0 Fail	1.1 Fail
1.6 Fail	2.9 Fail	1.0 Fail	—	1.1 Fail
1.6 Fail	3.1 AA Large	1.1 Fail	1.1 Fail	—

White BG

3.4AA Large

6.4AA

2.3Fail

2.2Fail

2.1Fail

Black BG

6.1AA

3.3AA Large

9.2AAA

9.6AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9897B8

5A598C

9D9DB3

A9A9BE

B2B2DC

Deuteranopia

9CA2B2

5A5B88

9B98B3

A9A8BD

B3B3D9

Tritanopia

B5A5A1

5D7E7B

8FB3B3

A5BAB9

B6D0CD

Achromatopsia

8E8E8E

606060

A7A7A7

AEAEAE

B6B6B6

Shades & Tints Shades & Tints

#B96CD0

Dark

Light

#5D559E

Dark

Light

#8DB2B3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b96cd0;
  --color-2: #5d559e;
  --color-3: #8db2b3;
  --color-4: #a4b0c2;
  --color-5: #b7abec;
}

SCSS

$color-1: #b96cd0;
$color-2: #5d559e;
$color-3: #8db2b3;
$color-4: #a4b0c2;
$color-5: #b7abec;

TAILWIND

colors: {
  'brand-1': '#b96cd0',
  'brand-2': '#5d559e',
  'brand-3': '#8db2b3',
  'brand-4': '#a4b0c2',
  'brand-5': '#b7abec',
}

RGB Array

[185, 108, 208], [93, 85, 158], [141, 178, 179], [164, 176, 194], [183, 171, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B96CD0, #5D559E, #8DB2B3, #A4B0C2, #B7ABEC 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: #b96cd0; --color-2: #5d559e; --color-3: #8db2b3; --color-4: #a4b0c2; --color-5: #b7abec. 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