← Back to Editor

#B0DDCE · #DFF2EC · #DFE5F2 · #D3DEF5 · #B1C0DE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0DDCE

Jade · LightBlue · Glacier Blue

HEX
#B0DDCE
RGB
rgb(176, 221, 206)
HSL
hsl(160, 40%, 78%)
HSB
hsb(160, 20%, 87%)
CMYK
cmyk(20%, 0%, 7%, 13%)
Oklch
oklch(86.1% 0.051 172.7)

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

#DFF2EC

Jade · Lavender · Glacier Blue

HEX
#DFF2EC
RGB
rgb(223, 242, 236)
HSL
hsl(161, 42%, 91%)
HSB
hsb(161, 8%, 95%)
CMYK
cmyk(8%, 0%, 2%, 5%)
Oklch
oklch(94.5% 0.022 175.0)

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

#DFE5F2

Azure · Lavender · Sky Blue

HEX
#DFE5F2
RGB
rgb(223, 229, 242)
HSL
hsl(221, 42%, 91%)
HSB
hsb(221, 8%, 95%)
CMYK
cmyk(8%, 5%, 0%, 5%)
Oklch
oklch(92.1% 0.019 266.0)

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

#D3DEF5

Azure · Lavender · Sky Blue

HEX
#D3DEF5
RGB
rgb(211, 222, 245)
HSL
hsl(221, 63%, 89%)
HSB
hsb(221, 14%, 96%)
CMYK
cmyk(14%, 9%, 0%, 4%)
Oklch
oklch(89.9% 0.034 265.2)

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

#B1C0DE

Azure · LightSteelBlue · Cobalt Blue

HEX
#B1C0DE
RGB
rgb(177, 192, 222)
HSL
hsl(220, 41%, 78%)
HSB
hsb(220, 20%, 87%)
CMYK
cmyk(20%, 14%, 0%, 13%)
Oklch
oklch(80.6% 0.046 264.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0DDCE
DDB0BF

Analogous

B0DDB8
B0DDCE
B0D6DD

Triadic

B0DDCE
CEB0DD
DDCEB0

Split-Comp.

B0DDCE
DDB0D6
DDB8B0

Tetradic

B0DDCE
B8B0DD
DDB0BF
D6DDB0

Contrast Matrix WCAG 2.1 Contrast

B0DDCE
DFF2EC
DFE5F2
D3DEF5
B1C0DE
—
1.3
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.3
Fail
—
1.1
Fail
1.2
Fail
1.6
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
1.4
Fail
1.2
Fail
1.6
Fail
1.5
Fail
1.4
Fail
—
White BG
1.5Fail
1.2Fail
1.3Fail
1.4Fail
1.8Fail
Black BG
14.1AAA
18.0AAA
16.6AAA
15.5AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C4D2
E7E7ED
E2E2EF
D8D8EF
B7B8D7

Deuteranopia

C1BED3
E6E5EE
E1E1EE
D7D6EE
B7B6D5

Tritanopia

B2D4D5
E0EFEF
DFECEC
D4EBEA
B2D1D0

Achromatopsia

CECECE
ECECEC
E5E5E5
DDDDDD
BFBFBF

Shades & Tints Shades & Tints

#B0DDCE

Dark
Light

#DFF2EC

Dark
Light

#DFE5F2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0ddce;
  --color-2: #dff2ec;
  --color-3: #dfe5f2;
  --color-4: #d3def5;
  --color-5: #b1c0de;
}

SCSS

$color-1: #b0ddce;
$color-2: #dff2ec;
$color-3: #dfe5f2;
$color-4: #d3def5;
$color-5: #b1c0de;

TAILWIND

colors: {
  'brand-1': '#b0ddce',
  'brand-2': '#dff2ec',
  'brand-3': '#dfe5f2',
  'brand-4': '#d3def5',
  'brand-5': '#b1c0de',
}

RGB Array

[176, 221, 206], [223, 242, 236], [223, 229, 242], [211, 222, 245], [177, 192, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0DDCE, #DFF2EC, #DFE5F2, #D3DEF5, #B1C0DE 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: #b0ddce; --color-2: #dff2ec; --color-3: #dfe5f2; --color-4: #d3def5; --color-5: #b1c0de. 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