← Back to Editor

#F78376 · #FFA197 · #EAA4AF · #E2D0CC · #DDDAD3

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarm

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#F78376

Peach Pink · Salmon · Coral Red

HEX
#F78376
RGB
rgb(247, 131, 118)
HSL
hsl(6, 89%, 72%)
HSB
hsb(6, 52%, 97%)
CMYK
cmyk(0%, 47%, 52%, 3%)
Oklch
oklch(73.6% 0.144 27.7)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#FFA197

Peach Pink · LightSalmon · Coral Red

HEX
#FFA197
RGB
rgb(255, 161, 151)
HSL
hsl(6, 100%, 80%)
HSB
hsb(6, 41%, 100%)
CMYK
cmyk(0%, 37%, 41%, 0%)
Oklch
oklch(80.1% 0.114 26.5)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#EAA4AF

Peach Pink · LightPink · Coral Red

HEX
#EAA4AF
RGB
rgb(234, 164, 175)
HSL
hsl(351, 62%, 78%)
HSB
hsb(351, 30%, 92%)
CMYK
cmyk(0%, 30%, 25%, 8%)
Oklch
oklch(78.9% 0.084 8.8)

TraditionalPeach Pink」· PaintCoral Red」· Creative Rose Petal

#E2D0CC

Peach Pink · LightGray · Cherry Blossom

HEX
#E2D0CC
RGB
rgb(226, 208, 204)
HSL
hsl(11, 27%, 84%)
HSB
hsb(11, 10%, 89%)
CMYK
cmyk(0%, 8%, 10%, 11%)
Oklch
oklch(87.1% 0.021 32.5)

TraditionalPeach Pink」· PaintCherry Blossom」· Creative Blush Sunrise

#DDDAD3

Goose Yellow · LightGray · Lemon Cream

HEX
#DDDAD3
RGB
rgb(221, 218, 211)
HSL
hsl(42, 13%, 85%)
HSB
hsb(42, 5%, 87%)
CMYK
cmyk(0%, 1%, 5%, 13%)
Oklch
oklch(88.9% 0.010 87.5)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F78376
78EAF7

Analogous

F778AB
F78376
F7C478

Triadic

F78376
78F785
8578F7

Split-Comp.

F78376
78F7C4
78ABF7

Tetradic

F78376
ABF778
78EAF7
C478F7

Contrast Matrix WCAG 2.1 Contrast

F78376
FFA197
EAA4AF
E2D0CC
DDDAD3
1.3
Fail
1.2
Fail
1.7
Fail
1.8
Fail
1.3
Fail
1.0
Fail
1.3
Fail
1.4
Fail
1.2
Fail
1.0
Fail
1.4
Fail
1.4
Fail
1.7
Fail
1.3
Fail
1.4
Fail
1.1
Fail
1.8
Fail
1.4
Fail
1.4
Fail
1.1
Fail
White BG
2.5Fail
1.9Fail
2.0Fail
1.5Fail
1.4Fail
Black BG
8.5AAA
10.8AAA
10.4AAA
14.1AAA
15.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C5C479
D6D599
CCCBAC
DADACD
DCDCD5

Deuteranopia

CCD47A
DCE39A
D0D5AC
DBDDCD
DCDCD5

Tritanopia

F17C7C
FA9B9C
E6AAAA
E1CECE
DDD6D6

Achromatopsia

A4A4A4
BCBCBC
BABABA
D5D5D5
DADADA

Shades & Tints Shades & Tints

#F78376

Dark
Light

#FFA197

Dark
Light

#EAA4AF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f78376;
  --color-2: #ffa197;
  --color-3: #eaa4af;
  --color-4: #e2d0cc;
  --color-5: #dddad3;
}

SCSS

$color-1: #f78376;
$color-2: #ffa197;
$color-3: #eaa4af;
$color-4: #e2d0cc;
$color-5: #dddad3;

TAILWIND

colors: {
  'brand-1': '#f78376',
  'brand-2': '#ffa197',
  'brand-3': '#eaa4af',
  'brand-4': '#e2d0cc',
  'brand-5': '#dddad3',
}

RGB Array

[247, 131, 118], [255, 161, 151], [234, 164, 175], [226, 208, 204], [221, 218, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F78376, #FFA197, #EAA4AF, #E2D0CC, #DDDAD3 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: #f78376; --color-2: #ffa197; --color-3: #eaa4af; --color-4: #e2d0cc; --color-5: #dddad3. 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