← Back to Editor

#FFBF96 · #F78DDC · #C86EC8 · #AF4EAC · #503070

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFBF96

Apricot · BurlyWood · Peach Orange

HEX
#FFBF96
RGB
rgb(255, 191, 150)
HSL
hsl(23, 100%, 79%)
HSB
hsb(23, 41%, 100%)
CMYK
cmyk(0%, 25%, 41%, 0%)
Oklch
oklch(85.4% 0.092 53.8)

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

#F78DDC

Mauve · Violet · Lilac Purple

HEX
#F78DDC
RGB
rgb(247, 141, 220)
HSL
hsl(315, 87%, 76%)
HSB
hsb(315, 43%, 97%)
CMYK
cmyk(0%, 43%, 11%, 3%)
Oklch
oklch(78.1% 0.159 337.3)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#C86EC8

Mauve · Orchid · Lilac Purple

HEX
#C86EC8
RGB
rgb(200, 110, 200)
HSL
hsl(300, 45%, 61%)
HSB
hsb(300, 45%, 78%)
CMYK
cmyk(0%, 45%, 0%, 22%)
Oklch
oklch(67.1% 0.160 327.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#AF4EAC

Rose Purple · MediumOrchid · Violet

HEX
#AF4EAC
RGB
rgb(175, 78, 172)
HSL
hsl(302, 38%, 50%)
HSB
hsb(302, 55%, 69%)
CMYK
cmyk(0%, 55%, 2%, 31%)
Oklch
oklch(58.2% 0.171 328.7)

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

#503070

Dark Plum · DarkSlateBlue · Eggplant

HEX
#503070
RGB
rgb(80, 48, 112)
HSL
hsl(270, 40%, 31%)
HSB
hsb(270, 57%, 44%)
CMYK
cmyk(29%, 57%, 0%, 56%)
Oklch
oklch(38.0% 0.109 304.9)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBF96
94D6FF

Analogous

FF94A0
FFBF96
FFF394

Triadic

FFBF96
94FFBD
BD94FF

Split-Comp.

FFBF96
94FFF3
94A0FF

Tetradic

FFBF96
A0FF94
94D6FF
F394FF

Contrast Matrix WCAG 2.1 Contrast

FFBF96
F78DDC
C86EC8
AF4EAC
503070
—
1.3
Fail
2.0
Fail
2.9
Fail
6.6
AA
1.3
Fail
—
1.5
Fail
2.2
Fail
4.9
AA
2.0
Fail
1.5
Fail
—
1.4
Fail
3.3
AA Large
2.9
Fail
2.2
Fail
1.4
Fail
—
2.3
Fail
6.6
AA
4.9
AA
3.3
AA Large
2.3
Fail
—
White BG
1.6Fail
2.1Fail
3.2AA Large
4.7AA
10.5AAA
Black BG
13.1AAA
9.8AAA
6.5AA
4.5AA
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E3E3A0
C9C8C9
A1A0B2
858495
424261

Deuteranopia

E7ECA2
CFD7C4
A6ADAD
8B9290
44465D

Tritanopia

FCA8A9
F2BAB6
C4A19D
AA837F
4E5452

Achromatopsia

CDCDCD
B6B6B6
939393
767676
414141

Shades & Tints Shades & Tints

#FFBF96

Dark
Light

#F78DDC

Dark
Light

#C86EC8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbf96;
  --color-2: #f78ddc;
  --color-3: #c86ec8;
  --color-4: #af4eac;
  --color-5: #503070;
}

SCSS

$color-1: #ffbf96;
$color-2: #f78ddc;
$color-3: #c86ec8;
$color-4: #af4eac;
$color-5: #503070;

TAILWIND

colors: {
  'brand-1': '#ffbf96',
  'brand-2': '#f78ddc',
  'brand-3': '#c86ec8',
  'brand-4': '#af4eac',
  'brand-5': '#503070',
}

RGB Array

[255, 191, 150], [247, 141, 220], [200, 110, 200], [175, 78, 172], [80, 48, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBF96, #F78DDC, #C86EC8, #AF4EAC, #503070 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: #ffbf96; --color-2: #f78ddc; --color-3: #c86ec8; --color-4: #af4eac; --color-5: #503070. 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 general-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