#D3CDD4 + #D3BAD9 + #C19CD9 + #B2F7E8 + #DEFAF3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D3CDD4

Lilac · LightGray · Pearl Gray

HEX

#D3CDD4

RGB

rgb(211, 205, 212)

HSL

hsl(291, 8%, 82%)

HSB

hsb(291, 3%, 83%)

CMYK

cmyk(0%, 3%, 0%, 17%)

Oklch

oklch(85.5% 0.012 321.3)

Traditional「Lilac」· Paint「Pearl Gray」· Creative Silver Lining

#D3BAD9

Lilac · LightGray · Lilac Purple

HEX

#D3BAD9

RGB

rgb(211, 186, 217)

HSL

hsl(288, 29%, 79%)

HSB

hsb(288, 14%, 85%)

CMYK

cmyk(3%, 14%, 0%, 15%)

Oklch

oklch(82.0% 0.051 319.7)

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

#C19CD9

Lilac · LightSteelBlue · Lilac Purple

HEX

#C19CD9

RGB

rgb(193, 156, 217)

HSL

hsl(276, 45%, 73%)

HSB

hsb(276, 28%, 85%)

CMYK

cmyk(11%, 28%, 0%, 15%)

Oklch

oklch(74.7% 0.095 311.7)

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

#B2F7E8

Jade · LightBlue · Glacier Blue

HEX

#B2F7E8

RGB

rgb(178, 247, 232)

HSL

hsl(167, 81%, 83%)

HSB

hsb(167, 28%, 97%)

CMYK

cmyk(28%, 0%, 6%, 3%)

Oklch

oklch(92.6% 0.072 179.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#DEFAF3

Jade · Lavender · Glacier Blue

HEX

#DEFAF3

RGB

rgb(222, 250, 243)

HSL

hsl(165, 74%, 93%)

HSB

hsb(165, 11%, 98%)

CMYK

cmyk(11%, 0%, 3%, 2%)

Oklch

oklch(96.3% 0.031 178.9)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D3CDD4

CFD5CD

Analogous

D0CDD5

D3CDD4

D5CDD2

Triadic

D3CDD4

D5D4CD

CDD5D4

Split-Comp.

D3CDD4

D2D5CD

CDD5D0

Tetradic

D3CDD4

D5D0CD

CFD5CD

CDD2D5

Contrast Matrix WCAG 2.1 Contrast

D3CDD4	D3BAD9	C19CD9	B2F7E8	DEFAF3
—	1.1 Fail	1.5 Fail	1.3 Fail	1.4 Fail
1.1 Fail	—	1.3 Fail	1.5 Fail	1.6 Fail
1.5 Fail	1.3 Fail	—	1.9 Fail	2.1 Fail
1.3 Fail	1.5 Fail	1.9 Fail	—	1.1 Fail
1.4 Fail	1.6 Fail	2.1 Fail	1.1 Fail	—

White BG

1.6Fail

1.8Fail

2.3Fail

1.2Fail

1.1Fail

Black BG

13.5AAA

11.8AAA

9.0AAA

17.4AAA

19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0D2

C8C8D1

B1B1CA

D0D0EC

EAEAF5

Deuteranopia

D1D1D2

CACCD0

B3B6C7

CCC7EC

E9E6F5

Tritanopia

D3D1D1

D2CCCA

BFBFBC

B5EEEF

DFF6F6

Achromatopsia

D0D0D0

C5C5C5

AEAEAE

E1E1E1

F1F1F1

Shades & Tints Shades & Tints

#D3CDD4

Dark

Light

#D3BAD9

Dark

Light

#C19CD9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d3cdd4;
  --color-2: #d3bad9;
  --color-3: #c19cd9;
  --color-4: #b2f7e8;
  --color-5: #defaf3;
}

SCSS

$color-1: #d3cdd4;
$color-2: #d3bad9;
$color-3: #c19cd9;
$color-4: #b2f7e8;
$color-5: #defaf3;

TAILWIND

colors: {
  'brand-1': '#d3cdd4',
  'brand-2': '#d3bad9',
  'brand-3': '#c19cd9',
  'brand-4': '#b2f7e8',
  'brand-5': '#defaf3',
}

RGB Array

[211, 205, 212], [211, 186, 217], [193, 156, 217], [178, 247, 232], [222, 250, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D3CDD4, #D3BAD9, #C19CD9, #B2F7E8, #DEFAF3 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: #d3cdd4; --color-2: #d3bad9; --color-3: #c19cd9; --color-4: #b2f7e8; --color-5: #defaf3. 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