#E7DFF2 + #E0D2EE + #B4DDDD + #71D9D0 + #847D90 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E7DFF2

Wisteria · Lavender · Lavender

HEX

#E7DFF2

RGB

rgb(231, 223, 242)

HSL

hsl(265, 42%, 91%)

HSB

hsb(265, 8%, 95%)

CMYK

cmyk(5%, 8%, 0%, 5%)

Oklch

oklch(91.6% 0.027 304.8)

Traditional「Wisteria」· Paint「Lavender」· Creative Lavender Dream

#E0D2EE

Lilac · Lavender · Lavender

HEX

#E0D2EE

RGB

rgb(224, 210, 238)

HSL

hsl(270, 45%, 88%)

HSB

hsb(270, 12%, 93%)

CMYK

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

Oklch

oklch(88.4% 0.041 307.9)

Traditional「Lilac」· Paint「Lavender」· Creative Lavender Dream

#B4DDDD

Sky Blue · LightBlue · Glacier Blue

HEX

#B4DDDD

RGB

rgb(180, 221, 221)

HSL

hsl(180, 38%, 79%)

HSB

hsb(180, 19%, 87%)

CMYK

cmyk(19%, 0%, 0%, 13%)

Oklch

oklch(86.8% 0.043 196.4)

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

#71D9D0

Jade · SkyBlue · Lake Green

HEX

#71D9D0

RGB

rgb(113, 217, 208)

HSL

hsl(175, 58%, 65%)

HSB

hsb(175, 48%, 85%)

CMYK

cmyk(48%, 0%, 4%, 15%)

Oklch

oklch(82.0% 0.098 188.1)

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

#847D90

Deep Indigo · Gray · Warm Gray

HEX

#847D90

RGB

rgb(132, 125, 144)

HSL

hsl(262, 8%, 53%)

HSB

hsb(262, 13%, 56%)

CMYK

cmyk(8%, 13%, 0%, 44%)

Oklch

oklch(60.2% 0.030 302.3)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E7DFF2

EAF2DE

Analogous

DEE0F2

E7DFF2

F0DEF2

Triadic

E7DFF2

F2E6DE

DEF2E6

Split-Comp.

E7DFF2

F2F0DE

E0F2DE

Tetradic

E7DFF2

F2DEE0

EAF2DE

DEF2F0

Contrast Matrix WCAG 2.1 Contrast

E7DFF2	E0D2EE	B4DDDD	71D9D0	847D90
—	1.1 Fail	1.1 Fail	1.3 Fail	3.1 AA Large
1.1 Fail	—	1.0 Fail	1.2 Fail	2.8 Fail
1.1 Fail	1.0 Fail	—	1.1 Fail	2.7 Fail
1.3 Fail	1.2 Fail	1.1 Fail	—	2.4 Fail
3.1 AA Large	2.8 Fail	2.7 Fail	2.4 Fail	—

White BG

1.3Fail

1.4Fail

1.5Fail

1.7Fail

3.9AA Large

Black BG

16.2AAA

14.6AAA

14.3AAA

12.5AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E3ED

DADAE7

C6C6DD

9E9FD2

81818B

Deuteranopia

E4E5EC

DBDCE6

C3C0DD

9890D3

81828A

Tritanopia

E7EAE9

DFE2E1

B6DDDD

76D4D4

848887

Achromatopsia

E4E4E4

D9D9D9

D1D1D1

B9B9B9

818181

Shades & Tints Shades & Tints

#E7DFF2

Dark

Light

#E0D2EE

Dark

Light

#B4DDDD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e7dff2;
  --color-2: #e0d2ee;
  --color-3: #b4dddd;
  --color-4: #71d9d0;
  --color-5: #847d90;
}

SCSS

$color-1: #e7dff2;
$color-2: #e0d2ee;
$color-3: #b4dddd;
$color-4: #71d9d0;
$color-5: #847d90;

TAILWIND

colors: {
  'brand-1': '#e7dff2',
  'brand-2': '#e0d2ee',
  'brand-3': '#b4dddd',
  'brand-4': '#71d9d0',
  'brand-5': '#847d90',
}

RGB Array

[231, 223, 242], [224, 210, 238], [180, 221, 221], [113, 217, 208], [132, 125, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #E7DFF2, #E0D2EE, #B4DDDD, #71D9D0, #847D90 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: #e7dff2; --color-2: #e0d2ee; --color-3: #b4dddd; --color-4: #71d9d0; --color-5: #847d90. 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