#FFE4EA + #F7E7E4 + #E8EDE4 + #D4F3E5 + #C8F4EC · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#FFE4EA

Peach Pink · Linen · Cherry Blossom

HEX

#FFE4EA

RGB

rgb(255, 228, 234)

HSL

hsl(347, 100%, 95%)

HSB

hsb(347, 11%, 100%)

CMYK

cmyk(0%, 11%, 8%, 0%)

Oklch

oklch(94.2% 0.031 2.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F7E7E4

Peach Pink · Linen · Cherry Blossom

HEX

#F7E7E4

RGB

rgb(247, 231, 228)

HSL

hsl(9, 54%, 93%)

HSB

hsb(9, 8%, 97%)

CMYK

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

Oklch

oklch(94.0% 0.018 30.3)

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

#E8EDE4

Celadon · Beige · Mint Green

HEX

#E8EDE4

RGB

rgb(232, 237, 228)

HSL

hsl(93, 20%, 91%)

HSB

hsb(93, 4%, 93%)

CMYK

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

Oklch

oklch(94.0% 0.013 130.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#D4F3E5

Jade · Lavender · Mint Green

HEX

#D4F3E5

RGB

rgb(212, 243, 229)

HSL

hsl(153, 56%, 89%)

HSB

hsb(153, 13%, 95%)

CMYK

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

Oklch

oklch(93.8% 0.037 166.6)

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

#C8F4EC

Jade · Lavender · Glacier Blue

HEX

#C8F4EC

RGB

rgb(200, 244, 236)

HSL

hsl(169, 67%, 87%)

HSB

hsb(169, 18%, 96%)

CMYK

cmyk(18%, 0%, 3%, 4%)

Oklch

oklch(93.4% 0.046 183.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFE4EA

E5FFF9

Analogous

FFE5F8

FFE4EA

FFEDE5

Triadic

FFE4EA

EBFFE5

E5EBFF

Split-Comp.

FFE4EA

E5FFED

E5F8FF

Tetradic

FFE4EA

F8FFE5

E5FFF9

EDE5FF

Contrast Matrix WCAG 2.1 Contrast

FFE4EA	F7E7E4	E8EDE4	D4F3E5	C8F4EC
—	1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.0 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.2Fail

Black BG

17.5AAA

17.7AAA

17.8AAA

17.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3E9

F0F0E5

EAEAE6

E1E2E8

DBDBEE

Deuteranopia

F5F7E8

F1F2E5

EAE9E7

E0DDE9

D9D5EE

Tritanopia

FEE7E7

F6E5E5

E8E8E8

D6EBEC

CAEFF0

Achromatopsia

EDEDED

EBEBEB

EAEAEA

E8E8E8

E6E6E6

Shades & Tints Shades & Tints

#FFE4EA

Dark

Light

#F7E7E4

Dark

Light

#E8EDE4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffe4ea;
  --color-2: #f7e7e4;
  --color-3: #e8ede4;
  --color-4: #d4f3e5;
  --color-5: #c8f4ec;
}

SCSS

$color-1: #ffe4ea;
$color-2: #f7e7e4;
$color-3: #e8ede4;
$color-4: #d4f3e5;
$color-5: #c8f4ec;

TAILWIND

colors: {
  'brand-1': '#ffe4ea',
  'brand-2': '#f7e7e4',
  'brand-3': '#e8ede4',
  'brand-4': '#d4f3e5',
  'brand-5': '#c8f4ec',
}

RGB Array

[255, 228, 234], [247, 231, 228], [232, 237, 228], [212, 243, 229], [200, 244, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FFE4EA, #F7E7E4, #E8EDE4, #D4F3E5, #C8F4EC 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: #ffe4ea; --color-2: #f7e7e4; --color-3: #e8ede4; --color-4: #d4f3e5; --color-5: #c8f4ec. 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 pastel-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