#D0BCE0 + #D8D4E2 + #DFE9EB + #E7F5DC + #FFF9DE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D0BCE0

Lilac · LightGray · Lavender

HEX

#D0BCE0

RGB

rgb(208, 188, 224)

HSL

hsl(273, 37%, 81%)

HSB

hsb(273, 16%, 88%)

CMYK

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

Oklch

oklch(82.3% 0.054 310.1)

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

#D8D4E2

Wisteria · LightGray · Sky Blue

HEX

#D8D4E2

RGB

rgb(216, 212, 226)

HSL

hsl(257, 19%, 86%)

HSB

hsb(257, 6%, 89%)

CMYK

cmyk(4%, 6%, 0%, 11%)

Oklch

oklch(87.7% 0.020 299.0)

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

#DFE9EB

Sky Blue · Lavender · Glacier Blue

HEX

#DFE9EB

RGB

rgb(223, 233, 235)

HSL

hsl(190, 23%, 90%)

HSB

hsb(190, 5%, 92%)

CMYK

cmyk(5%, 1%, 0%, 8%)

Oklch

oklch(92.7% 0.011 211.0)

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

#E7F5DC

Emerald · Beige · Mint Green

HEX

#E7F5DC

RGB

rgb(231, 245, 220)

HSL

hsl(94, 56%, 91%)

HSB

hsb(94, 10%, 96%)

CMYK

cmyk(6%, 0%, 10%, 4%)

Oklch

oklch(95.3% 0.036 131.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#FFF9DE

Goose Yellow · LightYellow · Lemon Cream

HEX

#FFF9DE

RGB

rgb(255, 249, 222)

HSL

hsl(49, 100%, 94%)

HSB

hsb(49, 13%, 100%)

CMYK

cmyk(0%, 2%, 13%, 0%)

Oklch

oklch(98.0% 0.036 96.7)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D0BCE0

CDE0BD

Analogous

BEBDE0

D0BCE0

E0BDDF

Triadic

D0BCE0

E0D0BD

BDE0D0

Split-Comp.

D0BCE0

DFE0BD

BDE0BE

Tetradic

D0BCE0

E0BEBD

CDE0BD

BDDFE0

Contrast Matrix WCAG 2.1 Contrast

D0BCE0	D8D4E2	DFE9EB	E7F5DC	FFF9DE
—	1.2 Fail	1.4 Fail	1.5 Fail	1.7 Fail
1.2 Fail	—	1.2 Fail	1.3 Fail	1.4 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.2 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.1 Fail
1.7 Fail	1.4 Fail	1.2 Fail	1.1 Fail	—

White BG

1.8Fail

1.5Fail

1.2Fail

1.1Fail

Black BG

12.0AAA

14.4AAA

17.0AAA

18.5AAA

19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7D7

D6D6DF

E3E3EB

EDEDE2

FCFCE5

Deuteranopia

C9CAD5

D7D7DE

E3E2EA

ECEBE4

FDFDE6

Tritanopia

CFD0CF

D8DCDB

E0EAEA

E8E7E8

FFEAEB

Achromatopsia

C6C6C6

D7D7D7

E6E6E6

EEEEEE

F8F8F8

Shades & Tints Shades & Tints

#D0BCE0

Dark

Light

#D8D4E2

Dark

Light

#DFE9EB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d0bce0;
  --color-2: #d8d4e2;
  --color-3: #dfe9eb;
  --color-4: #e7f5dc;
  --color-5: #fff9de;
}

SCSS

$color-1: #d0bce0;
$color-2: #d8d4e2;
$color-3: #dfe9eb;
$color-4: #e7f5dc;
$color-5: #fff9de;

TAILWIND

colors: {
  'brand-1': '#d0bce0',
  'brand-2': '#d8d4e2',
  'brand-3': '#dfe9eb',
  'brand-4': '#e7f5dc',
  'brand-5': '#fff9de',
}

RGB Array

[208, 188, 224], [216, 212, 226], [223, 233, 235], [231, 245, 220], [255, 249, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D0BCE0, #D8D4E2, #DFE9EB, #E7F5DC, #FFF9DE 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: #d0bce0; --color-2: #d8d4e2; --color-3: #dfe9eb; --color-4: #e7f5dc; --color-5: #fff9de. 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