← Back to Editor

#FC8C86 · #F5F5D5 · #E7EBAE · #B7CF78 · #8FB061

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

#FC8C86

Peach Pink · LightCoral · Coral Red

HEX
#FC8C86
RGB
rgb(252, 140, 134)
HSL
hsl(3, 95%, 76%)
HSB
hsb(3, 47%, 99%)
CMYK
cmyk(0%, 44%, 47%, 1%)
Oklch
oklch(76.0% 0.137 24.0)

TraditionalPeach Pink」· PaintCoral Red」· Creative Blush Sunrise

#F5F5D5

Fresh Green · Beige · Lemon Cream

HEX
#F5F5D5
RGB
rgb(245, 245, 213)
HSL
hsl(60, 62%, 90%)
HSB
hsb(60, 13%, 96%)
CMYK
cmyk(0%, 0%, 13%, 4%)
Oklch
oklch(96.2% 0.042 107.2)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#E7EBAE

Fresh Green · Wheat · Lemon Cream

HEX
#E7EBAE
RGB
rgb(231, 235, 174)
HSL
hsl(64, 60%, 80%)
HSB
hsb(64, 26%, 92%)
CMYK
cmyk(2%, 0%, 26%, 8%)
Oklch
oklch(92.2% 0.079 111.0)

TraditionalFresh Green」· PaintLemon Cream」· Creative Lemon Fizz

#B7CF78

Willow Green · Tan · Apple Green

HEX
#B7CF78
RGB
rgb(183, 207, 120)
HSL
hsl(77, 48%, 64%)
HSB
hsb(77, 42%, 81%)
CMYK
cmyk(12%, 0%, 42%, 19%)
Oklch
oklch(81.7% 0.116 121.6)

TraditionalWillow Green」· PaintApple Green」· Creative Mint Breeze

#8FB061

Grass Green · DarkSeaGreen · Olive Green

HEX
#8FB061
RGB
rgb(143, 176, 97)
HSL
hsl(85, 33%, 54%)
HSB
hsb(85, 45%, 69%)
CMYK
cmyk(19%, 0%, 45%, 31%)
Oklch
oklch(71.4% 0.112 127.6)

TraditionalGrass Green」· PaintOlive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FC8C86
88F6FC

Analogous

FC88BC
FC8C86
FCC888

Triadic

FC8C86
88FC8D
8D88FC

Split-Comp.

FC8C86
88FCC8
88BCFC

Tetradic

FC8C86
BCFC88
88F6FC
C888FC

Contrast Matrix WCAG 2.1 Contrast

FC8C86
F5F5D5
E7EBAE
B7CF78
8FB061
2.0
Fail
1.8
Fail
1.3
Fail
1.1
Fail
2.0
Fail
1.1
Fail
1.5
Fail
2.2
Fail
1.8
Fail
1.1
Fail
1.4
Fail
2.0
Fail
1.3
Fail
1.5
Fail
1.4
Fail
1.4
Fail
1.1
Fail
2.2
Fail
2.0
Fail
1.4
Fail
White BG
2.3Fail
1.1Fail
1.2Fail
1.7Fail
2.5Fail
Black BG
9.2AAA
18.9AAA
16.9AAA
12.2AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CCCA87
F5F5DD
E9E9BD
C1C28D
9D9E74

Deuteranopia

D2DA88
F5F5DF
E9E8C0
C0BE92
9B9979

Tritanopia

F68989
F5E3E4
E7C8CB
B89EA1
918387

Achromatopsia

ADADAD
F1F1F1
E3E3E3
BEBEBE
9D9D9D

Shades & Tints Shades & Tints

#FC8C86

Dark
Light

#F5F5D5

Dark
Light

#E7EBAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fc8c86;
  --color-2: #f5f5d5;
  --color-3: #e7ebae;
  --color-4: #b7cf78;
  --color-5: #8fb061;
}

SCSS

$color-1: #fc8c86;
$color-2: #f5f5d5;
$color-3: #e7ebae;
$color-4: #b7cf78;
$color-5: #8fb061;

TAILWIND

colors: {
  'brand-1': '#fc8c86',
  'brand-2': '#f5f5d5',
  'brand-3': '#e7ebae',
  'brand-4': '#b7cf78',
  'brand-5': '#8fb061',
}

RGB Array

[252, 140, 134], [245, 245, 213], [231, 235, 174], [183, 207, 120], [143, 176, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #FC8C86, #F5F5D5, #E7EBAE, #B7CF78, #8FB061 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: #fc8c86; --color-2: #f5f5d5; --color-3: #e7ebae; --color-4: #b7cf78; --color-5: #8fb061. 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