#8C5FCD + #A17BD9 + #C3BFF8 + #C6B6D7 + #D7C9D1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8C5FCD

Deep Indigo · SlateBlue · Violet

HEX

#8C5FCD

RGB

rgb(140, 95, 205)

HSL

hsl(265, 52%, 59%)

HSB

hsb(265, 54%, 80%)

CMYK

cmyk(32%, 54%, 0%, 20%)

Oklch

oklch(58.4% 0.165 300.2)

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

#A17BD9

Wisteria · MediumOrchid · Lilac Purple

HEX

#A17BD9

RGB

rgb(161, 123, 217)

HSL

hsl(264, 55%, 67%)

HSB

hsb(264, 43%, 85%)

CMYK

cmyk(26%, 43%, 0%, 15%)

Oklch

oklch(65.8% 0.140 301.3)

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

#C3BFF8

Wisteria · LightSteelBlue · Sky Blue

HEX

#C3BFF8

RGB

rgb(195, 191, 248)

HSL

hsl(244, 80%, 86%)

HSB

hsb(244, 23%, 97%)

CMYK

cmyk(21%, 23%, 0%, 3%)

Oklch

oklch(82.7% 0.079 287.7)

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

#C6B6D7

Wisteria · Silver · Lilac Purple

HEX

#C6B6D7

RGB

rgb(198, 182, 215)

HSL

hsl(269, 29%, 78%)

HSB

hsb(269, 15%, 84%)

CMYK

cmyk(8%, 15%, 0%, 16%)

Oklch

oklch(80.0% 0.049 307.1)

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

#D7C9D1

Mauve · LightGray · Cherry Blossom

HEX

#D7C9D1

RGB

rgb(215, 201, 209)

HSL

hsl(326, 15%, 82%)

HSB

hsb(326, 7%, 84%)

CMYK

cmyk(0%, 7%, 3%, 16%)

Oklch

oklch(85.0% 0.019 342.1)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8C5FCD

A0CD60

Analogous

6069CD

8C5FCD

C460CD

Triadic

8C5FCD

CD8D60

60CD8D

Split-Comp.

8C5FCD

CDC460

69CD60

Tetradic

8C5FCD

CD6069

A0CD60

60CDC4

Contrast Matrix WCAG 2.1 Contrast

8C5FCD	A17BD9	C3BFF8	C6B6D7	D7C9D1
—	1.4 Fail	2.6 Fail	2.4 Fail	2.8 Fail
1.4 Fail	—	1.9 Fail	1.7 Fail	2.1 Fail
2.6 Fail	1.9 Fail	—	1.1 Fail	1.1 Fail
2.4 Fail	1.7 Fail	1.1 Fail	—	1.2 Fail
2.8 Fail	2.1 Fail	1.1 Fail	1.2 Fail	—

White BG

4.5AA

3.3AA Large

1.7Fail

1.9Fail

1.6Fail

Black BG

4.6AA

6.4AA

12.1AAA

11.1AAA

13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7978B2

9190C2

C1C1EA

BFBFCF

D1D1CF

Deuteranopia

7B7FAC

9396BD

C2C2E7

C0C1CD

D2D3CF

Tritanopia

8A9D99

9FB0AC

C3DFDD

C5C9C7

D6CECD

Achromatopsia

797979

919191

C7C7C7

BFBFBF

CECECE

Shades & Tints Shades & Tints

#8C5FCD

Dark

Light

#A17BD9

Dark

Light

#C3BFF8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8c5fcd;
  --color-2: #a17bd9;
  --color-3: #c3bff8;
  --color-4: #c6b6d7;
  --color-5: #d7c9d1;
}

SCSS

$color-1: #8c5fcd;
$color-2: #a17bd9;
$color-3: #c3bff8;
$color-4: #c6b6d7;
$color-5: #d7c9d1;

TAILWIND

colors: {
  'brand-1': '#8c5fcd',
  'brand-2': '#a17bd9',
  'brand-3': '#c3bff8',
  'brand-4': '#c6b6d7',
  'brand-5': '#d7c9d1',
}

RGB Array

[140, 95, 205], [161, 123, 217], [195, 191, 248], [198, 182, 215], [215, 201, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8C5FCD, #A17BD9, #C3BFF8, #C6B6D7, #D7C9D1 is ideal for: health products, baby brands, fresh-style blogs. 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: #8c5fcd; --color-2: #a17bd9; --color-3: #c3bff8; --color-4: #c6b6d7; --color-5: #d7c9d1. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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