Palette

Electric Tokyo Night

The energetic, glowing blues and purples of a bustling futuristic city skyline at twilight.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A1F#2C0F4A#4F1D78#FF0077#00FFCC

Palette guide

How to use Electric Tokyo Night

Overview

The Electric Tokyo Night palette embodies the energetic glow of a bustling futuristic city skyline at twilight. With deep navy (#0A0A1F), rich plum (#2C0F4A), vibrant violet (#4F1D78), striking magenta (#FF0077), and luminous aqua (#00FFCC), this collection offers a sophisticated yet electrifying aesthetic. It's perfectly suited for designs that require a dark, moody foundation accented by intense neon pops. Designers and developers can utilize these colors to create immersive digital environments, captivating branding, or dynamic user interfaces that evoke a sense of urban futurism and high-tech elegance. The contrast between dark and bright is key to its powerful visual impact.

Best used for

Cyberpunk game environments and UI
Modern tech company branding and websites
Nightlife and entertainment venue promotions
Futuristic digital art and illustrations
Streaming overlays and content creation branding
App interfaces with a dark mode aesthetic

Suggested color roles

primary

Deep navy (#0A0A1F) serves as an excellent foundational color for backgrounds, large panels, or primary container elements.

secondary

Rich plum (#2C0F4A) and vibrant violet (#4F1D78) provide depth and can be used for secondary sections, large typography, or subtle gradients.

accent

Striking magenta (#FF0077) and luminous aqua (#00FFCC) are ideal for calls-to-action, interactive elements, highlights, and any feature needing to pop.

background

Deep navy (#0A0A1F) or rich plum (#2C0F4A) create a perfect dark canvas for the neon accents to shine, establishing the 'night' aspect of the palette.

text

For body text, use white or a very light gray. For headings or key information, luminous aqua (#00FFCC) or striking magenta (#FF0077) provide excellent readability against dark backgrounds.

Accessibility notes

Ensure high contrast for text, especially when using brighter palette colors like #FF0077 or #00FFCC on darker backgrounds.
Avoid using #FF0077 or #00FFCC for extensive body text due to their high saturation and potential for eye strain.
Consider providing a dark mode option if using these vibrant colors extensively against lighter backgrounds for accessibility.
Use a contrast checker to validate color pairings for all interactive elements and critical information.

Recommended combinations

City Glow

Perfect for creating a dark background with strong, contrasting neon accents for key information or interactive elements.

#0A0A1F · #FF0077 · #00FFCC

Twilight Gradient

Ideal for atmospheric gradients in hero sections, backgrounds, or animated elements, evoking a futuristic cityscape.

#2C0F4A · #4F1D78 · #FF0077

Digital Accent

Use for icons, data visualization, or small UI components where a sharp, electric highlight is needed against a dark base.

#0A0A1F · #00FFCC · #FF0077

CSS variables

:root {
  --electric-tokyo-night-1: #0A0A1F;
  --electric-tokyo-night-2: #2C0F4A;
  --electric-tokyo-night-3: #4F1D78;
  --electric-tokyo-night-4: #FF0077;
  --electric-tokyo-night-5: #00FFCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-tokyo-night": {
        1: "#0A0A1F",
        2: "#2C0F4A",
        3: "#4F1D78",
        4: "#FF0077",
        5: "#00FFCC",
      }
    }
  }
}

Hex values

Color 1#0A0A1F

Color 2#2C0F4A

Color 3#4F1D78

Color 4#FF0077

Color 5#00FFCC

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

5.1:1AA

15:1AAA

1.2:1Fail

1.4:1Fail

4.3:1AA18

12.7:1AAA

1.7:1Fail

1.4:1Fail

3.1:1AA18

9.1:1AAA

5.1:1AA

4.3:1AA18

3.1:1AA18

2.9:1Fail

15:1AAA

12.7:1AAA

9.1:1AAA

2.9:1Fail

Similar palettes

More like Electric Tokyo Night