#D5E4E7 + #E8E4D5 + #F7E9D7 + #FCCCC8 + #F2B3B3 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D5E4E7

Sky Blue · Lavender · Glacier Blue

HEX

#D5E4E7

RGB

rgb(213, 228, 231)

HSL

hsl(190, 27%, 87%)

HSB

hsb(190, 8%, 91%)

CMYK

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

Oklch

oklch(90.8% 0.017 211.0)

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

#E8E4D5

Goose Yellow · Beige · Lemon Cream

HEX

#E8E4D5

RGB

rgb(232, 228, 213)

HSL

hsl(47, 29%, 87%)

HSB

hsb(47, 8%, 91%)

CMYK

cmyk(0%, 2%, 8%, 9%)

Oklch

oklch(91.8% 0.020 94.5)

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

#F7E9D7

Goose Yellow · Beige · Peach Orange

HEX

#F7E9D7

RGB

rgb(247, 233, 215)

HSL

hsl(34, 67%, 91%)

HSB

hsb(34, 13%, 97%)

CMYK

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

Oklch

oklch(94.0% 0.028 74.3)

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

#FCCCC8

Peach Pink · Pink · Cherry Blossom

HEX

#FCCCC8

RGB

rgb(252, 204, 200)

HSL

hsl(5, 90%, 89%)

HSB

hsb(5, 21%, 99%)

CMYK

cmyk(0%, 19%, 21%, 1%)

Oklch

oklch(88.6% 0.055 23.8)

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

#F2B3B3

Peach Pink · LightPink · Cherry Blossom

HEX

#F2B3B3

RGB

rgb(242, 179, 179)

HSL

hsl(0, 71%, 83%)

HSB

hsb(0, 26%, 95%)

CMYK

cmyk(0%, 26%, 26%, 5%)

Oklch

oklch(82.5% 0.074 18.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5E4E7

E7D8D5

Analogous

D5E7E1

D5E4E7

D5DBE7

Triadic

D5E4E7

E7D5E4

E4E7D5

Split-Comp.

D5E4E7

E7D5DB

E7E1D5

Tetradic

D5E4E7

E1D5E7

E7D8D5

DBE7D5

Contrast Matrix WCAG 2.1 Contrast

D5E4E7	E8E4D5	F7E9D7	FCCCC8	F2B3B3
—	1.0 Fail	1.1 Fail	1.1 Fail	1.4 Fail
1.0 Fail	—	1.1 Fail	1.1 Fail	1.4 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	1.5 Fail
1.1 Fail	1.1 Fail	1.2 Fail	—	1.2 Fail
1.4 Fail	1.4 Fail	1.5 Fail	1.2 Fail	—

White BG

1.3Fail

1.2Fail

1.4Fail

1.8Fail

Black BG

16.1AAA

16.5AAA

17.6AAA

14.6AAA

11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDCE6

E6E6D9

F1F1DB

E7E7C9

D7D6B3

Deuteranopia

DBDAE6

E7E7DA

F2F3DC

EAEEC9

DADFB3

Tritanopia

D6E6E6

E8DBDC

F6DFE0

FACACA

EFB3B3

Achromatopsia

E0E0E0

E3E3E3

EBEBEB

DADADA

C6C6C6

Shades & Tints Shades & Tints

#D5E4E7

Dark

Light

#E8E4D5

Dark

Light

#F7E9D7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5e4e7;
  --color-2: #e8e4d5;
  --color-3: #f7e9d7;
  --color-4: #fcccc8;
  --color-5: #f2b3b3;
}

SCSS

$color-1: #d5e4e7;
$color-2: #e8e4d5;
$color-3: #f7e9d7;
$color-4: #fcccc8;
$color-5: #f2b3b3;

TAILWIND

colors: {
  'brand-1': '#d5e4e7',
  'brand-2': '#e8e4d5',
  'brand-3': '#f7e9d7',
  'brand-4': '#fcccc8',
  'brand-5': '#f2b3b3',
}

RGB Array

[213, 228, 231], [232, 228, 213], [247, 233, 215], [252, 204, 200], [242, 179, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D5E4E7, #E8E4D5, #F7E9D7, #FCCCC8, #F2B3B3 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: #d5e4e7; --color-2: #e8e4d5; --color-3: #f7e9d7; --color-4: #fcccc8; --color-5: #f2b3b3. 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