Neon Tokyo color palette
Rainy Shinjuku signage at 2 a.m.: deep night purple #0D0221 behind hot magenta #FF0090, aqua #00F5D4, violet #9B5DE5 and electric yellow #FEE440. The dark base makes every accent look backlit. It's busy by nature, so keep large areas dark and use the brights in small doses. Anime fan sites and ramen shops are where it looks most natural.
Neon Tokyo palette in use
Keep the background #0D0221 and the text #00F5D4 or #FEE440. #FF0090 makes the primary button, and #9B5DE5 suits secondary buttons, tags and outlines.
This pair measures 15.63:1, so it works for body text too. The button uses #FF0090 with black text.
ButtonGood for
- Anime fan site
- Karaoke bar flyer
- Ramen shop menu
- Streetwear drop page
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 |
|---|---|---|---|
#0D0221 | #FEE440 | 15.63:1 | AAA |
#0D0221 | #00F5D4 | 14.32:1 | AAA |
#0D0221 | #FF0090 | 5.39:1 | AA |
#0D0221 | #9B5DE5 | 4.85:1 | AA |
#9B5DE5 | #FEE440 | 3.21:1 | AA large |
Neon Tokyo palette as code
CSS variables
:root {
--neon-tokyo-1: #0D0221;
--neon-tokyo-2: #FF0090;
--neon-tokyo-3: #00F5D4;
--neon-tokyo-4: #9B5DE5;
--neon-tokyo-5: #FEE440;
}Tailwind v4
@theme {
--color-neon-tokyo-1: #0D0221;
--color-neon-tokyo-2: #FF0090;
--color-neon-tokyo-3: #00F5D4;
--color-neon-tokyo-4: #9B5DE5;
--color-neon-tokyo-5: #FEE440;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'neon-tokyo': {
100: '#0D0221',
200: '#FF0090',
300: '#00F5D4',
400: '#9B5DE5',
500: '#FEE440',
},SCSS
$neon-tokyo-1: #0D0221;
$neon-tokyo-2: #FF0090;
$neon-tokyo-3: #00F5D4;
$neon-tokyo-4: #9B5DE5;
$neon-tokyo-5: #FEE440;JSON
["#0D0221","#FF0090","#00F5D4","#9B5DE5","#FEE440"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.