#D1CADE + #B3A5D0 + #9884C1 + #7657B5 + #5C3E9C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D1CADE

Wisteria · LightGray · Lavender

HEX

#D1CADE

RGB

rgb(209, 202, 222)

HSL

hsl(261, 23%, 83%)

HSB

hsb(261, 9%, 87%)

CMYK

cmyk(6%, 9%, 0%, 13%)

Oklch

oklch(85.1% 0.028 301.7)

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

#B3A5D0

Wisteria · Silver · Lilac Purple

HEX

#B3A5D0

RGB

rgb(179, 165, 208)

HSL

hsl(260, 31%, 73%)

HSB

hsb(260, 21%, 82%)

CMYK

cmyk(14%, 21%, 0%, 18%)

Oklch

oklch(74.8% 0.063 299.8)

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

#9884C1

Wisteria · DarkGray · Lilac Purple

HEX

#9884C1

RGB

rgb(152, 132, 193)

HSL

hsl(260, 33%, 64%)

HSB

hsb(260, 32%, 76%)

CMYK

cmyk(21%, 32%, 0%, 24%)

Oklch

oklch(65.4% 0.092 298.9)

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

#7657B5

Deep Indigo · SlateBlue · Violet

HEX

#7657B5

RGB

rgb(118, 87, 181)

HSL

hsl(260, 39%, 53%)

HSB

hsb(260, 52%, 71%)

CMYK

cmyk(35%, 52%, 0%, 29%)

Oklch

oklch(53.3% 0.144 296.4)

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

#5C3E9C

Deep Indigo · DarkSlateBlue · Navy Blue

HEX

#5C3E9C

RGB

rgb(92, 62, 156)

HSL

hsl(259, 43%, 43%)

HSB

hsb(259, 60%, 61%)

CMYK

cmyk(41%, 60%, 0%, 39%)

Oklch

oklch(44.8% 0.147 294.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D1CADE

D7DECA

Analogous

CACDDE

D1CADE

DBCADE

Triadic

D1CADE

DED1CA

CADED1

Split-Comp.

D1CADE

DEDBCA

CDDECA

Tetradic

D1CADE

DECACD

D7DECA

CADEDB

Contrast Matrix WCAG 2.1 Contrast

D1CADE	B3A5D0	9884C1	7657B5	5C3E9C
—	1.4 Fail	2.1 Fail	3.5 AA Large	5.0 AA
1.4 Fail	—	1.4 Fail	2.4 Fail	3.5 AA Large
2.1 Fail	1.4 Fail	—	1.7 Fail	2.4 Fail
3.5 AA Large	2.4 Fail	1.7 Fail	—	1.4 Fail
5.0 AA	3.5 AA Large	2.4 Fail	1.4 Fail	—

White BG

1.6Fail

2.3Fail

3.3AA Large

5.5AA

8.0AAA

Black BG

13.2AAA

9.2AAA

6.4AA

3.8AA Large

2.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECED9

ADADC6

8F8FB2

69689E

4F4F85

Deuteranopia

CECFD8

AEAFC3

9192AF

6A6D99

515380

Tritanopia

D1D5D5

B2BDBC

97A7A4

748C88

5A736F

Achromatopsia

CECECE

AEAEAE

919191

6B6B6B

525252

Shades & Tints Shades & Tints

#D1CADE

Dark

Light

#B3A5D0

Dark

Light

#9884C1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d1cade;
  --color-2: #b3a5d0;
  --color-3: #9884c1;
  --color-4: #7657b5;
  --color-5: #5c3e9c;
}

SCSS

$color-1: #d1cade;
$color-2: #b3a5d0;
$color-3: #9884c1;
$color-4: #7657b5;
$color-5: #5c3e9c;

TAILWIND

colors: {
  'brand-1': '#d1cade',
  'brand-2': '#b3a5d0',
  'brand-3': '#9884c1',
  'brand-4': '#7657b5',
  'brand-5': '#5c3e9c',
}

RGB Array

[209, 202, 222], [179, 165, 208], [152, 132, 193], [118, 87, 181], [92, 62, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D1CADE, #B3A5D0, #9884C1, #7657B5, #5C3E9C 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: #d1cade; --color-2: #b3a5d0; --color-3: #9884c1; --color-4: #7657b5; --color-5: #5c3e9c. 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