#B8B7CD + #CEC1D1 + #D7D1E0 + #DADFF2 + #EBF5FF · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8B7CD

Wisteria · Silver · Cobalt Blue

HEX

#B8B7CD

RGB

rgb(184, 183, 205)

HSL

hsl(243, 18%, 76%)

HSB

hsb(243, 11%, 80%)

CMYK

cmyk(10%, 11%, 0%, 20%)

Oklch

oklch(78.7% 0.031 287.8)

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

#CEC1D1

Lilac · LightGray · Lilac Purple

HEX

#CEC1D1

RGB

rgb(206, 193, 209)

HSL

hsl(289, 15%, 79%)

HSB

hsb(289, 8%, 82%)

CMYK

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

Oklch

oklch(82.6% 0.026 319.9)

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

#D7D1E0

Wisteria · LightGray · Lavender

HEX

#D7D1E0

RGB

rgb(215, 209, 224)

HSL

hsl(264, 19%, 85%)

HSB

hsb(264, 7%, 88%)

CMYK

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

Oklch

oklch(87.0% 0.021 304.0)

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

#DADFF2

Azure · Lavender · Sky Blue

HEX

#DADFF2

RGB

rgb(218, 223, 242)

HSL

hsl(227, 48%, 90%)

HSB

hsb(227, 10%, 95%)

CMYK

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

Oklch

oklch(90.6% 0.026 274.1)

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

#EBF5FF

Azure · Lavender · Sky Blue

HEX

#EBF5FF

RGB

rgb(235, 245, 255)

HSL

hsl(210, 100%, 96%)

HSB

hsb(210, 8%, 100%)

CMYK

cmyk(8%, 4%, 0%, 0%)

Oklch

oklch(96.6% 0.017 248.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B7CD

CCCDB7

Analogous

B7C1CD

B8B7CD

C3B7CD

Triadic

B8B7CD

CDB8B7

B7CDB8

Split-Comp.

B8B7CD

CDC3B7

C1CDB7

Tetradic

B8B7CD

CDB7C1

CCCDB7

B7CDC3

Contrast Matrix WCAG 2.1 Contrast

B8B7CD	CEC1D1	D7D1E0	DADFF2	EBF5FF
—	1.1 Fail	1.3 Fail	1.5 Fail	1.8 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	1.6 Fail
1.3 Fail	1.2 Fail	—	1.1 Fail	1.4 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.8 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

2.0Fail

1.7Fail

1.5Fail

1.3Fail

1.1Fail

Black BG

10.7AAA

12.2AAA

14.1AAA

15.8AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8C8

C8C8CD

D4D4DC

DCDCED

EFEFFD

Deuteranopia

B8B8C6

C9CACC

D5D5DB

DCDCEC

EFEEFC

Tritanopia

B8C3C3

CDCAC9

D7DAD9

DAEAE9

ECFBFA

Achromatopsia

BABABA

C7C7C7

D5D5D5

E0E0E0

F3F3F3

Shades & Tints Shades & Tints

#B8B7CD

Dark

Light

#CEC1D1

Dark

Light

#D7D1E0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b7cd;
  --color-2: #cec1d1;
  --color-3: #d7d1e0;
  --color-4: #dadff2;
  --color-5: #ebf5ff;
}

SCSS

$color-1: #b8b7cd;
$color-2: #cec1d1;
$color-3: #d7d1e0;
$color-4: #dadff2;
$color-5: #ebf5ff;

TAILWIND

colors: {
  'brand-1': '#b8b7cd',
  'brand-2': '#cec1d1',
  'brand-3': '#d7d1e0',
  'brand-4': '#dadff2',
  'brand-5': '#ebf5ff',
}

RGB Array

[184, 183, 205], [206, 193, 209], [215, 209, 224], [218, 223, 242], [235, 245, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B8B7CD, #CEC1D1, #D7D1E0, #DADFF2, #EBF5FF 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: #b8b7cd; --color-2: #cec1d1; --color-3: #d7d1e0; --color-4: #dadff2; --color-5: #ebf5ff. 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 cool-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