← Back to Editor

#F0AE8E · #F2C5AE · #EDDEB0 · #F9F0EC · #E4DEC8

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

#F0AE8E

Apricot · BurlyWood · Warm Sun

HEX
#F0AE8E
RGB
rgb(240, 174, 142)
HSL
hsl(20, 77%, 75%)
HSB
hsb(20, 41%, 94%)
CMYK
cmyk(0%, 27%, 41%, 6%)
Oklch
oklch(80.5% 0.089 46.9)

TraditionalApricot」· PaintWarm Sun」· Creative Honey Glow

#F2C5AE

Apricot · Wheat · Peach Orange

HEX
#F2C5AE
RGB
rgb(242, 197, 174)
HSL
hsl(20, 72%, 82%)
HSB
hsb(20, 28%, 95%)
CMYK
cmyk(0%, 19%, 28%, 5%)
Oklch
oklch(85.7% 0.060 48.5)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

#EDDEB0

Goose Yellow · Wheat · Lemon Cream

HEX
#EDDEB0
RGB
rgb(237, 222, 176)
HSL
hsl(45, 63%, 81%)
HSB
hsb(45, 26%, 93%)
CMYK
cmyk(0%, 6%, 26%, 7%)
Oklch
oklch(90.1% 0.062 92.1)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#F9F0EC

Apricot · Linen · Peach Orange

HEX
#F9F0EC
RGB
rgb(249, 240, 236)
HSL
hsl(18, 52%, 95%)
HSB
hsb(18, 5%, 98%)
CMYK
cmyk(0%, 4%, 5%, 2%)
Oklch
oklch(96.1% 0.011 45.7)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

#E4DEC8

Goose Yellow · LightGray · Lemon Cream

HEX
#E4DEC8
RGB
rgb(228, 222, 200)
HSL
hsl(47, 34%, 84%)
HSB
hsb(47, 12%, 89%)
CMYK
cmyk(0%, 3%, 12%, 11%)
Oklch
oklch(89.9% 0.030 94.4)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0AE8E
8ED0F0

Analogous

F08E9F
F0AE8E
F0E08E

Triadic

F0AE8E
8EF0AF
AF8EF0

Split-Comp.

F0AE8E
8EF0E0
8E9FF0

Tetradic

F0AE8E
9FF08E
8ED0F0
E08EF0

Contrast Matrix WCAG 2.1 Contrast

F0AE8E
F2C5AE
EDDEB0
F9F0EC
E4DEC8
1.2
Fail
1.4
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.0
Fail
1.7
Fail
1.4
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.0
Fail
1.2
Fail
White BG
1.9Fail
1.6Fail
1.3Fail
1.1Fail
1.3Fail
Black BG
11.2AAA
13.4AAA
15.7AAA
18.7AAA
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D396
DFDEB4
E7E6BB
F5F5ED
E1E1CD

Deuteranopia

D7DC98
E1E4B5
E7E8BE
F6F6ED
E2E2CF

Tritanopia

ED9C9D
F0B8B9
ECC4C6
F9EEEE
E4D2D2

Achromatopsia

BEBEBE
D0D0D0
DDDDDD
F2F2F2
DDDDDD

Shades & Tints Shades & Tints

#F0AE8E

Dark
Light

#F2C5AE

Dark
Light

#EDDEB0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0ae8e;
  --color-2: #f2c5ae;
  --color-3: #eddeb0;
  --color-4: #f9f0ec;
  --color-5: #e4dec8;
}

SCSS

$color-1: #f0ae8e;
$color-2: #f2c5ae;
$color-3: #eddeb0;
$color-4: #f9f0ec;
$color-5: #e4dec8;

TAILWIND

colors: {
  'brand-1': '#f0ae8e',
  'brand-2': '#f2c5ae',
  'brand-3': '#eddeb0',
  'brand-4': '#f9f0ec',
  'brand-5': '#e4dec8',
}

RGB Array

[240, 174, 142], [242, 197, 174], [237, 222, 176], [249, 240, 236], [228, 222, 200]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F0AE8E, #F2C5AE, #EDDEB0, #F9F0EC, #E4DEC8 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: #f0ae8e; --color-2: #f2c5ae; --color-3: #eddeb0; --color-4: #f9f0ec; --color-5: #e4dec8. 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