Neon Palette
CSS variables
:root {
--color-1: #FF006E;
--color-2: #FB5607;
--color-3: #FFBE0B;
--color-4: #8338EC;
--color-5: #3A86FF;
}Tailwind config
// tailwind.config.js
colors: {
"neon-1": "#FF006E",
"neon-2": "#FB5607",
"neon-3": "#FFBE0B",
"neon-4": "#8338EC",
"neon-5": "#3A86FF",
}About this palette
The Neon palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
Aa
#FF006ENear-black4.93:1AAAa
#FB5607Near-black5.79:1AAAa
#FFBE0BNear-black11.36:1AAAa
#8338ECWhite5.61:1AAAa
#3A86FFNear-black5.43:1AAThese colours on each other
None of the 20 combinations inside this palette reach 4.5:1, so pair its colours with white or near-black rather than with each other.
| text \\ background | #FF006E | #FB5607 | #FFBE0B | #8338EC | #3A86FF |
|---|---|---|---|---|---|
| #FF006E | 1.18Fails | 2.30Fails | 1.46Fails | 1.10Fails | |
| #FB5607 | 1.18Fails | 1.96Fails | 1.72Fails | 1.07Fails | |
| #FFBE0B | 2.30Fails | 1.96Fails | 3.37Large only | 2.09Fails | |
| #8338EC | 1.46Fails | 1.72Fails | 3.37Large only | 1.61Fails | |
| #3A86FF | 1.10Fails | 1.07Fails | 2.09Fails | 1.61Fails |
More palettes