← Back to Editor

#F387FF · #ABBAE0 · #EBB77C · #FCA986 · #FF9E9E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F387FF

Lilac · Violet · Lilac Purple

HEX
#F387FF
RGB
rgb(243, 135, 255)
HSL
hsl(294, 100%, 76%)
HSB
hsb(294, 47%, 100%)
CMYK
cmyk(5%, 47%, 0%, 0%)
Oklch
oklch(78.2% 0.197 323.5)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#ABBAE0

Azure · LightSteelBlue · Cobalt Blue

HEX
#ABBAE0
RGB
rgb(171, 186, 224)
HSL
hsl(223, 46%, 77%)
HSB
hsb(223, 24%, 88%)
CMYK
cmyk(24%, 17%, 0%, 12%)
Oklch
oklch(79.0% 0.057 268.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#EBB77C

Ginger · BurlyWood · Warm Sun

HEX
#EBB77C
RGB
rgb(235, 183, 124)
HSL
hsl(32, 74%, 70%)
HSB
hsb(32, 47%, 92%)
CMYK
cmyk(0%, 22%, 47%, 8%)
Oklch
oklch(81.4% 0.097 69.3)

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

#FCA986

Apricot · LightSalmon · Peach Orange

HEX
#FCA986
RGB
rgb(252, 169, 134)
HSL
hsl(18, 95%, 76%)
HSB
hsb(18, 47%, 99%)
CMYK
cmyk(0%, 33%, 47%, 1%)
Oklch
oklch(80.8% 0.109 43.6)

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

#FF9E9E

Peach Pink · LightSalmon · Cherry Blossom

HEX
#FF9E9E
RGB
rgb(255, 158, 158)
HSL
hsl(0, 100%, 81%)
HSB
hsb(0, 38%, 100%)
CMYK
cmyk(0%, 38%, 38%, 0%)
Oklch
oklch(79.8% 0.116 20.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F387FF
91FF85

Analogous

B685FF
F387FF
FF85CE

Triadic

F387FF
FFF385
85FFF3

Split-Comp.

F387FF
CEFF85
85FFB6

Tetradic

F387FF
FFB685
91FF85
85CEFF

Contrast Matrix WCAG 2.1 Contrast

F387FF
ABBAE0
EBB77C
FCA986
FF9E9E
—
1.1
Fail
1.2
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.1
Fail
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
2.2Fail
1.9Fail
1.8Fail
1.9Fail
2.0Fail
Black BG
9.7AAA
10.8AAA
11.6AAA
11.2AAA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C3E2
B1B2D7
D4D48A
D8D78E
D5D49E

Deuteranopia

CBD3DB
B1B0D5
D8DB8E
DDE391
DBE29E

Tritanopia

EECBC6
ACD0CE
E89698
F89597
FA9E9E

Achromatopsia

B5B5B5
BABABA
C0C0C0
BEBEBE
BBBBBB

Shades & Tints Shades & Tints

#F387FF

Dark
Light

#ABBAE0

Dark
Light

#EBB77C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f387ff;
  --color-2: #abbae0;
  --color-3: #ebb77c;
  --color-4: #fca986;
  --color-5: #ff9e9e;
}

SCSS

$color-1: #f387ff;
$color-2: #abbae0;
$color-3: #ebb77c;
$color-4: #fca986;
$color-5: #ff9e9e;

TAILWIND

colors: {
  'brand-1': '#f387ff',
  'brand-2': '#abbae0',
  'brand-3': '#ebb77c',
  'brand-4': '#fca986',
  'brand-5': '#ff9e9e',
}

RGB Array

[243, 135, 255], [171, 186, 224], [235, 183, 124], [252, 169, 134], [255, 158, 158]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F387FF, #ABBAE0, #EBB77C, #FCA986, #FF9E9E is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs. Vivid colors effectively attract user attention. 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: #f387ff; --color-2: #abbae0; --color-3: #ebb77c; --color-4: #fca986; --color-5: #ff9e9e. 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 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