#B8B1D2 + #BCC3EF + #C1D5D4 + #BFE0E7 + #E2EDF3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8B1D2

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B8B1D2

RGB

rgb(184, 177, 210)

HSL

hsl(253, 27%, 76%)

HSB

hsb(253, 16%, 82%)

CMYK

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

Oklch

oklch(77.7% 0.047 295.0)

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

#BCC3EF

Azure · LightSteelBlue · Sky Blue

HEX

#BCC3EF

RGB

rgb(188, 195, 239)

HSL

hsl(232, 61%, 84%)

HSB

hsb(232, 21%, 94%)

CMYK

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

Oklch

oklch(82.6% 0.062 277.9)

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

#C1D5D4

Jade · LightGray · Glacier Blue

HEX

#C1D5D4

RGB

rgb(193, 213, 212)

HSL

hsl(177, 19%, 80%)

HSB

hsb(177, 9%, 84%)

CMYK

cmyk(9%, 0%, 0%, 16%)

Oklch

oklch(85.8% 0.022 193.1)

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

#BFE0E7

Sky Blue · LightBlue · Glacier Blue

HEX

#BFE0E7

RGB

rgb(191, 224, 231)

HSL

hsl(191, 45%, 83%)

HSB

hsb(191, 17%, 91%)

CMYK

cmyk(17%, 3%, 0%, 9%)

Oklch

oklch(88.5% 0.036 211.9)

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

#E2EDF3

Sky Blue · Lavender · Sky Blue

HEX

#E2EDF3

RGB

rgb(226, 237, 243)

HSL

hsl(201, 41%, 92%)

HSB

hsb(201, 7%, 95%)

CMYK

cmyk(7%, 2%, 0%, 5%)

Oklch

oklch(94.0% 0.014 231.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B1D2

CBD2B1

Analogous

B1BBD2

B8B1D2

C9B1D2

Triadic

B8B1D2

D2B8B1

B1D2B8

Split-Comp.

B8B1D2

D2C9B1

BBD2B1

Tetradic

B8B1D2

D2B1BB

CBD2B1

B1D2C9

Contrast Matrix WCAG 2.1 Contrast

B8B1D2	BCC3EF	C1D5D4	BFE0E7	E2EDF3
—	1.2 Fail	1.3 Fail	1.5 Fail	1.7 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.4 Fail
1.3 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.5 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.7 Fail	1.4 Fail	1.3 Fail	1.2 Fail	—

White BG

2.0Fail

1.7Fail

1.5Fail

1.4Fail

1.2Fail

Black BG

10.3AAA

12.2AAA

13.7AAA

15.0AAA

17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5CA

BFBFE4

CACAD4

CDCEE5

E7E7F2

Deuteranopia

B5B6C8

BFBEE2

C9C7D4

CBC9E5

E6E5F1

Tritanopia

B8C4C2

BCDCDA

C2D4D4

C1E4E4

E3F0F0

Achromatopsia

B7B7B7

C6C6C6

CFCFCF

D7D7D7

EAEAEA

Shades & Tints Shades & Tints

#B8B1D2

Dark

Light

#BCC3EF

Dark

Light

#C1D5D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b1d2;
  --color-2: #bcc3ef;
  --color-3: #c1d5d4;
  --color-4: #bfe0e7;
  --color-5: #e2edf3;
}

SCSS

$color-1: #b8b1d2;
$color-2: #bcc3ef;
$color-3: #c1d5d4;
$color-4: #bfe0e7;
$color-5: #e2edf3;

TAILWIND

colors: {
  'brand-1': '#b8b1d2',
  'brand-2': '#bcc3ef',
  'brand-3': '#c1d5d4',
  'brand-4': '#bfe0e7',
  'brand-5': '#e2edf3',
}

RGB Array

[184, 177, 210], [188, 195, 239], [193, 213, 212], [191, 224, 231], [226, 237, 243]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8B1D2, #BCC3EF, #C1D5D4, #BFE0E7, #E2EDF3 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: #b8b1d2; --color-2: #bcc3ef; --color-3: #c1d5d4; --color-4: #bfe0e7; --color-5: #e2edf3. 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