← Back to Editor

#F8D9C4 · #F5ABAC · #FC7F8F · #A7205A · #870148

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 PostIllustrationData Visualization

Color Details Color Details

#F8D9C4

Apricot · Bisque · Peach Orange

HEX
#F8D9C4
RGB
rgb(248, 217, 196)
HSL
hsl(24, 79%, 87%)
HSB
hsb(24, 21%, 97%)
CMYK
cmyk(0%, 13%, 21%, 3%)
Oklch
oklch(90.6% 0.045 56.2)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F5ABAC

Peach Pink · LightPink · Cherry Blossom

HEX
#F5ABAC
RGB
rgb(245, 171, 172)
HSL
hsl(359, 79%, 82%)
HSB
hsb(359, 30%, 96%)
CMYK
cmyk(0%, 30%, 30%, 4%)
Oklch
oklch(81.2% 0.087 18.3)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#FC7F8F

Peach Pink · LightCoral · Coral Red

HEX
#FC7F8F
RGB
rgb(252, 127, 143)
HSL
hsl(352, 95%, 74%)
HSB
hsb(352, 50%, 99%)
CMYK
cmyk(0%, 50%, 43%, 1%)
Oklch
oklch(74.2% 0.153 13.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#A7205A

Dark Violet · Brown · Camellia

HEX
#A7205A
RGB
rgb(167, 32, 90)
HSL
hsl(334, 68%, 39%)
HSB
hsb(334, 81%, 65%)
CMYK
cmyk(0%, 81%, 46%, 35%)
Oklch
oklch(48.7% 0.174 0.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#870148

Rose Purple · Purple · Camellia

HEX
#870148
RGB
rgb(135, 1, 72)
HSL
hsl(328, 99%, 27%)
HSB
hsb(328, 99%, 53%)
CMYK
cmyk(0%, 99%, 47%, 47%)
Oklch
oklch(40.5% 0.164 358.4)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F8D9C4
C4E3F8

Analogous

F8C4C9
F8D9C4
F8F3C4

Triadic

F8D9C4
C4F8D9
D9C4F8

Split-Comp.

F8D9C4
C4F8F3
C4C9F8

Tetradic

F8D9C4
C9F8C4
C4E3F8
F3C4F8

Contrast Matrix WCAG 2.1 Contrast

F8D9C4
F5ABAC
FC7F8F
A7205A
870148
—
1.4
Fail
1.8
Fail
5.2
AA
7.4
AAA
1.4
Fail
—
1.3
Fail
3.8
AA Large
5.3
AA
1.8
Fail
1.3
Fail
—
2.9
Fail
4.0
AA Large
5.2
AA
3.8
AA Large
2.9
Fail
—
1.4
Fail
7.4
AAA
5.3
AA
4.0
AA Large
1.4
Fail
—
White BG
1.3Fail
1.9Fail
2.4Fail
7.0AAA
9.9AAA
Black BG
15.7AAA
11.3AAA
8.6AAA
3.0Fail
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEAC9
D5D4AC
C6C58B
6D6B4C
4D4C37

Deuteranopia

ECEFCA
D9DFAC
CDD68A
747E49
555F33

Tritanopia

F6CDCE
F1ACAC
F68887
A0413E
802926

Achromatopsia

E0E0E0
C1C1C1
A6A6A6
4F4F4F
313131

Shades & Tints Shades & Tints

#F8D9C4

Dark
Light

#F5ABAC

Dark
Light

#FC7F8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f8d9c4;
  --color-2: #f5abac;
  --color-3: #fc7f8f;
  --color-4: #a7205a;
  --color-5: #870148;
}

SCSS

$color-1: #f8d9c4;
$color-2: #f5abac;
$color-3: #fc7f8f;
$color-4: #a7205a;
$color-5: #870148;

TAILWIND

colors: {
  'brand-1': '#f8d9c4',
  'brand-2': '#f5abac',
  'brand-3': '#fc7f8f',
  'brand-4': '#a7205a',
  'brand-5': '#870148',
}

RGB Array

[248, 217, 196], [245, 171, 172], [252, 127, 143], [167, 32, 90], [135, 1, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #F8D9C4, #F5ABAC, #FC7F8F, #A7205A, #870148 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f8d9c4; --color-2: #f5abac; --color-3: #fc7f8f; --color-4: #a7205a; --color-5: #870148. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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