#B8C9E3 + #DEE8F4 + #E5D3D1 + #F2BFC6 + #CAA7BB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8C9E3

Azure · LightSteelBlue · Sky Blue

HEX

#B8C9E3

RGB

rgb(184, 201, 227)

HSL

hsl(216, 43%, 81%)

HSB

hsb(216, 19%, 89%)

CMYK

cmyk(19%, 11%, 0%, 11%)

Oklch

oklch(83.1% 0.041 258.8)

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

#DEE8F4

Azure · Lavender · Sky Blue

HEX

#DEE8F4

RGB

rgb(222, 232, 244)

HSL

hsl(213, 50%, 91%)

HSB

hsb(213, 9%, 96%)

CMYK

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

Oklch

oklch(92.7% 0.020 252.9)

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

#E5D3D1

Peach Pink · LightGray · Cherry Blossom

HEX

#E5D3D1

RGB

rgb(229, 211, 209)

HSL

hsl(6, 28%, 86%)

HSB

hsb(6, 9%, 90%)

CMYK

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

Oklch

oklch(88.1% 0.020 25.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F2BFC6

Peach Pink · Pink · Cherry Blossom

HEX

#F2BFC6

RGB

rgb(242, 191, 198)

HSL

hsl(352, 66%, 85%)

HSB

hsb(352, 21%, 95%)

CMYK

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

Oklch

oklch(85.2% 0.059 9.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#CAA7BB

Mauve · Silver · Rose Pink

HEX

#CAA7BB

RGB

rgb(202, 167, 187)

HSL

hsl(326, 25%, 72%)

HSB

hsb(326, 17%, 79%)

CMYK

cmyk(0%, 17%, 7%, 21%)

Oklch

oklch(76.6% 0.049 343.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8C9E3

E3D3BA

Analogous

BADFE3

B8C9E3

BEBAE3

Triadic

B8C9E3

E3BACA

CAE3BA

Split-Comp.

B8C9E3

E3BEBA

DFE3BA

Tetradic

B8C9E3

E3BADF

E3D3BA

BAE3BE

Contrast Matrix WCAG 2.1 Contrast

B8C9E3	DEE8F4	E5D3D1	F2BFC6	CAA7BB
—	1.4 Fail	1.2 Fail	1.0 Fail	1.3 Fail
1.4 Fail	—	1.2 Fail	1.3 Fail	1.7 Fail
1.2 Fail	1.2 Fail	—	1.1 Fail	1.5 Fail
1.0 Fail	1.3 Fail	1.1 Fail	—	1.3 Fail
1.3 Fail	1.7 Fail	1.5 Fail	1.3 Fail	—

White BG

1.7Fail

1.2Fail

1.4Fail

1.6Fail

2.2Fail

Black BG

12.5AAA

17.0AAA

14.6AAA

13.0AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFC0DD

E2E2F1

DDDDD1

DCDBC4

BBBBB6

Deuteranopia

BEBDDB

E2E1F0

DEE0D2

DFE3C4

BDBFB5

Tritanopia

B9D8D7

DEEFEE

E4D2D2

EFC3C3

C8B2B2

Achromatopsia

C7C7C7

E6E6E6

D8D8D8

CFCFCF

B4B4B4

Shades & Tints Shades & Tints

#B8C9E3

Dark

Light

#DEE8F4

Dark

Light

#E5D3D1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8c9e3;
  --color-2: #dee8f4;
  --color-3: #e5d3d1;
  --color-4: #f2bfc6;
  --color-5: #caa7bb;
}

SCSS

$color-1: #b8c9e3;
$color-2: #dee8f4;
$color-3: #e5d3d1;
$color-4: #f2bfc6;
$color-5: #caa7bb;

TAILWIND

colors: {
  'brand-1': '#b8c9e3',
  'brand-2': '#dee8f4',
  'brand-3': '#e5d3d1',
  'brand-4': '#f2bfc6',
  'brand-5': '#caa7bb',
}

RGB Array

[184, 201, 227], [222, 232, 244], [229, 211, 209], [242, 191, 198], [202, 167, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8C9E3, #DEE8F4, #E5D3D1, #F2BFC6, #CAA7BB 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: #b8c9e3; --color-2: #dee8f4; --color-3: #e5d3d1; --color-4: #f2bfc6; --color-5: #caa7bb. 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