#D4D0F2 + #C0BDF6 + #C29DBA + #D977CC + #8C76B0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4D0F2

Wisteria · Lavender · Sky Blue

HEX

#D4D0F2

RGB

rgb(212, 208, 242)

HSL

hsl(247, 57%, 88%)

HSB

hsb(247, 14%, 95%)

CMYK

cmyk(12%, 14%, 0%, 5%)

Oklch

oklch(87.1% 0.047 290.8)

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

#C0BDF6

Wisteria · LightSteelBlue · Sky Blue

HEX

#C0BDF6

RGB

rgb(192, 189, 246)

HSL

hsl(243, 76%, 85%)

HSB

hsb(243, 23%, 96%)

CMYK

cmyk(22%, 23%, 0%, 4%)

Oklch

oklch(82.0% 0.080 286.9)

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

#C29DBA

Mauve · DarkGray · Lilac Purple

HEX

#C29DBA

RGB

rgb(194, 157, 186)

HSL

hsl(313, 23%, 69%)

HSB

hsb(313, 19%, 76%)

CMYK

cmyk(0%, 19%, 4%, 24%)

Oklch

oklch(73.9% 0.059 333.8)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#D977CC

Mauve · Orchid · Lilac Purple

HEX

#D977CC

RGB

rgb(217, 119, 204)

HSL

hsl(308, 56%, 66%)

HSB

hsb(308, 45%, 85%)

CMYK

cmyk(0%, 45%, 6%, 15%)

Oklch

oklch(70.6% 0.160 332.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#8C76B0

Deep Indigo · LightSlateGray · Violet

HEX

#8C76B0

RGB

rgb(140, 118, 176)

HSL

hsl(263, 27%, 58%)

HSB

hsb(263, 33%, 69%)

CMYK

cmyk(20%, 33%, 0%, 31%)

Oklch

oklch(60.9% 0.089 301.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4D0F2

EEF2CF

Analogous

CFDCF2

D4D0F2

E4CFF2

Triadic

D4D0F2

F2D3CF

CFF2D3

Split-Comp.

D4D0F2

F2E4CF

DCF2CF

Tetradic

D4D0F2

F2CFDC

EEF2CF

CFF2E4

Contrast Matrix WCAG 2.1 Contrast

D4D0F2	C0BDF6	C29DBA	D977CC	8C76B0
—	1.2 Fail	1.6 Fail	1.9 Fail	2.6 Fail
1.2 Fail	—	1.3 Fail	1.6 Fail	2.2 Fail
1.6 Fail	1.3 Fail	—	1.2 Fail	1.7 Fail
1.9 Fail	1.6 Fail	1.2 Fail	—	1.4 Fail
2.6 Fail	2.2 Fail	1.7 Fail	1.4 Fail	—

White BG

1.5Fail

1.8Fail

2.4Fail

2.8Fail

3.9AA Large

Black BG

14.1AAA

11.9AAA

8.8AAA

7.5AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2EA

BFBFE8

B2B2B3

AFAEB7

8282A2

Deuteranopia

D3D3E8

BFBFE5

B4B7B1

B4BCB2

84859F

Tritanopia

D4E3E2

C0DDDB

C0ADAC

D4A7A4

8B9794

Achromatopsia

D5D5D5

C4C4C4

ABABAB

9E9E9E

838383

Shades & Tints Shades & Tints

#D4D0F2

Dark

Light

#C0BDF6

Dark

Light

#C29DBA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4d0f2;
  --color-2: #c0bdf6;
  --color-3: #c29dba;
  --color-4: #d977cc;
  --color-5: #8c76b0;
}

SCSS

$color-1: #d4d0f2;
$color-2: #c0bdf6;
$color-3: #c29dba;
$color-4: #d977cc;
$color-5: #8c76b0;

TAILWIND

colors: {
  'brand-1': '#d4d0f2',
  'brand-2': '#c0bdf6',
  'brand-3': '#c29dba',
  'brand-4': '#d977cc',
  'brand-5': '#8c76b0',
}

RGB Array

[212, 208, 242], [192, 189, 246], [194, 157, 186], [217, 119, 204], [140, 118, 176]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4D0F2, #C0BDF6, #C29DBA, #D977CC, #8C76B0 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: #d4d0f2; --color-2: #c0bdf6; --color-3: #c29dba; --color-4: #d977cc; --color-5: #8c76b0. 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