Neon Rose color palette
Pink at full volume. Electric magenta #FF0080 sits at the top, and the shades lighten to bubblegum #FFCCE5 without ever losing saturation. Every step is the same hue, so building a pink brand from it is straightforward. It needs a dark plum, black or white partner for text. Beauty launches and bachelorette parties are where it shines.
Neon Rose palette in use
Use #FFCCE5 for backgrounds and #FF0080 for buttons and headlines. #FF66B2 and #FF99CC suit tags and illustrations, and body text needs a near-black or deep plum.
This pair measures 15.02:1, so it works for body text too. The button uses #FF0080 with black text.
ButtonGood for
- Beauty product launch
- Bachelorette party invite
- Pop music promo
- Nail bar branding
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Neon Rose palette as code
CSS variables
:root {
--neon-rose-1: #FF0080;
--neon-rose-2: #FF3399;
--neon-rose-3: #FF66B2;
--neon-rose-4: #FF99CC;
--neon-rose-5: #FFCCE5;
}Tailwind v4
@theme {
--color-neon-rose-1: #FF0080;
--color-neon-rose-2: #FF3399;
--color-neon-rose-3: #FF66B2;
--color-neon-rose-4: #FF99CC;
--color-neon-rose-5: #FFCCE5;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'neon-rose': {
100: '#FF0080',
200: '#FF3399',
300: '#FF66B2',
400: '#FF99CC',
500: '#FFCCE5',
},SCSS
$neon-rose-1: #FF0080;
$neon-rose-2: #FF3399;
$neon-rose-3: #FF66B2;
$neon-rose-4: #FF99CC;
$neon-rose-5: #FFCCE5;JSON
["#FF0080","#FF3399","#FF66B2","#FF99CC","#FFCCE5"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.