#B8BBC2 + #C8ADD2 + #DA99CC + #EB82BD + #F87B9A · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8BBC2

Azure · Silver · Pearl Gray

HEX

#B8BBC2

RGB

rgb(184, 187, 194)

HSL

hsl(222, 8%, 74%)

HSB

hsb(222, 5%, 76%)

CMYK

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

Oklch

oklch(79.2% 0.010 267.3)

Traditional「Azure」· Paint「Pearl Gray」· Creative Silver Lining

#C8ADD2

Lilac · Silver · Lilac Purple

HEX

#C8ADD2

RGB

rgb(200, 173, 210)

HSL

hsl(284, 29%, 75%)

HSB

hsb(284, 18%, 82%)

CMYK

cmyk(5%, 18%, 0%, 18%)

Oklch

oklch(78.3% 0.059 316.9)

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

#DA99CC

Mauve · Orchid · Lilac Purple

HEX

#DA99CC

RGB

rgb(218, 153, 204)

HSL

hsl(313, 47%, 73%)

HSB

hsb(313, 30%, 85%)

CMYK

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

Oklch

oklch(76.2% 0.102 334.5)

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

#EB82BD

Mauve · Orchid · Rose Pink

HEX

#EB82BD

RGB

rgb(235, 130, 189)

HSL

hsl(326, 72%, 72%)

HSB

hsb(326, 45%, 92%)

CMYK

cmyk(0%, 45%, 20%, 8%)

Oklch

oklch(73.9% 0.146 346.4)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#F87B9A

Peach Pink · LightCoral · Coral Red

HEX

#F87B9A

RGB

rgb(248, 123, 154)

HSL

hsl(345, 90%, 73%)

HSB

hsb(345, 50%, 97%)

CMYK

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

Oklch

oklch(73.4% 0.155 6.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8BBC2

C2BFB7

Analogous

B7C0C2

B8BBC2

BAB7C2

Triadic

B8BBC2

C2B7BB

BBC2B7

Split-Comp.

B8BBC2

C2BAB7

C0C2B7

Tetradic

B8BBC2

C2B7C0

C2BFB7

B7C2BA

Contrast Matrix WCAG 2.1 Contrast

B8BBC2	C8ADD2	DA99CC	EB82BD	F87B9A
—	1.1 Fail	1.2 Fail	1.3 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.9Fail

2.0Fail

2.2Fail

2.5Fail

Black BG

10.9AAA

10.4AAA

9.4AAA

8.5AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9C0

BCBCC9

BEBDC0

BEBDAF

C2C192

Deuteranopia

B9B9C0

BEC0C7

C2C7BD

C4CCAB

C9D391

Tritanopia

B8BFBF

C7C2C0

D7B6B4

E6A3A1

F28D8B

Achromatopsia

BBBBBB

B9B9B9

B2B2B2

A8A8A8

A4A4A4

Shades & Tints Shades & Tints

#B8BBC2

Dark

Light

#C8ADD2

Dark

Light

#DA99CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8bbc2;
  --color-2: #c8add2;
  --color-3: #da99cc;
  --color-4: #eb82bd;
  --color-5: #f87b9a;
}

SCSS

$color-1: #b8bbc2;
$color-2: #c8add2;
$color-3: #da99cc;
$color-4: #eb82bd;
$color-5: #f87b9a;

TAILWIND

colors: {
  'brand-1': '#b8bbc2',
  'brand-2': '#c8add2',
  'brand-3': '#da99cc',
  'brand-4': '#eb82bd',
  'brand-5': '#f87b9a',
}

RGB Array

[184, 187, 194], [200, 173, 210], [218, 153, 204], [235, 130, 189], [248, 123, 154]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #B8BBC2, #C8ADD2, #DA99CC, #EB82BD, #F87B9A 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: #b8bbc2; --color-2: #c8add2; --color-3: #da99cc; --color-4: #eb82bd; --color-5: #f87b9a. 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