← Back to Editor

#FF8D98 · #C155FF · #FF9F8D · #F500CC · #322E2E

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

#FF8D98

Peach Pink · LightCoral · Coral Red

HEX
#FF8D98
RGB
rgb(255, 141, 152)
HSL
hsl(354, 100%, 78%)
HSB
hsb(354, 45%, 100%)
CMYK
cmyk(0%, 45%, 40%, 0%)
Oklch
oklch(76.9% 0.138 14.7)

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

#C155FF

Lilac · MediumOrchid · Lilac Purple

HEX
#C155FF
RGB
rgb(193, 85, 255)
HSL
hsl(278, 100%, 67%)
HSB
hsb(278, 67%, 100%)
CMYK
cmyk(24%, 67%, 0%, 0%)
Oklch
oklch(66.1% 0.247 310.5)

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

#FF9F8D

Peach Pink · LightSalmon · Coral Red

HEX
#FF9F8D
RGB
rgb(255, 159, 141)
HSL
hsl(9, 100%, 78%)
HSB
hsb(9, 45%, 100%)
CMYK
cmyk(0%, 38%, 45%, 0%)
Oklch
oklch(79.6% 0.118 31.3)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F500CC

Rose Purple · Magenta · Violet

HEX
#F500CC
RGB
rgb(245, 0, 204)
HSL
hsl(310, 100%, 48%)
HSB
hsb(310, 100%, 96%)
CMYK
cmyk(0%, 100%, 17%, 4%)
Oklch
oklch(65.8% 0.288 338.2)

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

#322E2E

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#322E2E
RGB
rgb(50, 46, 46)
HSL
hsl(0, 4%, 19%)
HSB
hsb(0, 8%, 20%)
CMYK
cmyk(0%, 8%, 8%, 80%)
Oklch
oklch(30.5% 0.006 17.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF8D98
8FFFF4

Analogous

FF8FD2
FF8D98
FFBC8F

Triadic

FF8D98
9AFF8F
8F9AFF

Split-Comp.

FF8D98
8FFFBC
8FD2FF

Tetradic

FF8D98
D2FF8F
8FFFF4
BC8FFF

Contrast Matrix WCAG 2.1 Contrast

FF8D98
C155FF
FF9F8D
F500CC
322E2E
—
1.6
Fail
1.1
Fail
1.7
Fail
6.1
AA
1.6
Fail
—
1.8
Fail
1.0
Fail
3.8
AA Large
1.1
Fail
1.8
Fail
—
1.8
Fail
6.8
AA
1.7
Fail
1.0
Fail
1.8
Fail
—
3.7
AA Large
6.1
AA
3.8
AA Large
6.8
AA
3.7
AA Large
—
White BG
2.2Fail
3.5AA Large
2.0Fail
3.6AA Large
13.4AAA
Black BG
9.5AAA
6.0AA
10.6AAA
5.8AA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECD95
9291D6
D5D591
8B899B
30302E

Deuteranopia

D4DD95
99A1CC
DBE292
99AC8F
31312E

Tritanopia

F99393
BCB5AE
FA9596
E9746B
322E2E

Achromatopsia

B0B0B0
898989
BABABA
616161
2F2F2F

Shades & Tints Shades & Tints

#FF8D98

Dark
Light

#C155FF

Dark
Light

#FF9F8D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff8d98;
  --color-2: #c155ff;
  --color-3: #ff9f8d;
  --color-4: #f500cc;
  --color-5: #322e2e;
}

SCSS

$color-1: #ff8d98;
$color-2: #c155ff;
$color-3: #ff9f8d;
$color-4: #f500cc;
$color-5: #322e2e;

TAILWIND

colors: {
  'brand-1': '#ff8d98',
  'brand-2': '#c155ff',
  'brand-3': '#ff9f8d',
  'brand-4': '#f500cc',
  'brand-5': '#322e2e',
}

RGB Array

[255, 141, 152], [193, 85, 255], [255, 159, 141], [245, 0, 204], [50, 46, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF8D98, #C155FF, #FF9F8D, #F500CC, #322E2E 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: #ff8d98; --color-2: #c155ff; --color-3: #ff9f8d; --color-4: #f500cc; --color-5: #322e2e. 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