Palette

Electric City Night

A high-energy, futuristic palette inspired by glowing neon signs and a bustling cityscape 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#4B0082#8A2BE2#00FFFF#FF00FF

Palette guide

How to use Electric City Night

Overview

The 'Electric City Night' palette is a high-energy, futuristic scheme, perfect for designs that aim to evoke a bustling cityscape after dark. With a stark #000000 black base, it features deep indigo #4B0082, vibrant electric purple #8A2BE2, bright neon cyan #00FFFF, and striking magenta #FF00FF. This combination is ideal for creating a cyberpunk or modern tech aesthetic, where glowing elements stand out against a dark, dramatic backdrop. Developers and designers can leverage these intense hues for impactful UI elements, dynamic backgrounds, and captivating visual effects.

Best used for

Cyberpunk game interfaces and environments
Music festival posters and branding
Modern tech product interfaces
Digital art and abstract visuals
Nightclub and event promotions
Sci-fi themed website designs

Suggested color roles

primary

Use #8A2BE2 as the dominant vibrant color for key interactive elements, main headings, or focal points that need to convey energy and modernity.

secondary

Employ #4B0082 for supporting elements, subheadings, or as a deeper shade within a purple gradient to add richness and depth.

accent

Apply #00FFFF or #FF00FF sparingly for high-impact accents, hover states, notifications, or small glowing details to create a true neon effect.

background

Utilize #000000 as the primary background color to provide a dramatic, infinite dark canvas that makes the neon colors pop intensely.

text

For body text, use white or a very light grey on the #000000 background. For prominent headings or call-to-actions, #00FFFF or #FF00FF can be highly effective.

Accessibility notes

Ensure sufficient contrast for text, especially with #000000 background. White or light grey text is recommended.
Avoid using #4B0082 for small text on #000000, as it may lack sufficient contrast for readability.
Bright neon colors like #00FFFF and #FF00FF are best for larger text or accents, as small text can be fatiguing.
Test color pairings for contrast ratios, especially when layering vibrant hues, to meet WCAG guidelines.

Recommended combinations

Deep Cyber Glow

Perfect for dark mode interfaces: #000000 as background, #8A2BE2 for primary elements, and #00FFFF for interactive highlights.

#000000 · #8A2BE2 · #00FFFF

Vibrant Urban Pulse

Ideal for dynamic graphic elements or gradients, with #4B0082 providing depth and #FF00FF and #00FFFF creating an electric contrast.

#4B0082 · #FF00FF · #00FFFF

Nightlife Highlights

A striking combination for bold headlines or visual accents, using #000000 as a base, #FF00FF for emphasis, and #4B0082 for supportive shapes.

#000000 · #FF00FF · #4B0082

CSS variables

:root {
  --electric-city-night-3-1: #000000;
  --electric-city-night-3-2: #4B0082;
  --electric-city-night-3-3: #8A2BE2;
  --electric-city-night-3-4: #00FFFF;
  --electric-city-night-3-5: #FF00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-city-night-3": {
        1: "#000000",
        2: "#4B0082",
        3: "#8A2BE2",
        4: "#00FFFF",
        5: "#FF00FF",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#4B0082

Color 3#8A2BE2

Color 4#00FFFF

Color 5#FF00FF

Accessibility

Contrast checker

1.6:1Fail

3.5:1AA18

16.7:1AAA

6.7:1AA

1.6:1Fail

2.2:1Fail

10.3:1AAA

4.1:1AA18

3.5:1AA18

2.2:1Fail

4.8:1AA

1.9:1Fail

16.7:1AAA

10.3:1AAA

4.8:1AA

2.5:1Fail

6.7:1AA

4.1:1AA18

1.9:1Fail

2.5:1Fail

Similar palettes

More like Electric City Night

Cybernetic Voltage Surge