#DEEAF6 + #CBDFE6 + #CCD3CC + #B5B57F + #D6DD75 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#DEEAF6

Azure · Lavender · Sky Blue

HEX

#DEEAF6

RGB

rgb(222, 234, 246)

HSL

hsl(210, 57%, 92%)

HSB

hsb(210, 10%, 96%)

CMYK

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

Oklch

oklch(93.2% 0.021 248.1)

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

#CBDFE6

Sky Blue · LightGray · Glacier Blue

HEX

#CBDFE6

RGB

rgb(203, 223, 230)

HSL

hsl(196, 35%, 85%)

HSB

hsb(196, 12%, 90%)

CMYK

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

Oklch

oklch(89.1% 0.023 220.7)

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

#CCD3CC

Silver Gray · LightGray · Pearl Gray

HEX

#CCD3CC

RGB

rgb(204, 211, 204)

HSL

hsl(120, 7%, 81%)

HSB

hsb(120, 3%, 83%)

CMYK

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

Oklch

oklch(85.9% 0.012 145.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B5B57F

Autumn Sage · Tan · Sunflower

HEX

#B5B57F

RGB

rgb(181, 181, 127)

HSL

hsl(60, 27%, 60%)

HSB

hsb(60, 30%, 71%)

CMYK

cmyk(0%, 0%, 30%, 29%)

Oklch

oklch(76.0% 0.072 108.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#D6DD75

Fresh Green · Khaki · Sunflower

HEX

#D6DD75

RGB

rgb(214, 221, 117)

HSL

hsl(64, 60%, 66%)

HSB

hsb(64, 47%, 87%)

CMYK

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

Oklch

oklch(87.0% 0.128 112.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DEEAF6

F6EBDF

Analogous

DFF6F6

DEEAF6

DFDFF6

Triadic

DEEAF6

F6DFEB

EBF6DF

Split-Comp.

DEEAF6

F6DFDF

F6F6DF

Tetradic

DEEAF6

F6DFF6

F6EBDF

DFF6DF

Contrast Matrix WCAG 2.1 Contrast

DEEAF6	CBDFE6	CCD3CC	B5B57F	D6DD75
—	1.1 Fail	1.3 Fail	1.7 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	1.1 Fail
1.3 Fail	1.1 Fail	—	1.4 Fail	1.1 Fail
1.7 Fail	1.5 Fail	1.4 Fail	—	1.5 Fail
1.2 Fail	1.1 Fail	1.1 Fail	1.5 Fail	—

White BG

1.2Fail

1.4Fail

1.5Fail

2.1Fail

1.5Fail

Black BG

17.2AAA

15.2AAA

13.8AAA

9.9AAA

14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3F3

D4D4E4

CFCFCE

B5B58C

D9D98E

Deuteranopia

E3E2F2

D3D1E4

CFCECE

B5B58F

D9D894

Tritanopia

DFF1F0

CCE3E3

CCCFCF

B59699

D6A2A6

Achromatopsia

E8E8E8

DADADA

D0D0D0

AFAFAF

CFCFCF

Shades & Tints Shades & Tints

#DEEAF6

Dark

Light

#CBDFE6

Dark

Light

#CCD3CC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #deeaf6;
  --color-2: #cbdfe6;
  --color-3: #ccd3cc;
  --color-4: #b5b57f;
  --color-5: #d6dd75;
}

SCSS

$color-1: #deeaf6;
$color-2: #cbdfe6;
$color-3: #ccd3cc;
$color-4: #b5b57f;
$color-5: #d6dd75;

TAILWIND

colors: {
  'brand-1': '#deeaf6',
  'brand-2': '#cbdfe6',
  'brand-3': '#ccd3cc',
  'brand-4': '#b5b57f',
  'brand-5': '#d6dd75',
}

RGB Array

[222, 234, 246], [203, 223, 230], [204, 211, 204], [181, 181, 127], [214, 221, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #DEEAF6, #CBDFE6, #CCD3CC, #B5B57F, #D6DD75 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: #deeaf6; --color-2: #cbdfe6; --color-3: #ccd3cc; --color-4: #b5b57f; --color-5: #d6dd75. 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