#FD8E85 + #FECCC1 + #AD8794 + #E6F2DC + #AFD2BC · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#FD8E85

Peach Pink · LightCoral · Coral Red

HEX

#FD8E85

RGB

rgb(253, 142, 133)

HSL

hsl(4, 97%, 76%)

HSB

hsb(4, 47%, 99%)

CMYK

cmyk(0%, 44%, 47%, 1%)

Oklch

oklch(76.4% 0.136 25.6)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FECCC1

Peach Pink · Pink · Cherry Blossom

HEX

#FECCC1

RGB

rgb(254, 204, 193)

HSL

hsl(11, 97%, 88%)

HSB

hsb(11, 24%, 100%)

CMYK

cmyk(0%, 20%, 24%, 0%)

Oklch

oklch(88.6% 0.059 32.6)

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

#AD8794

Dark Violet · DarkGray · Rose Pink

HEX

#AD8794

RGB

rgb(173, 135, 148)

HSL

hsl(339, 19%, 60%)

HSB

hsb(339, 22%, 68%)

CMYK

cmyk(0%, 22%, 14%, 32%)

Oklch

oklch(66.3% 0.050 356.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#E6F2DC

Celadon · Beige · Mint Green

HEX

#E6F2DC

RGB

rgb(230, 242, 220)

HSL

hsl(93, 46%, 91%)

HSB

hsb(93, 9%, 95%)

CMYK

cmyk(5%, 0%, 9%, 5%)

Oklch

oklch(94.6% 0.032 130.6)

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

#AFD2BC

Celadon · Silver · Apple Green

HEX

#AFD2BC

RGB

rgb(175, 210, 188)

HSL

hsl(142, 28%, 75%)

HSB

hsb(142, 17%, 82%)

CMYK

cmyk(17%, 0%, 10%, 18%)

Oklch

oklch(83.2% 0.048 157.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FD8E85

86F5FD

Analogous

FD86BA

FD8E85

FDCA86

Triadic

FD8E85

86FD8E

8E86FD

Split-Comp.

FD8E85

86FDCA

86BAFD

Tetradic

FD8E85

BAFD86

86F5FD

CA86FD

Contrast Matrix WCAG 2.1 Contrast

FD8E85	FECCC1	AD8794	E6F2DC	AFD2BC
—	1.6 Fail	1.4 Fail	1.9 Fail	1.4 Fail
1.6 Fail	—	2.2 Fail	1.2 Fail	1.1 Fail
1.4 Fail	2.2 Fail	—	2.7 Fail	1.9 Fail
1.9 Fail	1.2 Fail	2.7 Fail	—	1.4 Fail
1.4 Fail	1.1 Fail	1.9 Fail	1.4 Fail	—

White BG

2.2Fail

1.4Fail

3.1AA Large

1.2Fail

1.6Fail

Black BG

9.4AAA

14.6AAA

6.7AA

18.1AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CDCC87

E8E8C4

9D9C91

EBEBE1

BEBEC1

Deuteranopia

D3DC88

EBEFC4

9FA290

EBEAE3

BCBAC3

Tritanopia

F78989

FBC6C6

AB8E8E

E7E6E6

B1C6C6

Achromatopsia

AEAEAE

DADADA

949494

ECECEC

C5C5C5

Shades & Tints Shades & Tints

#FD8E85

Dark

Light

#FECCC1

Dark

Light

#AD8794

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fd8e85;
  --color-2: #feccc1;
  --color-3: #ad8794;
  --color-4: #e6f2dc;
  --color-5: #afd2bc;
}

SCSS

$color-1: #fd8e85;
$color-2: #feccc1;
$color-3: #ad8794;
$color-4: #e6f2dc;
$color-5: #afd2bc;

TAILWIND

colors: {
  'brand-1': '#fd8e85',
  'brand-2': '#feccc1',
  'brand-3': '#ad8794',
  'brand-4': '#e6f2dc',
  'brand-5': '#afd2bc',
}

RGB Array

[253, 142, 133], [254, 204, 193], [173, 135, 148], [230, 242, 220], [175, 210, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FD8E85, #FECCC1, #AD8794, #E6F2DC, #AFD2BC 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: #fd8e85; --color-2: #feccc1; --color-3: #ad8794; --color-4: #e6f2dc; --color-5: #afd2bc. 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