#DCB5F7 + #D4C0F1 + #CCCCEB + #C6D6E5 + #BEE2DE · muted - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DCB5F7

Lilac · LightGray · Lavender

HEX

#DCB5F7

RGB

rgb(220, 181, 247)

HSL

hsl(275, 80%, 84%)

HSB

hsb(275, 27%, 97%)

CMYK

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

Oklch

oklch(82.9% 0.099 311.1)

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

#D4C0F1

Wisteria · LightGray · Lavender

HEX

#D4C0F1

RGB

rgb(212, 192, 241)

HSL

hsl(264, 64%, 85%)

HSB

hsb(264, 20%, 95%)

CMYK

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

Oklch

oklch(84.0% 0.071 303.5)

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

#CCCCEB

Wisteria · LightGray · Sky Blue

HEX

#CCCCEB

RGB

rgb(204, 204, 235)

HSL

hsl(240, 44%, 86%)

HSB

hsb(240, 13%, 92%)

CMYK

cmyk(13%, 13%, 0%, 8%)

Oklch

oklch(85.5% 0.043 285.5)

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

#C6D6E5

Sky Blue · LightGray · Sky Blue

HEX

#C6D6E5

RGB

rgb(198, 214, 229)

HSL

hsl(209, 37%, 84%)

HSB

hsb(209, 14%, 90%)

CMYK

cmyk(14%, 7%, 0%, 10%)

Oklch

oklch(86.9% 0.027 246.4)

Traditional「Sky Blue」· Paint「Sky Blue」· Creative Twilight Haze

#BEE2DE

Jade · LightBlue · Glacier Blue

HEX

#BEE2DE

RGB

rgb(190, 226, 222)

HSL

hsl(173, 38%, 82%)

HSB

hsb(173, 16%, 89%)

CMYK

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

Oklch

oklch(88.6% 0.038 188.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCB5F7

D1F7B6

Analogous

BBB6F7

DCB5F7

F7B6F1

Triadic

DCB5F7

F7DCB6

B6F7DC

Split-Comp.

DCB5F7

F1F7B6

B6F7BB

Tetradic

DCB5F7

F7BBB6

D1F7B6

B6F1F7

Contrast Matrix WCAG 2.1 Contrast

DCB5F7	D4C0F1	CCCCEB	C6D6E5	BEE2DE
—	1.1 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.8Fail

1.7Fail

1.6Fail

1.5Fail

1.4Fail

Black BG

12.0AAA

12.6AAA

13.4AAA

14.2AAA

15.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBE7

CBCBE5

CCCCE3

CDCDE1

CECEDF

Deuteranopia

CDD0E3

CDCEE2

CCCCE2

CCCBE1

CCC9DF

Tritanopia

DADAD8

D3DCDA

CCDEDC

C7DFDE

C0E0E0

Achromatopsia

C8C8C8

CCCCCC

D0D0D0

D3D3D3

D7D7D7

Shades & Tints Shades & Tints

#DCB5F7

Dark

Light

#D4C0F1

Dark

Light

#CCCCEB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcb5f7;
  --color-2: #d4c0f1;
  --color-3: #cccceb;
  --color-4: #c6d6e5;
  --color-5: #bee2de;
}

SCSS

$color-1: #dcb5f7;
$color-2: #d4c0f1;
$color-3: #cccceb;
$color-4: #c6d6e5;
$color-5: #bee2de;

TAILWIND

colors: {
  'brand-1': '#dcb5f7',
  'brand-2': '#d4c0f1',
  'brand-3': '#cccceb',
  'brand-4': '#c6d6e5',
  'brand-5': '#bee2de',
}

RGB Array

[220, 181, 247], [212, 192, 241], [204, 204, 235], [198, 214, 229], [190, 226, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This muted-style palette of #DCB5F7, #D4C0F1, #CCCCEB, #C6D6E5, #BEE2DE 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: #dcb5f7; --color-2: #d4c0f1; --color-3: #cccceb; --color-4: #c6d6e5; --color-5: #bee2de. 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 muted-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