← Back to Editor

#CFE096 · #F5AB87 · #F26D78 · #CC4569 · #663342

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

#CFE096

Willow Green · Khaki · Apple Green

HEX
#CFE096
RGB
rgb(207, 224, 150)
HSL
hsl(74, 54%, 73%)
HSB
hsb(74, 33%, 88%)
CMYK
cmyk(8%, 0%, 33%, 12%)
Oklch
oklch(87.7% 0.098 119.0)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#F5AB87

Apricot · LightSalmon · Warm Sun

HEX
#F5AB87
RGB
rgb(245, 171, 135)
HSL
hsl(20, 85%, 75%)
HSB
hsb(20, 45%, 96%)
CMYK
cmyk(0%, 30%, 45%, 4%)
Oklch
oklch(80.4% 0.100 46.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#F26D78

Peach Pink · LightCoral · Coral Red

HEX
#F26D78
RGB
rgb(242, 109, 120)
HSL
hsl(355, 84%, 69%)
HSB
hsb(355, 55%, 95%)
CMYK
cmyk(0%, 55%, 50%, 5%)
Oklch
oklch(69.8% 0.164 17.3)

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

#CC4569

Dark Violet · MediumVioletRed · Rose Pink

HEX
#CC4569
RGB
rgb(204, 69, 105)
HSL
hsl(344, 57%, 54%)
HSB
hsb(344, 66%, 80%)
CMYK
cmyk(0%, 66%, 49%, 20%)
Oklch
oklch(58.8% 0.172 8.0)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#663342

Dark Violet · DarkOliveGreen · Camellia

HEX
#663342
RGB
rgb(102, 51, 66)
HSL
hsl(342, 33%, 30%)
HSB
hsb(342, 50%, 40%)
CMYK
cmyk(0%, 50%, 35%, 60%)
Oklch
oklch(39.2% 0.075 2.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFE096
A695DF

Analogous

DFCC95
CFE096
A9DF95

Triadic

CFE096
95CEDF
DF95CE

Split-Comp.

CFE096
95A9DF
CC95DF

Tetradic

CFE096
95DFCC
A695DF
DF95A9

Contrast Matrix WCAG 2.1 Contrast

CFE096
F5AB87
F26D78
CC4569
663342
—
1.3
Fail
2.0
Fail
3.2
AA Large
7.0
AA
1.3
Fail
—
1.5
Fail
2.4
Fail
5.2
AA
2.0
Fail
1.5
Fail
—
1.6
Fail
3.4
AA Large
3.2
AA Large
2.4
Fail
1.6
Fail
—
2.2
Fail
7.0
AA
5.2
AA
3.4
AA Large
2.2
Fail
—
White BG
1.4Fail
1.9Fail
2.9Fail
4.5AA
9.9AAA
Black BG
14.8AAA
11.1AAA
7.2AAA
4.6AA
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D7A8
D5D490
B8B775
929060
504F3E

Deuteranopia

D5D4AC
D9DF92
C0CA75
99A35E
53573D

Tritanopia

D0B6B9
F19798
EB7373
C55958
633C3B

Achromatopsia

D2D2D2
BDBDBD
969696
717171
444444

Shades & Tints Shades & Tints

#CFE096

Dark
Light

#F5AB87

Dark
Light

#F26D78

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfe096;
  --color-2: #f5ab87;
  --color-3: #f26d78;
  --color-4: #cc4569;
  --color-5: #663342;
}

SCSS

$color-1: #cfe096;
$color-2: #f5ab87;
$color-3: #f26d78;
$color-4: #cc4569;
$color-5: #663342;

TAILWIND

colors: {
  'brand-1': '#cfe096',
  'brand-2': '#f5ab87',
  'brand-3': '#f26d78',
  'brand-4': '#cc4569',
  'brand-5': '#663342',
}

RGB Array

[207, 224, 150], [245, 171, 135], [242, 109, 120], [204, 69, 105], [102, 51, 66]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #CFE096, #F5AB87, #F26D78, #CC4569, #663342 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: #cfe096; --color-2: #f5ab87; --color-3: #f26d78; --color-4: #cc4569; --color-5: #663342. 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