#B8DDD6 + #E6F8DE + #CDDFE1 + #D8F6AD + #C1B6A9 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#B8DDD6

Jade · LightBlue · Glacier Blue

HEX

#B8DDD6

RGB

rgb(184, 221, 214)

HSL

hsl(169, 35%, 79%)

HSB

hsb(169, 17%, 87%)

CMYK

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

Oklch

oklch(86.9% 0.040 182.6)

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

#E6F8DE

Emerald · Beige · Mint Green

HEX

#E6F8DE

RGB

rgb(230, 248, 222)

HSL

hsl(102, 65%, 92%)

HSB

hsb(102, 10%, 97%)

CMYK

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

Oklch

oklch(95.9% 0.039 135.9)

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

#CDDFE1

Sky Blue · LightGray · Glacier Blue

HEX

#CDDFE1

RGB

rgb(205, 223, 225)

HSL

hsl(186, 25%, 84%)

HSB

hsb(186, 9%, 88%)

CMYK

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

Oklch

oklch(89.1% 0.019 204.8)

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

#D8F6AD

Willow Green · Wheat · Mint Green

HEX

#D8F6AD

RGB

rgb(216, 246, 173)

HSL

hsl(85, 80%, 82%)

HSB

hsb(85, 30%, 96%)

CMYK

cmyk(12%, 0%, 30%, 4%)

Oklch

oklch(93.4% 0.100 126.4)

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

#C1B6A9

Goose Yellow · Silver · Warm Sun

HEX

#C1B6A9

RGB

rgb(193, 182, 169)

HSL

hsl(33, 16%, 71%)

HSB

hsb(33, 12%, 76%)

CMYK

cmyk(0%, 6%, 12%, 24%)

Oklch

oklch(78.2% 0.022 72.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8DDD6

DCB7BE

Analogous

B7DCC3

B8DDD6

B7D0DC

Triadic

B8DDD6

D5B7DC

DCD5B7

Split-Comp.

B8DDD6

DCB7D0

DCC3B7

Tetradic

B8DDD6

C3B7DC

DCB7BE

D0DCB7

Contrast Matrix WCAG 2.1 Contrast

B8DDD6	E6F8DE	CDDFE1	D8F6AD	C1B6A9
—	1.3 Fail	1.1 Fail	1.2 Fail	1.4 Fail
1.3 Fail	—	1.2 Fail	1.1 Fail	1.8 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.4 Fail
1.2 Fail	1.1 Fail	1.2 Fail	—	1.7 Fail
1.4 Fail	1.8 Fail	1.4 Fail	1.7 Fail	—

White BG

1.5Fail

1.1Fail

1.4Fail

1.2Fail

2.0Fail

Black BG

14.4AAA

18.8AAA

15.2AAA

17.7AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8D8

EEEEE4

D5D5E1

E5E5BF

BCBCAC

Deuteranopia

C6C3D8

EDEBE6

D4D2E0

E3E1C3

BDBEAD

Tritanopia

BAD9D9

E7E9EA

CEE0E0

DACDD0

C0AFAF

Achromatopsia

D1D1D1

F0F0F0

DADADA

E5E5E5

B8B8B8

Shades & Tints Shades & Tints

#B8DDD6

Dark

Light

#E6F8DE

Dark

Light

#CDDFE1

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8ddd6;
  --color-2: #e6f8de;
  --color-3: #cddfe1;
  --color-4: #d8f6ad;
  --color-5: #c1b6a9;
}

SCSS

$color-1: #b8ddd6;
$color-2: #e6f8de;
$color-3: #cddfe1;
$color-4: #d8f6ad;
$color-5: #c1b6a9;

TAILWIND

colors: {
  'brand-1': '#b8ddd6',
  'brand-2': '#e6f8de',
  'brand-3': '#cddfe1',
  'brand-4': '#d8f6ad',
  'brand-5': '#c1b6a9',
}

RGB Array

[184, 221, 214], [230, 248, 222], [205, 223, 225], [216, 246, 173], [193, 182, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #B8DDD6, #E6F8DE, #CDDFE1, #D8F6AD, #C1B6A9 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: #b8ddd6; --color-2: #e6f8de; --color-3: #cddfe1; --color-4: #d8f6ad; --color-5: #c1b6a9. 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 nature-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