#D8DBEC + #CEC7D9 + #D3AFBB + #F7BF9A + #EDDBC7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8DBEC

Azure · Lavender · Sky Blue

HEX

#D8DBEC

RGB

rgb(216, 219, 236)

HSL

hsl(231, 34%, 89%)

HSB

hsb(231, 8%, 93%)

CMYK

cmyk(8%, 7%, 0%, 7%)

Oklch

oklch(89.4% 0.023 277.9)

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

#CEC7D9

Wisteria · LightGray · Lavender

HEX

#CEC7D9

RGB

rgb(206, 199, 217)

HSL

hsl(263, 19%, 82%)

HSB

hsb(263, 8%, 85%)

CMYK

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

Oklch

oklch(84.1% 0.026 303.4)

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

#D3AFBB

Rouge · Silver · Cherry Blossom

HEX

#D3AFBB

RGB

rgb(211, 175, 187)

HSL

hsl(340, 29%, 76%)

HSB

hsb(340, 17%, 83%)

CMYK

cmyk(0%, 17%, 11%, 17%)

Oklch

oklch(78.9% 0.045 356.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F7BF9A

Apricot · BurlyWood · Peach Orange

HEX

#F7BF9A

RGB

rgb(247, 191, 154)

HSL

hsl(24, 85%, 79%)

HSB

hsb(24, 38%, 97%)

CMYK

cmyk(0%, 23%, 38%, 3%)

Oklch

oklch(84.6% 0.081 54.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EDDBC7

Goose Yellow · Bisque · Peach Orange

HEX

#EDDBC7

RGB

rgb(237, 219, 199)

HSL

hsl(32, 51%, 85%)

HSB

hsb(32, 16%, 93%)

CMYK

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

Oklch

oklch(90.1% 0.033 70.3)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8DBEC

ECEAD9

Analogous

D9E6EC

D8DBEC

E0D9EC

Triadic

D8DBEC

ECD9DC

DCECD9

Split-Comp.

D8DBEC

ECE0D9

E6ECD9

Tetradic

D8DBEC

ECD9E6

ECEAD9

D9ECE0

Contrast Matrix WCAG 2.1 Contrast

D8DBEC	CEC7D9	D3AFBB	F7BF9A	EDDBC7
—	1.2 Fail	1.4 Fail	1.2 Fail	1.0 Fail
1.2 Fail	—	1.2 Fail	1.0 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.2 Fail	1.0 Fail	1.2 Fail	—	1.2 Fail
1.0 Fail	1.2 Fail	1.5 Fail	1.2 Fail	—

White BG

1.4Fail

1.6Fail

2.0Fail

1.6Fail

1.3Fail

Black BG

15.3AAA

12.8AAA

10.6AAA

12.9AAA

15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D9D9E8

CBCBD5

C3C3B8

DFDEA3

E5E5CC

Deuteranopia

D9D9E7

CBCCD4

C6C8B7

E2E6A5

E6E8CD

Tritanopia

D8E5E4

CED1D0

D1B6B5

F4AAAC

ECD0D1

Achromatopsia

DCDCDC

CBCBCB

BBBBBB

CCCCCC

DEDEDE

Shades & Tints Shades & Tints

#D8DBEC

Dark

Light

#CEC7D9

Dark

Light

#D3AFBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8dbec;
  --color-2: #cec7d9;
  --color-3: #d3afbb;
  --color-4: #f7bf9a;
  --color-5: #eddbc7;
}

SCSS

$color-1: #d8dbec;
$color-2: #cec7d9;
$color-3: #d3afbb;
$color-4: #f7bf9a;
$color-5: #eddbc7;

TAILWIND

colors: {
  'brand-1': '#d8dbec',
  'brand-2': '#cec7d9',
  'brand-3': '#d3afbb',
  'brand-4': '#f7bf9a',
  'brand-5': '#eddbc7',
}

RGB Array

[216, 219, 236], [206, 199, 217], [211, 175, 187], [247, 191, 154], [237, 219, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8DBEC, #CEC7D9, #D3AFBB, #F7BF9A, #EDDBC7 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: #d8dbec; --color-2: #cec7d9; --color-3: #d3afbb; --color-4: #f7bf9a; --color-5: #eddbc7. 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