#D8E1DE + #EDE3D4 + #FFB6AB + #CF8FA2 + #9C7995 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8E1DE

Jade · LightGray · Glacier Blue

HEX

#D8E1DE

RGB

rgb(216, 225, 222)

HSL

hsl(160, 13%, 86%)

HSB

hsb(160, 4%, 88%)

CMYK

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

Oklch

oklch(90.2% 0.010 174.2)

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

#EDE3D4

Goose Yellow · Beige · Peach Orange

HEX

#EDE3D4

RGB

rgb(237, 227, 212)

HSL

hsl(36, 41%, 88%)

HSB

hsb(36, 11%, 93%)

CMYK

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

Oklch

oklch(92.0% 0.023 78.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFB6AB

Peach Pink · LightPink · Cherry Blossom

HEX

#FFB6AB

RGB

rgb(255, 182, 171)

HSL

hsl(8, 100%, 84%)

HSB

hsb(8, 33%, 100%)

CMYK

cmyk(0%, 29%, 33%, 0%)

Oklch

oklch(84.2% 0.087 28.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#CF8FA2

Rouge · Tan · Rose Pink

HEX

#CF8FA2

RGB

rgb(207, 143, 162)

HSL

hsl(342, 40%, 69%)

HSB

hsb(342, 31%, 81%)

CMYK

cmyk(0%, 31%, 22%, 19%)

Oklch

oklch(71.9% 0.081 360.0)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#9C7995

Rose Purple · Gray · Violet

HEX

#9C7995

RGB

rgb(156, 121, 149)

HSL

hsl(312, 15%, 54%)

HSB

hsb(312, 22%, 61%)

CMYK

cmyk(0%, 22%, 4%, 39%)

Oklch

oklch(61.9% 0.059 333.3)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8E1DE

E0D7DA

Analogous

D7E0D8

D8E1DE

D7DEE0

Triadic

D8E1DE

DDD7E0

E0DDD7

Split-Comp.

D8E1DE

E0D7DE

E0D8D7

Tetradic

D8E1DE

D8D7E0

E0D7DA

DEE0D7

Contrast Matrix WCAG 2.1 Contrast

D8E1DE	EDE3D4	FFB6AB	CF8FA2	9C7995
—	1.1 Fail	1.3 Fail	1.9 Fail	2.8 Fail
1.1 Fail	—	1.3 Fail	2.0 Fail	3.0 Fail
1.3 Fail	1.3 Fail	—	1.5 Fail	2.2 Fail
1.9 Fail	2.0 Fail	1.5 Fail	—	1.5 Fail
2.8 Fail	3.0 Fail	2.2 Fail	1.5 Fail	—

White BG

1.3Fail

1.7Fail

2.6Fail

3.8AA Large

Black BG

15.7AAA

16.5AAA

12.5AAA

8.1AAA

5.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCDF

E9E9D8

DFDFAE

B3B39D

8D8D8E

Deuteranopia

DBDBDF

E9EAD8

E4E9AE

B7BC9C

8F928D

Tritanopia

D8DFDF

ECDADB

FBB0B0

CC9A99

9A8988

Achromatopsia

DEDEDE

E4E4E4

CBCBCB

A4A4A4

878787

Shades & Tints Shades & Tints

#D8E1DE

Dark

Light

#EDE3D4

Dark

Light

#FFB6AB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8e1de;
  --color-2: #ede3d4;
  --color-3: #ffb6ab;
  --color-4: #cf8fa2;
  --color-5: #9c7995;
}

SCSS

$color-1: #d8e1de;
$color-2: #ede3d4;
$color-3: #ffb6ab;
$color-4: #cf8fa2;
$color-5: #9c7995;

TAILWIND

colors: {
  'brand-1': '#d8e1de',
  'brand-2': '#ede3d4',
  'brand-3': '#ffb6ab',
  'brand-4': '#cf8fa2',
  'brand-5': '#9c7995',
}

RGB Array

[216, 225, 222], [237, 227, 212], [255, 182, 171], [207, 143, 162], [156, 121, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D8E1DE, #EDE3D4, #FFB6AB, #CF8FA2, #9C7995 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: #d8e1de; --color-2: #ede3d4; --color-3: #ffb6ab; --color-4: #cf8fa2; --color-5: #9c7995. 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 cool-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