Palette

Neo Tokyo

A high-contrast palette of electric neons against deep black, capturing the futuristic energy of a cyberpunk metropolis.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neo Tokyo 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.

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

Data visualization

#00FFFF#FF00FF#000000#32CD32#800080

Palette guide

How to use Neo Tokyo

Overview

The 'Neo Tokyo' palette delivers a high-contrast, electric fusion perfect for capturing the raw energy of a cyberpunk metropolis. Dominated by pure #000000 (Black), it provides an intense backdrop for the dazzling #00FFFF (Cyan) and #FF00FF (Magenta) neons. The inclusion of #32CD32 (Lime Green) adds a sharp, energetic accent, while #800080 (Purple) offers a deeper, mysterious tone. This palette is a go-to for designers and developers aiming to create bold, impactful visuals that are both modern and deeply rooted in classic cyberpunk aesthetics, ensuring maximum visual punch.

Best used for

cyberpunk game user interfaces
tech and startup branding
dark mode web applications
event posters and flyers
digital art and illustrations
motion graphics and animations

Suggested color roles

primary

Designate #00FFFF (Cyan) as the primary energetic color for main headings, interactive elements, or key information, providing a striking digital glow.

secondary

Utilize #FF00FF (Magenta) for secondary calls-to-action, contrasting elements, or to create a vibrant visual tension against the cyan and black.

accent

Employ #32CD32 (Lime Green) sparingly for critical alerts, small icons, or to add a sharp, almost glitch-like visual pop.

background

The absolute #000000 (Black) is the essential background, offering the deepest contrast and allowing the neon colors to truly electrify the design.

text

For body text, use a clean white or very light gray (e.F0F0F0) against black. For prominent headings, #00FFFF or #FF00FF provide excellent readability and impact on a dark base.

Accessibility notes

Ensure all text against the #000000 background uses sufficiently bright colors like #00FFFF or white for optimal readability.
Avoid using #800080 for small text on black, as its contrast might be insufficient for some users.
When using #32CD32 as an accent, ensure it stands out clearly from other bright colors and the background for visibility.
Provide distinct focus indicators for interactive elements, ideally using #00FFFF or #FF00FF against the dark background.

Recommended combinations

Core Cyberpunk

The essential high-contrast trio for main UI layouts, creating a classic, impactful cyberpunk aesthetic.

#000000 · #00FFFF · #FF00FF

System Alert

Perfect for warning messages, success indicators, or urgent calls-to-action, leveraging the sharp lime green.

#32CD32 · #000000 · #FF00FF

Deep Glow

Use for background elements, layered effects, or subtle gradients to add depth and a mysterious, ethereal quality.

#800080 · #FF00FF · #00FFFF

CSS variables

:root {
  --neo-tokyo-1: #00FFFF;
  --neo-tokyo-2: #FF00FF;
  --neo-tokyo-3: #000000;
  --neo-tokyo-4: #32CD32;
  --neo-tokyo-5: #800080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neo-tokyo": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#000000",
        4: "#32CD32",
        5: "#800080",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#000000

Color 4#32CD32

Color 5#800080

Accessibility

Contrast checker

2.5:1Fail

16.7:1AAA

1.7:1Fail

7.5:1AAA

2.5:1Fail

6.7:1AA

1.5:1Fail

3:1AA18

16.7:1AAA

6.7:1AA

9.9:1AAA

2.2:1Fail