← Back to Editor

#F0D8A8 · #F0F0C0 · #D8C090 · #D8D8A8 · #A8A878

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

#F0D8A8

Goose Yellow · Wheat · Lemon Cream

HEX
#F0D8A8
RGB
rgb(240, 216, 168)
HSL
hsl(40, 71%, 80%)
HSB
hsb(40, 30%, 94%)
CMYK
cmyk(0%, 10%, 30%, 6%)
Oklch
oklch(89.0% 0.068 84.4)

TraditionalGoose Yellow」· PaintLemon Cream」· Creative Lemon Fizz

#F0F0C0

Fresh Green · Bisque · Lemon Cream

HEX
#F0F0C0
RGB
rgb(240, 240, 192)
HSL
hsl(60, 62%, 85%)
HSB
hsb(60, 20%, 94%)
CMYK
cmyk(0%, 0%, 20%, 6%)
Oklch
oklch(94.3% 0.062 107.5)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#D8C090

Goose Yellow · BurlyWood · Sunflower

HEX
#D8C090
RGB
rgb(216, 192, 144)
HSL
hsl(40, 48%, 71%)
HSB
hsb(40, 33%, 85%)
CMYK
cmyk(0%, 11%, 33%, 15%)
Oklch
oklch(81.7% 0.069 84.3)

TraditionalGoose Yellow」· PaintSunflower」· Creative Lemon Fizz

#D8D8A8

Fresh Green · Wheat · Sunflower

HEX
#D8D8A8
RGB
rgb(216, 216, 168)
HSL
hsl(60, 38%, 75%)
HSB
hsb(60, 22%, 85%)
CMYK
cmyk(0%, 0%, 22%, 15%)
Oklch
oklch(87.0% 0.063 107.6)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#A8A878

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#A8A878
RGB
rgb(168, 168, 120)
HSL
hsl(60, 22%, 56%)
HSB
hsb(60, 29%, 66%)
CMYK
cmyk(0%, 0%, 29%, 34%)
Oklch
oklch(72.0% 0.066 107.9)

TraditionalAutumn Sage」· PaintSunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0D8A8
A8C0F0

Analogous

F0B4A8
F0D8A8
E4F0A8

Triadic

F0D8A8
A8F0D8
D8A8F0

Split-Comp.

F0D8A8
A8E4F0
B4A8F0

Tetradic

F0D8A8
A8F0B4
A8C0F0
F0A8E4

Contrast Matrix WCAG 2.1 Contrast

F0D8A8
F0F0C0
D8C090
D8D8A8
A8A878
1.2
Fail
1.3
Fail
1.1
Fail
1.8
Fail
1.2
Fail
1.5
Fail
1.3
Fail
2.1
Fail
1.3
Fail
1.5
Fail
1.2
Fail
1.4
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.7
Fail
1.8
Fail
2.1
Fail
1.4
Fail
1.7
Fail
White BG
1.4Fail
1.2Fail
1.8Fail
1.5Fail
2.5Fail
Black BG
15.1AAA
17.9AAA
11.9AAA
14.3AAA
8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E5B4
F0F0CC
CECD9C
D8D8B4
A8A884

Deuteranopia

E7E9B6
F0F0CE
CFD19E
D8D8B6
A8A886

Tritanopia

EFBDBF
F0D5D7
D7A5A7
D8BDBF
A88D8F

Achromatopsia

DADADA
EBEBEB
C2C2C2
D3D3D3
A3A3A3

Shades & Tints Shades & Tints

#F0D8A8

Dark
Light

#F0F0C0

Dark
Light

#D8C090

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0d8a8;
  --color-2: #f0f0c0;
  --color-3: #d8c090;
  --color-4: #d8d8a8;
  --color-5: #a8a878;
}

SCSS

$color-1: #f0d8a8;
$color-2: #f0f0c0;
$color-3: #d8c090;
$color-4: #d8d8a8;
$color-5: #a8a878;

TAILWIND

colors: {
  'brand-1': '#f0d8a8',
  'brand-2': '#f0f0c0',
  'brand-3': '#d8c090',
  'brand-4': '#d8d8a8',
  'brand-5': '#a8a878',
}

RGB Array

[240, 216, 168], [240, 240, 192], [216, 192, 144], [216, 216, 168], [168, 168, 120]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F0D8A8, #F0F0C0, #D8C090, #D8D8A8, #A8A878 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: #f0d8a8; --color-2: #f0f0c0; --color-3: #d8c090; --color-4: #d8d8a8; --color-5: #a8a878. 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