Palette

Electric City Night

Bold, artificial lights and deep shadows evoke the thrilling energy of a bustling city at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#0000FF#8A2BE2#FF00FF#FFFF00

Palette guide

How to use Electric City Night

Overview

The 'Electric City Night' palette features bold, artificial lights and deep shadows to evoke the thrilling energy of a bustling city at night. Anchored by a stark #000000 black, it bursts with primary electric blue #0000FF, vibrant purple #8A2BE2, intense magenta #FF00FF, and brilliant yellow #FFFF00. This highly energetic scheme is perfect for designs that aim for a dramatic, cyberpunk, or retro-futuristic aesthetic, capturing the essence of glowing neon signs and digital displays.

Best used for

Arcade game interfaces and visuals
Nightclub and concert promotions
Digital art and generative graphics
Cyberpunk themed branding
Energetic tech product showcases
Motion graphics and video titles

Suggested color roles

primary

Utilize #8A2BE2 as the dominant vibrant color for main headings, key interactive elements, or large graphical features that need to stand out.

secondary

Employ #0000FF for supporting elements, subheadings, or as a strong contrasting color to #8A2BE2, providing a classic electric feel.

accent

Apply #FF00FF or #FFFF00 sparingly for high-impact accents, glowing effects, notifications, or call-to-action buttons to maximize visibility.

background

Use #000000 as the primary background color to create a dramatic, deep canvas that allows the vibrant neon colors to truly pop.

text

For body text on #000000, use white or a light grey. For prominent headlines or alerts, #FFFF00 or #FF00FF will be highly effective and attention-grabbing.

Accessibility notes

Ensure high contrast for text on #000000 background. White or light grey text is essential for readability.
Bright neon colors like #FFFF00 and #FF00FF are best for larger text or accents, as small text can be hard to read.
Avoid using #0000FF or #8A2BE2 for very small text on a #000000 background without sufficient contrast testing.
Be mindful of potential issues for colorblind users when using red/green or blue/purple combinations to convey status.

Recommended combinations

Neon City Grid

A classic dark mode UI: #000000 background, #0000FF for primary elements, and #FFFF00 for bright, urgent highlights.

#000000 · #0000FF · #FFFF00

Purple Haze Glow

Create a vibrant focal point with #8A2BE2 and #FF00FF, using #000000 to define shapes and add dramatic contrast in graphics.

#8A2BE2 · #FF00FF · #000000

Electric Burst

Combine these three for energetic, playful accents or a striking color block design, perfect for dynamic visual elements.

#0000FF · #FFFF00 · #FF00FF

CSS variables

:root {
  --electric-city-night-6-1: #000000;
  --electric-city-night-6-2: #0000FF;
  --electric-city-night-6-3: #8A2BE2;
  --electric-city-night-6-4: #FF00FF;
  --electric-city-night-6-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-city-night-6": {
        1: "#000000",
        2: "#0000FF",
        3: "#8A2BE2",
        4: "#FF00FF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#0000FF

Color 3#8A2BE2

Color 4#FF00FF

Color 5#FFFF00

Accessibility

Contrast checker

2.4:1Fail

3.5:1AA18

6.7:1AA

19.6:1AAA

2.4:1Fail

1.4:1Fail

2.7:1Fail

8:1AAA

3.5:1AA18

1.4:1Fail

1.9:1Fail

5.5:1AA

6.7:1AA

2.7:1Fail

1.9:1Fail

2.9:1Fail

19.6:1AAA

8:1AAA

5.5:1AA

2.9:1Fail

Similar palettes

More like Electric City Night