#E0FFFC + #D8E3E2 + #E0D1DB + #F7E7E1 + #FFF8DE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E0FFFC

Jade · Lavender · Glacier Blue

HEX

#E0FFFC

RGB

rgb(224, 255, 252)

HSL

hsl(174, 100%, 94%)

HSB

hsb(174, 12%, 100%)

CMYK

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

Oklch

oklch(97.7% 0.032 189.5)

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

#D8E3E2

Jade · LightGray · Glacier Blue

HEX

#D8E3E2

RGB

rgb(216, 227, 226)

HSL

hsl(175, 16%, 87%)

HSB

hsb(175, 5%, 89%)

CMYK

cmyk(5%, 0%, 0%, 11%)

Oklch

oklch(90.7% 0.012 190.4)

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

#E0D1DB

Mauve · LightGray · Cherry Blossom

HEX

#E0D1DB

RGB

rgb(224, 209, 219)

HSL

hsl(320, 19%, 85%)

HSB

hsb(320, 7%, 88%)

CMYK

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

Oklch

oklch(87.6% 0.021 337.7)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#F7E7E1

Apricot · Linen · Peach Orange

HEX

#F7E7E1

RGB

rgb(247, 231, 225)

HSL

hsl(16, 58%, 93%)

HSB

hsb(16, 9%, 97%)

CMYK

cmyk(0%, 6%, 9%, 3%)

Oklch

oklch(93.9% 0.019 41.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFF8DE

Goose Yellow · LightYellow · Lemon Cream

HEX

#FFF8DE

RGB

rgb(255, 248, 222)

HSL

hsl(47, 100%, 94%)

HSB

hsb(47, 13%, 100%)

CMYK

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

Oklch

oklch(97.8% 0.035 94.5)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E0FFFC

FFE0E3

Analogous

E0FFED

E0FFFC

E0F3FF

Triadic

E0FFFC

FCE0FF

FFFCE0

Split-Comp.

E0FFFC

FFE0F3

FFEDE0

Tetradic

E0FFFC

EDE0FF

FFE0E3

F3FFE0

Contrast Matrix WCAG 2.1 Contrast

E0FFFC	D8E3E2	E0D1DB	F7E7E1	FFF8DE
—	1.2 Fail	1.4 Fail	1.1 Fail	1.0 Fail
1.2 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.4 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.1 Fail	1.1 Fail	1.2 Fail	—	1.1 Fail
1.0 Fail	1.2 Fail	1.4 Fail	1.1 Fail	—

White BG

1.1Fail

1.3Fail

1.5Fail

1.2Fail

1.1Fail

Black BG

19.9AAA

16.0AAA

14.3AAA

17.5AAA

19.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EDEEFD

DDDDE2

DAD9D9

F0F0E2

FCFCE4

Deuteranopia

ECE9FD

DCDBE2

DADBD8

F1F2E3

FCFDE6

Tritanopia

E2FDFD

D9E2E2

DFD7D6

F6E4E4

FFE9EA

Achromatopsia

F5F5F5

E0E0E0

D7D7D7

EBEBEB

F7F7F7

Shades & Tints Shades & Tints

#E0FFFC

Dark

Light

#D8E3E2

Dark

Light

#E0D1DB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e0fffc;
  --color-2: #d8e3e2;
  --color-3: #e0d1db;
  --color-4: #f7e7e1;
  --color-5: #fff8de;
}

SCSS

$color-1: #e0fffc;
$color-2: #d8e3e2;
$color-3: #e0d1db;
$color-4: #f7e7e1;
$color-5: #fff8de;

TAILWIND

colors: {
  'brand-1': '#e0fffc',
  'brand-2': '#d8e3e2',
  'brand-3': '#e0d1db',
  'brand-4': '#f7e7e1',
  'brand-5': '#fff8de',
}

RGB Array

[224, 255, 252], [216, 227, 226], [224, 209, 219], [247, 231, 225], [255, 248, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E0FFFC, #D8E3E2, #E0D1DB, #F7E7E1, #FFF8DE 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: #e0fffc; --color-2: #d8e3e2; --color-3: #e0d1db; --color-4: #f7e7e1; --color-5: #fff8de. 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