← Back to Editor

#F500A1 · #8EBFFF · #F6EDF2 · #C4C3D0 · #030416

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

Color Details Color Details

#F500A1

Rose Purple · DeepPink · Camellia

HEX
#F500A1
RGB
rgb(245, 0, 161)
HSL
hsl(321, 100%, 48%)
HSB
hsb(321, 100%, 96%)
CMYK
cmyk(0%, 100%, 34%, 4%)
Oklch
oklch(63.9% 0.266 350.4)

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

#8EBFFF

Azure · LightSkyBlue · Cobalt Blue

HEX
#8EBFFF
RGB
rgb(142, 191, 255)
HSL
hsl(214, 100%, 78%)
HSB
hsb(214, 44%, 100%)
CMYK
cmyk(44%, 25%, 0%, 0%)
Oklch
oklch(79.4% 0.105 255.4)

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

#F6EDF2

Mauve · SeaShell · Cherry Blossom

HEX
#F6EDF2
RGB
rgb(246, 237, 242)
HSL
hsl(327, 33%, 95%)
HSB
hsb(327, 4%, 96%)
CMYK
cmyk(0%, 4%, 2%, 4%)
Oklch
oklch(95.5% 0.012 342.6)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#C4C3D0

Wisteria · Silver · Cobalt Blue

HEX
#C4C3D0
RGB
rgb(196, 195, 208)
HSL
hsl(245, 12%, 79%)
HSB
hsb(245, 6%, 82%)
CMYK
cmyk(6%, 6%, 0%, 18%)
Oklch
oklch(82.2% 0.018 289.5)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#030416

Indigo · Black · Deep Sea Blue

HEX
#030416
RGB
rgb(3, 4, 22)
HSL
hsl(237, 76%, 5%)
HSB
hsb(237, 86%, 9%)
CMYK
cmyk(86%, 82%, 0%, 91%)
Oklch
oklch(12.1% 0.043 273.9)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F500A1
00F556

Analogous

D000F5
F500A1
F50025

Triadic

F500A1
9FF500
009FF5

Split-Comp.

F500A1
25F500
00F5D0

Tetradic

F500A1
F5D000
00F556
0025F5

Contrast Matrix WCAG 2.1 Contrast

F500A1
8EBFFF
F6EDF2
C4C3D0
030416
—
2.0
Fail
3.4
AA Large
2.2
Fail
5.2
AA
2.0
Fail
—
1.7
Fail
1.1
Fail
10.7
AAA
3.4
AA Large
1.7
Fail
—
1.5
Fail
17.7
AAA
2.2
Fail
1.1
Fail
1.5
Fail
—
11.7
AAA
5.2
AA
10.7
AAA
17.7
AAA
11.7
AAA
—
White BG
3.9AA Large
1.9Fail
1.1Fail
1.7Fail
20.3AAA
Black BG
5.4AA
11.0AAA
18.3AAA
12.1AAA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B897A
A3A4F0
F2F2F1
C4C4CD
030312

Deuteranopia

99AC71
A09DEC
F3F3F0
C4C4CC
030311

Tritanopia

E95B55
90E3E1
F6F0F0
C4CACA
030E0D

Achromatopsia

5C5C5C
B8B8B8
F0F0F0
C5C5C5
060606

Shades & Tints Shades & Tints

#F500A1

Dark
Light

#8EBFFF

Dark
Light

#F6EDF2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f500a1;
  --color-2: #8ebfff;
  --color-3: #f6edf2;
  --color-4: #c4c3d0;
  --color-5: #030416;
}

SCSS

$color-1: #f500a1;
$color-2: #8ebfff;
$color-3: #f6edf2;
$color-4: #c4c3d0;
$color-5: #030416;

TAILWIND

colors: {
  'brand-1': '#f500a1',
  'brand-2': '#8ebfff',
  'brand-3': '#f6edf2',
  'brand-4': '#c4c3d0',
  'brand-5': '#030416',
}

RGB Array

[245, 0, 161], [142, 191, 255], [246, 237, 242], [196, 195, 208], [3, 4, 22]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F500A1, #8EBFFF, #F6EDF2, #C4C3D0, #030416 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: #f500a1; --color-2: #8ebfff; --color-3: #f6edf2; --color-4: #c4c3d0; --color-5: #030416. 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