← Back to Editor

#FDA3FF · #C051C2 · #A11F9C · #3C1257 · #220336

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

#FDA3FF

Lilac · Violet · Lavender

HEX
#FDA3FF
RGB
rgb(253, 163, 255)
HSL
hsl(299, 100%, 82%)
HSB
hsb(299, 36%, 100%)
CMYK
cmyk(1%, 36%, 0%, 0%)
Oklch
oklch(83.5% 0.157 326.1)

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

#C051C2

Dark Plum · MediumOrchid · Violet

HEX
#C051C2
RGB
rgb(192, 81, 194)
HSL
hsl(299, 48%, 54%)
HSB
hsb(299, 58%, 76%)
CMYK
cmyk(1%, 58%, 0%, 24%)
Oklch
oklch(61.9% 0.196 326.9)

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

#A11F9C

Rose Purple · DarkMagenta · Eggplant

HEX
#A11F9C
RGB
rgb(161, 31, 156)
HSL
hsl(302, 68%, 38%)
HSB
hsb(302, 81%, 63%)
CMYK
cmyk(0%, 81%, 3%, 37%)
Oklch
oklch(50.6% 0.209 329.9)

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

#3C1257

Royal Purple · MidnightBlue · Eggplant

HEX
#3C1257
RGB
rgb(60, 18, 87)
HSL
hsl(277, 66%, 21%)
HSB
hsb(277, 79%, 34%)
CMYK
cmyk(31%, 79%, 0%, 66%)
Oklch
oklch(29.0% 0.119 308.4)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

#220336

Royal Purple · MidnightBlue · Dark Purple

HEX
#220336
RGB
rgb(34, 3, 54)
HSL
hsl(276, 89%, 11%)
HSB
hsb(276, 94%, 21%)
CMYK
cmyk(37%, 94%, 0%, 79%)
Oklch
oklch(20.1% 0.094 307.7)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FDA3FF
A5FFA3

Analogous

D0A3FF
FDA3FF
FFA3D3

Triadic

FDA3FF
FFFDA3
A3FFFD

Split-Comp.

FDA3FF
D3FFA3
A3FFD0

Tetradic

FDA3FF
FFD0A3
A5FFA3
A3D3FF

Contrast Matrix WCAG 2.1 Contrast

FDA3FF
C051C2
A11F9C
3C1257
220336
—
2.3
Fail
3.7
AA Large
8.4
AAA
10.5
AAA
2.3
Fail
—
1.6
Fail
3.7
AA Large
4.6
AA
3.7
AA Large
1.6
Fail
—
2.3
Fail
2.8
Fail
8.4
AAA
3.7
AA Large
2.3
Fail
—
1.2
Fail
10.5
AAA
4.6
AA
2.8
Fail
1.2
Fail
—
White BG
1.8Fail
4.0AA Large
6.6AA
14.8AAA
18.5AAA
Black BG
11.9AAA
5.2AA
3.2AA Large
1.4Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D5E9
908FA7
69687E
2A2946
15142A

Deuteranopia

DBE2E3
969FA0
707A76
2C2F42
161927

Tritanopia

F9D7D3
BA918C
9B6661
3A3936
20201E

Achromatopsia

C8C8C8
7F7F7F
545454
262626
121212

Shades & Tints Shades & Tints

#FDA3FF

Dark
Light

#C051C2

Dark
Light

#A11F9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fda3ff;
  --color-2: #c051c2;
  --color-3: #a11f9c;
  --color-4: #3c1257;
  --color-5: #220336;
}

SCSS

$color-1: #fda3ff;
$color-2: #c051c2;
$color-3: #a11f9c;
$color-4: #3c1257;
$color-5: #220336;

TAILWIND

colors: {
  'brand-1': '#fda3ff',
  'brand-2': '#c051c2',
  'brand-3': '#a11f9c',
  'brand-4': '#3c1257',
  'brand-5': '#220336',
}

RGB Array

[253, 163, 255], [192, 81, 194], [161, 31, 156], [60, 18, 87], [34, 3, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FDA3FF, #C051C2, #A11F9C, #3C1257, #220336 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: #fda3ff; --color-2: #c051c2; --color-3: #a11f9c; --color-4: #3c1257; --color-5: #220336. 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