Neon Tokyo Color Psychology & Meaning
Neon Tokyo is maximum visual energy. The near-black base makes each neon color appear to glow — a digital cityscape at midnight.
#0D0D0D
#FF2D6B
#00F5C4
#7B2FBE
Background
Primary Accent
Secondary
Body Text
Neon Tokyo
neonnightvibrant springsummer brandingweb
Fail
WCAG Grade
2.8:1
Contrast Ratio
2,341
Saves
7,823
AI Copies
Use #0D0D0D as the background. Use #FF2D6B as the primary accent. Use #00F5C4 as secondary. Use #7B2FBE as body text/supporting color. Palette mood: Neon Tokyo — neon, night, vibrant.
Hex Codes, RGB & CMYK Color Values
Technical breakdown for the Neon Tokyo color scheme. Use these values for web design (HEX/RGB), print projects (CMYK), or specialized design software (HSL).
| Swatch | Design Role | HEX | RGB | CMYK | HSL |
|---|---|---|---|---|---|
| Background Luminance: 0.4% | 13, 13, 13 | 0%, 0%, 0%, 95% | 0°, 0%, 5% | ||
| Primary Accent Luminance: 24.2% | 255, 45, 107 | 0%, 82%, 58%, 0% | 342°, 100%, 59% | ||
| Secondary Luminance: 69.3% | 0, 245, 196 | 100%, 0%, 20%, 4% | 168°, 100%, 48% | ||
| Body Text Luminance: 10.0% | 123, 47, 190 | 35%, 75%, 0%, 25% | 272°, 60%, 46% |
Color Harmony: Triadic Scheme
The Neon Tokyo palette is built using a triadic relationship between its hues. This ensures that even with high-contrast accents, the overall scheme feels balanced and intentional.
Hue Wheel
A triadic palette is often preferred by professional designers because it balances visual interest with cohesion.
History & Design Context
Japanese city nightscapes of the 1980s inspired this aesthetic. Blade Runner and anime cemented neon-on-black as the visual language of cyberpunk.
Best Design Use Cases
Dark background always. Neon colors used sparingly — they are accents, not surfaces. Never mix more than two neon colors per component.
Industries This Palette Suits
Gaming, nightlife, entertainment, cyberpunk aesthetic.
How to Implement the Neon Tokyo Color Scheme
To use this Neon Tokyo color palette in your web project, you can copy the following CSS variables or Tailwind CSS configuration. These roles ensure your UI maintains accessibility and visual hierarchy.
Option 1: CSS Variables
:root {
/* {name} Palette - ihatecolors.com */{'
'} --color-bg: {colors[0]};{'
'} --color-primary: {colors[1]};{'
'} --color-secondary: {colors[2]};{'
'} --color-text: {colors[3]};{'
'} {'}'}Web Design Tip
Use #0D0D0D for the main background and #FF2D6B for primary buttons. This creates a high-contrast focal point.
Accessibility Note
The contrast ratio between #7B2FBE and #0D0D0D is 2.77:1 (Fail). Ensure your body text remains legible.