← Back to Editor

#B8D0C6 · #B4D7CE · #DAEBDA · #DFF2E5 · #ECFCF9

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

#B8D0C6

Jade · Silver · Apple Green

HEX
#B8D0C6
RGB
rgb(184, 208, 198)
HSL
hsl(155, 20%, 77%)
HSB
hsb(155, 12%, 82%)
CMYK
cmyk(12%, 0%, 5%, 18%)
Oklch
oklch(83.7% 0.029 168.6)

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

#B4D7CE

Jade · LightBlue · Glacier Blue

HEX
#B4D7CE
RGB
rgb(180, 215, 206)
HSL
hsl(165, 30%, 77%)
HSB
hsb(165, 16%, 84%)
CMYK
cmyk(16%, 0%, 4%, 16%)
Oklch
oklch(85.1% 0.039 178.0)

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

#DAEBDA

Celadon · LightGray · Mint Green

HEX
#DAEBDA
RGB
rgb(218, 235, 218)
HSL
hsl(120, 30%, 89%)
HSB
hsb(120, 7%, 92%)
CMYK
cmyk(7%, 0%, 7%, 8%)
Oklch
oklch(92.3% 0.029 145.3)

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

#DFF2E5

Celadon · Beige · Mint Green

HEX
#DFF2E5
RGB
rgb(223, 242, 229)
HSL
hsl(139, 42%, 91%)
HSB
hsb(139, 8%, 95%)
CMYK
cmyk(8%, 0%, 5%, 5%)
Oklch
oklch(94.4% 0.026 156.0)

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

#ECFCF9

Jade · Snow · Glacier Blue

HEX
#ECFCF9
RGB
rgb(236, 252, 249)
HSL
hsl(169, 73%, 96%)
HSB
hsb(169, 6%, 99%)
CMYK
cmyk(6%, 0%, 1%, 1%)
Oklch
oklch(97.8% 0.017 183.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8D0C6
D0B9C2

Analogous

B9D0BB
B8D0C6
B9CED0

Triadic

B8D0C6
C6B9D0
D0C6B9

Split-Comp.

B8D0C6
D0B9CE
D0BBB9

Tetradic

B8D0C6
BBB9D0
D0B9C2
CED0B9

Contrast Matrix WCAG 2.1 Contrast

B8D0C6
B4D7CE
DAEBDA
DFF2E5
ECFCF9
—
1.1
Fail
1.3
Fail
1.4
Fail
1.5
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.5
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.2
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.5
Fail
1.2
Fail
1.1
Fail
—
White BG
1.6Fail
1.5Fail
1.2Fail
1.2Fail
1.1Fail
Black BG
12.9AAA
13.6AAA
16.9AAA
18.0AAA
19.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C3C8
C3C3D0
E1E2DE
E7E7E8
F3F3FA

Deuteranopia

C1BFC9
C1BFD1
E0DFDF
E6E5E9
F2F1FA

Tritanopia

B9CACB
B6D2D2
DBE1E2
E0EBEB
EDFAFA

Achromatopsia

C8C8C8
CCCCCC
E4E4E4
EBEBEB
F7F7F7

Shades & Tints Shades & Tints

#B8D0C6

Dark
Light

#B4D7CE

Dark
Light

#DAEBDA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8d0c6;
  --color-2: #b4d7ce;
  --color-3: #daebda;
  --color-4: #dff2e5;
  --color-5: #ecfcf9;
}

SCSS

$color-1: #b8d0c6;
$color-2: #b4d7ce;
$color-3: #daebda;
$color-4: #dff2e5;
$color-5: #ecfcf9;

TAILWIND

colors: {
  'brand-1': '#b8d0c6',
  'brand-2': '#b4d7ce',
  'brand-3': '#daebda',
  'brand-4': '#dff2e5',
  'brand-5': '#ecfcf9',
}

RGB Array

[184, 208, 198], [180, 215, 206], [218, 235, 218], [223, 242, 229], [236, 252, 249]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8D0C6, #B4D7CE, #DAEBDA, #DFF2E5, #ECFCF9 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: #b8d0c6; --color-2: #b4d7ce; --color-3: #daebda; --color-4: #dff2e5; --color-5: #ecfcf9. 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