What are the hex codes in the Neon Pink & Mauve Tale palette?

The Neon Pink & Mauve Tale color palette consists of Raisin #301427, Neon Pink #FA00BD, Mauve #BBB8FF, Mauve #F8A1FF.

How should I use the Neon Pink & Mauve Tale palette on a website?

Use Mauve #F8A1FF as the background, Raisin #301427 for text, Neon Pink #FA00BD for buttons and links, and Mauve #BBB8FF for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Mauve at 9.19:1.

Which colors in Neon Pink & Mauve Tale have enough contrast for text?

The highest-contrast pair is #301427 on #F8A1FF with a ratio of 9.19:1, which passes WCAG AA for normal text.

#301427Raisin

#FA00BDNeon Pink

#BBB8FFMauve

#F8A1FFMauve

Neon Pink & Mauve Tale color palette

Cyberpunk Vibrant Neon Purple

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#301427`	`rgb(48, 20, 39)`	`hsl(319, 41%, 13%)`	`oklch(24.1% 0.054 341)`
Neon Pink	`#FA00BD`	`rgb(250, 0, 189)`	`hsl(315, 100%, 49%)`	`oklch(65.9% 0.282 343)`
Mauve	`#BBB8FF`	`rgb(187, 184, 255)`	`hsl(243, 100%, 86%)`	`oklch(81.1% 0.100 286)`
Mauve	`#F8A1FF`	`rgb(248, 161, 255)`	`hsl(296, 100%, 82%)`	`oklch(82.6% 0.157 324)`

Why it works and how to use it

Neon Pink & Mauve Tale is a vivid split color palette tagged cyberpunk, vibrant, neon. A split scheme: Raisin plays against Mauve across roughly 76° of hue. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Neon Pink takes the lead while the rest support. Lightness runs from 13% to 86%. Well suited to websites, presentations and branding.

Background: Mauve (#F8A1FF) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#301427) on #F8A1FF gives 9.19:1, passing WCAG AAA.
Primary: Neon Pink (#FA00BD) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Mauve (#BBB8FF) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Mauve at 9.19:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Neon Pink & Mauve Tale

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#301427

#FA00BD

#BBB8FF

#F8A1FF

Color-blind check: under protanopia and deuteranopia, Mauve and Mauve become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#301427` on `#F8A1FF`	Aa	9.19:1	AAA
`#301427` on `#BBB8FF`	Aa	9.09:1	AAA
`#301427` on `#FA00BD`	Aa	4.62:1	AA
`#FA00BD` on `#F8A1FF`	Aa	1.99:1	Fail
`#FA00BD` on `#BBB8FF`	Aa	1.97:1	Fail
`#BBB8FF` on `#F8A1FF`	Aa	1.01:1	Fail

Similar palettes 24 more in this mood