Back to palettes

Palette

Neo Tokyo Pop

A high-energy blend of electric colors, perfect for capturing a vibrant, futuristic city nightlife.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neo Tokyo Pop reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Neo Tokyo Pop.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FF00FF#00FFFF#FFD700#8A2BE2#39FF14

Palette guide

How to use Neo Tokyo Pop

Overview

The Neo Tokyo Pop palette is a high-energy blend of electric colors, perfectly capturing the vibrant, futuristic nightlife of a bustling metropolis. It combines striking #FF00FF (magenta), luminous #00FFFF (cyan), bright #FFD700 (cyber gold), rich #8A2BE2 (blue violet), and intense #39FF14 (electric green). This palette is excellent for designs that demand attention, evoking a sense of dynamism, technology, and urban excitement. Designers will find it ideal for creating bold branding, energetic digital interfaces, or compelling event visuals. Developers can implement these vibrant hues for immersive gaming environments, cutting-edge web applications, or any platform aiming for a modern, energetic user experience.

Best used for

  • Cyberpunk game aesthetics
  • Futuristic city branding
  • Music festival and concert visuals
  • Tech event promotions
  • Digital art and graphic novels
  • High-energy web applications

Suggested color roles

primary

Use #FF00FF as a dominant color for impactful headlines or key interactive elements, grabbing attention instantly.

secondary

Apply #00FFFF for supporting graphics or navigation, offering a cool, electric contrast.

accent

Highlight critical information or calls-to-action with #39FF14 or #FFD700 for a sharp, energetic pop.

background

A deep black or dark charcoal background is highly recommended to maximize the luminosity and contrast of these neon colors.

text

For optimal legibility on dark backgrounds, use #FF00FF, #00FFFF, #FFD700, or #39FF14. #8A2BE2 can be used for subtle, dark-on-dark accents.

Accessibility notes

  • Ensure sufficient contrast for all neon text on dark backgrounds to meet WCAG standards.
  • Avoid using #8A2BE2 for small text on black without careful contrast checking.
  • The high saturation of #FF00FF, #00FFFF, and #39FF14 makes them excellent for headings on dark backgrounds.
  • Consider using larger font sizes for neon accents to improve readability and visual impact.

Recommended combinations

City Neon

Ideal for creating dynamic cityscapes, UI elements, or visuals with a strong futuristic vibe.

#FF00FF · #00FFFF · #39FF14

Electric Pulse

Perfect for high-impact branding, call-to-action buttons, or striking graphic accents.

#FFD700 · #8A2BE2 · #FF00FF

Tokyo Glow

Effective for creating a cool, tech-infused aesthetic in digital interfaces or illustrations.

#00FFFF · #39FF14 · #8A2BE2

CSS variables

:root {
  --neo-tokyo-pop-1: #FF00FF;
  --neo-tokyo-pop-2: #00FFFF;
  --neo-tokyo-pop-3: #FFD700;
  --neo-tokyo-pop-4: #8A2BE2;
  --neo-tokyo-pop-5: #39FF14;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neo-tokyo-pop": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#8A2BE2",
        5: "#39FF14",
      }
    }
  }
}

Related searches

neo tokyo color schemecyberpunk neon palettevibrant city colorsfuturistic UI designelectric bright palette

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFD700
·
Color 4#8A2BE2
·
Color 5#39FF14
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.2:1Fail
1.9:1Fail
2.3:1Fail
2
2.5:1Fail
1.1:1Fail
4.8:1AA
1.1:1Fail
3
2.2:1Fail
1.1:1Fail
4.2:1AA18
1:1Fail
4
1.9:1Fail
4.8:1AA
4.2:1AA18
4.4:1AA18
5
2.3:1Fail
1.1:1Fail
1:1Fail
4.4:1AA18

Similar palettes

More like Neo Tokyo Pop

View all vibrant