#FC6C64 + #E0968A + #D9B296 + #DFE1C7 + #D4F7DD · 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

#FC6C64

Peach Pink · Salmon · Coral Red

HEX

#FC6C64

RGB

rgb(252, 108, 100)

HSL

hsl(3, 96%, 69%)

HSB

hsb(3, 60%, 99%)

CMYK

cmyk(0%, 57%, 60%, 1%)

Oklch

oklch(70.7% 0.178 25.8)

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

#E0968A

Peach Pink · DarkSalmon · Coral Red

HEX

#E0968A

RGB

rgb(224, 150, 138)

HSL

hsl(8, 58%, 71%)

HSB

hsb(8, 38%, 88%)

CMYK

cmyk(0%, 33%, 38%, 12%)

Oklch

oklch(74.4% 0.092 29.5)

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

#D9B296

Apricot · Tan · Warm Sun

HEX

#D9B296

RGB

rgb(217, 178, 150)

HSL

hsl(25, 47%, 72%)

HSB

hsb(25, 31%, 85%)

CMYK

cmyk(0%, 18%, 31%, 15%)

Oklch

oklch(79.1% 0.059 57.4)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#DFE1C7

Fresh Green · LightGray · Lemon Cream

HEX

#DFE1C7

RGB

rgb(223, 225, 199)

HSL

hsl(65, 30%, 83%)

HSB

hsb(65, 12%, 88%)

CMYK

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

Oklch

oklch(90.1% 0.035 110.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#D4F7DD

Emerald · Beige · Mint Green

HEX

#D4F7DD

RGB

rgb(212, 247, 221)

HSL

hsl(135, 69%, 90%)

HSB

hsb(135, 14%, 97%)

CMYK

cmyk(14%, 0%, 11%, 3%)

Oklch

oklch(94.4% 0.050 153.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC6C64

64F4FC

Analogous

FC64A8

FC6C64

FCB864

Triadic

FC6C64

64FC6C

6C64FC

Split-Comp.

FC6C64

64FCB8

64A8FC

Tetradic

FC6C64

A8FC64

64F4FC

B864FC

Contrast Matrix WCAG 2.1 Contrast

FC6C64	E0968A	D9B296	DFE1C7	D4F7DD
—	1.2 Fail	1.4 Fail	2.1 Fail	2.4 Fail
1.2 Fail	—	1.2 Fail	1.8 Fail	2.0 Fail
1.4 Fail	1.2 Fail	—	1.5 Fail	1.7 Fail
2.1 Fail	1.8 Fail	1.5 Fail	—	1.2 Fail
2.4 Fail	2.0 Fail	1.7 Fail	1.2 Fail	—

White BG

2.8Fail

2.4Fail

2.0Fail

1.3Fail

1.2Fail

Black BG

7.5AAA

8.9AAA

10.8AAA

15.7AAA

18.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BEBC66

C0BF8D

C8C89D

E0E0CD

E3E3E3

Deuteranopia

C6D166

C4CA8E

CACD9E

E0E0CF

E1DEE5

Tritanopia

F56768

DC8F90

D7A2A3

DFD2D3

D6E8E9

Achromatopsia

969696

ABABAB

BABABA

DDDDDD

EAEAEA

Shades & Tints Shades & Tints

#FC6C64

Dark

Light

#E0968A

Dark

Light

#D9B296

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc6c64;
  --color-2: #e0968a;
  --color-3: #d9b296;
  --color-4: #dfe1c7;
  --color-5: #d4f7dd;
}

SCSS

$color-1: #fc6c64;
$color-2: #e0968a;
$color-3: #d9b296;
$color-4: #dfe1c7;
$color-5: #d4f7dd;

TAILWIND

colors: {
  'brand-1': '#fc6c64',
  'brand-2': '#e0968a',
  'brand-3': '#d9b296',
  'brand-4': '#dfe1c7',
  'brand-5': '#d4f7dd',
}

RGB Array

[252, 108, 100], [224, 150, 138], [217, 178, 150], [223, 225, 199], [212, 247, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FC6C64, #E0968A, #D9B296, #DFE1C7, #D4F7DD 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: #fc6c64; --color-2: #e0968a; --color-3: #d9b296; --color-4: #dfe1c7; --color-5: #d4f7dd. 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