#B0CADE + #BCD3DD + #D1E1DB + #FAFED6 + #E5EFD8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0CADE

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#B0CADE

RGB

rgb(176, 202, 222)

HSL

hsl(206, 41%, 78%)

HSB

hsb(206, 21%, 87%)

CMYK

cmyk(21%, 9%, 0%, 13%)

Oklch

oklch(82.6% 0.040 241.1)

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

#BCD3DD

Sky Blue · LightBlue · Glacier Blue

HEX

#BCD3DD

RGB

rgb(188, 211, 221)

HSL

hsl(198, 33%, 80%)

HSB

hsb(198, 15%, 87%)

CMYK

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

Oklch

oklch(85.3% 0.028 225.8)

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

#D1E1DB

Jade · LightGray · Mint Green

HEX

#D1E1DB

RGB

rgb(209, 225, 219)

HSL

hsl(157, 21%, 85%)

HSB

hsb(157, 7%, 88%)

CMYK

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

Oklch

oklch(89.6% 0.019 171.5)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#FAFED6

Fresh Green · LightYellow · Lemon Cream

HEX

#FAFED6

RGB

rgb(250, 254, 214)

HSL

hsl(66, 95%, 92%)

HSB

hsb(66, 16%, 100%)

CMYK

cmyk(2%, 0%, 16%, 0%)

Oklch

oklch(98.4% 0.052 112.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#E5EFD8

Willow Green · Beige · Mint Green

HEX

#E5EFD8

RGB

rgb(229, 239, 216)

HSL

hsl(86, 42%, 89%)

HSB

hsb(86, 10%, 94%)

CMYK

cmyk(4%, 0%, 10%, 6%)

Oklch

oklch(93.8% 0.032 126.3)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0CADE

DEC4B0

Analogous

B0DEDB

B0CADE

B0B3DE

Triadic

B0CADE

DEB0CA

CADEB0

Split-Comp.

B0CADE

DEB0B3

DEDBB0

Tetradic

B0CADE

DBB0DE

DEC4B0

B3DEB0

Contrast Matrix WCAG 2.1 Contrast

B0CADE	BCD3DD	D1E1DB	FAFED6	E5EFD8
—	1.1 Fail	1.3 Fail	1.6 Fail	1.4 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	1.3 Fail
1.3 Fail	1.1 Fail	—	1.3 Fail	1.1 Fail
1.6 Fail	1.5 Fail	1.3 Fail	—	1.1 Fail
1.4 Fail	1.3 Fail	1.1 Fail	1.1 Fail	—

White BG

1.7Fail

1.6Fail

1.4Fail

1.0Fail

1.2Fail

Black BG

12.3AAA

13.5AAA

15.5AAA

20.2AAA

17.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBD9

C6C6DB

D8D8DC

FCFCE0

E9E9DE

Deuteranopia

BAB8D8

C5C3DA

D7D6DD

FCFBE2

E9E8DF

Tritanopia

B1D5D5

BDD9D8

D2DEDE

FAE7E9

E5E2E3

Achromatopsia

C5C5C5

CDCDCD

DCDCDC

F8F8F8

E9E9E9

Shades & Tints Shades & Tints

#B0CADE

Dark

Light

#BCD3DD

Dark

Light

#D1E1DB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0cade;
  --color-2: #bcd3dd;
  --color-3: #d1e1db;
  --color-4: #fafed6;
  --color-5: #e5efd8;
}

SCSS

$color-1: #b0cade;
$color-2: #bcd3dd;
$color-3: #d1e1db;
$color-4: #fafed6;
$color-5: #e5efd8;

TAILWIND

colors: {
  'brand-1': '#b0cade',
  'brand-2': '#bcd3dd',
  'brand-3': '#d1e1db',
  'brand-4': '#fafed6',
  'brand-5': '#e5efd8',
}

RGB Array

[176, 202, 222], [188, 211, 221], [209, 225, 219], [250, 254, 214], [229, 239, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0CADE, #BCD3DD, #D1E1DB, #FAFED6, #E5EFD8 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: #b0cade; --color-2: #bcd3dd; --color-3: #d1e1db; --color-4: #fafed6; --color-5: #e5efd8. 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