#BDF2E0 + #B6DFE5 + #DBC8F5 + #E5BAE7 + #B6AED7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BDF2E0

Jade · LightBlue · Glacier Blue

HEX

#BDF2E0

RGB

rgb(189, 242, 224)

HSL

hsl(160, 67%, 85%)

HSB

hsb(160, 22%, 95%)

CMYK

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

Oklch

oklch(92.0% 0.059 172.2)

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

#B6DFE5

Sky Blue · LightBlue · Glacier Blue

HEX

#B6DFE5

RGB

rgb(182, 223, 229)

HSL

hsl(188, 47%, 81%)

HSB

hsb(188, 21%, 90%)

CMYK

cmyk(21%, 3%, 0%, 10%)

Oklch

oklch(87.6% 0.044 207.3)

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

#DBC8F5

Wisteria · Lavender · Lavender

HEX

#DBC8F5

RGB

rgb(219, 200, 245)

HSL

hsl(265, 69%, 87%)

HSB

hsb(265, 18%, 96%)

CMYK

cmyk(11%, 18%, 0%, 4%)

Oklch

oklch(86.3% 0.065 304.3)

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

#E5BAE7

Lilac · LightGray · Lavender

HEX

#E5BAE7

RGB

rgb(229, 186, 231)

HSL

hsl(297, 48%, 82%)

HSB

hsb(297, 19%, 91%)

CMYK

cmyk(1%, 19%, 0%, 9%)

Oklch

oklch(84.1% 0.077 324.8)

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

#B6AED7

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B6AED7

RGB

rgb(182, 174, 215)

HSL

hsl(252, 34%, 76%)

HSB

hsb(252, 19%, 84%)

CMYK

cmyk(15%, 19%, 0%, 16%)

Oklch

oklch(77.1% 0.058 293.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BDF2E0

F2BFD0

Analogous

BFF2C8

BDF2E0

BFEAF2

Triadic

BDF2E0

E1BFF2

F2E1BF

Split-Comp.

BDF2E0

F2BFEA

F2C8BF

Tetradic

BDF2E0

C8BFF2

F2BFD0

EAF2BF

Contrast Matrix WCAG 2.1 Contrast

BDF2E0	B6DFE5	DBC8F5	E5BAE7	B6AED7
—	1.2 Fail	1.2 Fail	1.4 Fail	1.7 Fail
1.2 Fail	—	1.1 Fail	1.2 Fail	1.5 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.4 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.2 Fail
1.7 Fail	1.5 Fail	1.4 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.5Fail

1.7Fail

2.1Fail

Black BG

16.9AAA

14.7AAA

13.6AAA

12.5AAA

10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4E4

C8C8E4

D3D3EA

D2D2DC

B3B2CD

Deuteranopia

D1CDE5

C5C2E3

D4D5E8

D5D8DA

B3B4CB

Tritanopia

C0E8E9

B8E2E2

DAE2E0

E3D4D2

B6C5C4

Achromatopsia

E0E0E0

D3D3D3

CCCCCC

B5B5B5

Shades & Tints Shades & Tints

#BDF2E0

Dark

Light

#B6DFE5

Dark

Light

#DBC8F5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bdf2e0;
  --color-2: #b6dfe5;
  --color-3: #dbc8f5;
  --color-4: #e5bae7;
  --color-5: #b6aed7;
}

SCSS

$color-1: #bdf2e0;
$color-2: #b6dfe5;
$color-3: #dbc8f5;
$color-4: #e5bae7;
$color-5: #b6aed7;

TAILWIND

colors: {
  'brand-1': '#bdf2e0',
  'brand-2': '#b6dfe5',
  'brand-3': '#dbc8f5',
  'brand-4': '#e5bae7',
  'brand-5': '#b6aed7',
}

RGB Array

[189, 242, 224], [182, 223, 229], [219, 200, 245], [229, 186, 231], [182, 174, 215]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BDF2E0, #B6DFE5, #DBC8F5, #E5BAE7, #B6AED7 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: #bdf2e0; --color-2: #b6dfe5; --color-3: #dbc8f5; --color-4: #e5bae7; --color-5: #b6aed7. 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