Palette

Neon Metropolis Pulse

A high-energy mix of electric blues, magentas, and greens, capturing the pulsating rhythm of a neon metropolis.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Metropolis Pulse 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 Neon Metropolis Pulse.

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

Data visualization

#0A0A0A#1E90FF#FF00FF#00FF00#FFFF00

Palette guide

How to use Neon Metropolis Pulse

Overview

The "Neon Metropolis Pulse" palette captures the pulsating rhythm of a futuristic city at night, blending electric blues, magentas, and greens. It features #0A0A0A (deep charcoal), #1E90FF (dodger blue), #FF00FF (vibrant magenta), #00FF00 (electric green), and #FFFF00 (bright yellow). This high-energy mix is perfect for designers and developers creating urban nightlife branding, digital cityscapes, or any project that demands a dynamic, electric feel. The deep dark background allows the luminous neons to pop with intensity, creating a sense of movement and artificial light that defines a bustling metropolis.

Best used for

Urban nightlife branding and promotions
Digital cityscapes and futuristic art
Electronic music event graphics
Tech company websites and interfaces
Motion graphics and animated sequences
Cyberpunk-themed game environments

Suggested color roles

primary

Utilize #0A0A0A as the foundational deep dark background, providing a crucial contrast that allows the vibrant neon colors to truly glow.

secondary

Employ #1E90FF for dynamic blue elements and #FF00FF for striking magenta accents, establishing the core urban neon aesthetic.

accent

Apply #00FF00 for electric green highlights and #FFFF00 for the brightest, most luminous glows, drawing attention to key interactive areas.

background

The primary background should be #0A0A0A to create the dark, atmospheric base of a neon metropolis, enhancing the glow of the other colors.

text

For headings and important calls to action, use #FFFF00 or #00FF00 against #0A0A0A for high visibility. For body text, a crisp white or light grey is recommended.

Accessibility notes

Ensure high contrast for all text, especially with #FFFF00 and #00FF00, against the #0A0A0A background to meet WCAG AA standards.
Avoid using #1E90FF and #00FF00 directly adjacent for critical information due to potential color vision deficiency issues.
Consider using larger font sizes for neon-colored text to improve overall readability and visual impact in bright light.
Test color combinations thoroughly, as the intensity of these neons can sometimes cause eye strain in large blocks.

Recommended combinations

City Night

Ideal for core UI elements, backdrops, or branding that captures the classic dark city neon atmosphere with strong, electric contrasts.

#0A0A0A · #1E90FF · #FF00FF

Electric Glow

Excellent for creating luminous effects, interactive states, or energy indicators, providing a bright, artificial light source feel.

#FFFF00 · #00FF00 · #1E90FF

Urban Pulse

Use this for striking headlines, vibrant graphic accents, or elements requiring maximum visual impact against a dark, city-inspired backdrop.

#FF00FF · #00FF00 · #0A0A0A

CSS variables

:root {
  --neon-metropolis-pulse-1: #0A0A0A;
  --neon-metropolis-pulse-2: #1E90FF;
  --neon-metropolis-pulse-3: #FF00FF;
  --neon-metropolis-pulse-4: #00FF00;
  --neon-metropolis-pulse-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-metropolis-pulse": {
        1: "#0A0A0A",
        2: "#1E90FF",
        3: "#FF00FF",
        4: "#00FF00",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#0A0A0A

Color 2#1E90FF

Color 3#FF00FF

Color 4#00FF00

Color 5#FFFF00

Accessibility

Contrast checker

6.1:1AA

6.3:1AA

14.4:1AAA

18.4:1AAA

6.1:1AA

1:1Fail

2.4:1Fail

3:1AA18

6.3:1AA

1:1Fail

2.3:1Fail

2.9:1Fail

14.4:1AAA

2.4:1Fail

2.3:1Fail

1.3:1Fail

18.4:1AAA

3:1AA18

2.9:1Fail

1.3:1Fail

Similar palettes

More like Neon Metropolis Pulse