Neon Lights color palette
Bent glass tubes over a bar: pink-red #FF3860, orange, gold #FFD700, aqua #00D1B2 and violet #7C3AED. Each one is fully saturated, and together they need a dark background to look like light. Violet is the deepest and can handle text on light surfaces when you need a daytime version. Nightclubs and event ticketing apps can use it almost unchanged.
Neon Lights palette in use
On a near-black page, set text in #FFD700 or #00D1B2 and use #FF3860 for buttons. On light layouts, switch text to #7C3AED and keep #FF6B00 for badges and alerts.
This pair measures 14.97:1, so it works for body text too. The button uses #7C3AED with white text.
ButtonGood for
- Nightclub website
- Event ticketing app
- Cocktail bar menu
- Late-night food truck
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#7C3AED | #FFD700 | 4.06:1 | AA large |
Neon Lights palette as code
CSS variables
:root {
--neon-lights-1: #FF3860;
--neon-lights-2: #FF6B00;
--neon-lights-3: #FFD700;
--neon-lights-4: #00D1B2;
--neon-lights-5: #7C3AED;
}Tailwind v4
@theme {
--color-neon-lights-1: #FF3860;
--color-neon-lights-2: #FF6B00;
--color-neon-lights-3: #FFD700;
--color-neon-lights-4: #00D1B2;
--color-neon-lights-5: #7C3AED;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'neon-lights': {
100: '#FF3860',
200: '#FF6B00',
300: '#FFD700',
400: '#00D1B2',
500: '#7C3AED',
},SCSS
$neon-lights-1: #FF3860;
$neon-lights-2: #FF6B00;
$neon-lights-3: #FFD700;
$neon-lights-4: #00D1B2;
$neon-lights-5: #7C3AED;JSON
["#FF3860","#FF6B00","#FFD700","#00D1B2","#7C3AED"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.