Palette

Electric Metropolis Glow

A dynamic clash of bright neons and deep urban grays, reflecting the pulse of a future city.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electric Metropolis Glow 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 Metropolis Glow.

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

Data visualization

#000000#4B0082#FF00FF#00FFFF#808080

Palette guide

How to use Electric Metropolis Glow

Overview

The Electric Metropolis Glow palette presents a dynamic clash of bright neons and deep urban grays, reflecting the pulse of a future city. It features pure #000000 (Black) as a foundational dark, complemented by the mysterious #4B0082 (Indigo) and grounding #808080 (Gray). The palette is electrified by the vivid #FF00FF (Magenta) and luminous #00FFFF (Cyan), creating stark contrasts. This combination is ideal for designs that need to convey a high-tech, cybernetic, and energetic urban feel. Designers can leverage these colors for bold UI elements, futuristic branding, or digital art. Developers will find it excellent for creating immersive user experiences in applications or games set in a modern, bustling metropolis.

Best used for

Cyberpunk game interfaces
Futuristic tech branding
Urban digital art projects
Nightlife event promotions
Sci-fi movie posters
Modern web dashboards

Suggested color roles

primary

#000000 (Black) - Provides a strong, grounding background, allowing the vibrant neon colors to truly pop and command attention, mimicking a night cityscape.

secondary

#4B0082 (Indigo) - Offers a deep, sophisticated tone, suitable for secondary backgrounds, large UI sections, or subtle gradients, adding depth.

accent

#FF00FF (Magenta) - A powerful, energetic accent for calls-to-action, alerts, or details that demand immediate attention and a futuristic flair.

background

#000000 (Black) - The optimal choice for a dark, urban backdrop that makes the neon accents glow intensely, creating a metropolitan night scene.

text

#00FFFF (Cyan) - Effective for striking headlines or short bursts of information against dark backgrounds. For body text on #000000, white or light gray (#808080) is recommended for readability.

Accessibility notes

Ensure high contrast when pairing #FF00FF or #00FFFF with #000000 or #4B0082 for text, checking WCAG guidelines.
Avoid using #808080 for small text on dark backgrounds without sufficient contrast testing.
The intense nature of #FF00FF and #00FFFF can cause eye strain; use sparingly for large blocks of text.
Prioritize white or light gray text on #000000 or #4B0082 for optimal readability for body content.

Recommended combinations

Cybernetic Core

Creates a classic cyberpunk aesthetic, ideal for bold headlines, logos, or striking visual accents against a dark backdrop.

#000000 · #FF00FF · #00FFFF

Urban Glow

Perfect for dynamic UI elements or energetic graphics, offering a sophisticated contrast that captures attention in a digital interface.

#4B0082 · #808080 · #FF00FF

Metropolis Pulse

A high-energy combination for artistic projects, event promotions, or digital art, delivering maximum visual impact and futuristic flair.

#00FFFF · #000000 · #4B0082

CSS variables

:root {
  --electric-metropolis-glow-1: #000000;
  --electric-metropolis-glow-2: #4B0082;
  --electric-metropolis-glow-3: #FF00FF;
  --electric-metropolis-glow-4: #00FFFF;
  --electric-metropolis-glow-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-metropolis-glow": {
        1: "#000000",
        2: "#4B0082",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#4B0082

Color 3#FF00FF

Color 4#00FFFF

Color 5#808080

Accessibility

Contrast checker

1.6:1Fail

6.7:1AA

16.7:1AAA

5.3:1AA

1.6:1Fail

4.1:1AA18

10.3:1AAA

3.3:1AA18

6.7:1AA

4.1:1AA18

2.5:1Fail

1.3:1Fail

16.7:1AAA

10.3:1AAA

2.5:1Fail

3.1:1AA18

5.3:1AA

3.3:1AA18

1.3:1Fail

3.1:1AA18

Similar palettes

More like Electric Metropolis Glow

View all vibrant

Cybernetic Rainwash

Cyberpunk Alley Light