Palette

Midnight City Pulse

The electrifying energy of a city at night, blending deep shadows with vivid, pulsating neon lights.

darkenergetic5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midnight City 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 Midnight City Pulse.

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

Data visualization

#000080#4B0082#8A2BE2#00FFFF#FF00FF

Palette guide

How to use Midnight City Pulse

Overview

The "Midnight City Pulse" palette captures the electrifying energy of a city at night, blending deep shadows with vivid, pulsating neon lights. It grounds designs with the profound navy of #000080 and the deep indigo of #4B0082, then bursts with the striking violet of #8A2BE2. The palette truly comes alive with the electric cyan of #00FFFF and the vibrant magenta of #FF00FF, simulating intense neon glow. This palette is perfect for designers aiming to convey dynamism, high-tech energy, or a lively urban vibe. Developers will find it exceptional for creating immersive gaming interfaces, vibrant tech branding, or captivating digital art that truly pops.

Best used for

High-energy gaming interfaces
Electronic music event promotions
Tech and innovation branding
Neon-themed digital art
Dynamic app designs
Futuristic virtual reality experiences

Suggested color roles

primary

#000080 – A deep, rich navy, ideal for expansive backgrounds, containers, or main headers, setting a profound night-time scene.

secondary

#4B0082 – A deep indigo, perfect for secondary content blocks, navigation, or subtle dividers, adding depth to the dark theme.

accent

#00FFFF – Use this electric cyan for calls to action, interactive elements, or key information, simulating a vibrant neon sign.

background

#000080 or #4B0082 for a deep, immersive dark canvas. "#FF00FF" or "#00FFFF" can be used for impactful, glowing elements.

text

#00FFFF or #FF00FF on darker backgrounds like #000080 or #4B0082 for excellent legibility and a neon effect. Use a dark blue like #000080 for text on very light, hypothetical backgrounds.

Accessibility notes

Ensure very high contrast between the deep blues/purples (#000080, #4B0082) and the neon accents (#00FFFF, #FF00FF) for all text.
Be cautious when pairing #00FFFF and #FF00FF for small text, as their high saturation might cause visual vibration for some users.
For interactive elements, ensure distinct visual cues beyond color, such as animation or clear focus states, to aid accessibility.
Avoid using #000080 and #4B0082 for small text against each other due to low contrast.

Recommended combinations

Neon Synthwave

A high-contrast dark mode, #000080 as background, #00FFFF for primary actions, and #FF00FF for vibrant text or highlights.

#000080 · #00FFFF · #FF00FF

Electric Depth

Creates a layered, energetic feel for hero sections or dashboards, building depth with purples and a sharp cyan accent.

#4B0082 · #8A2BE2 · #00FFFF

City Glow

Use #FF00FF as a striking accent background, with #000080 for bold text and #4B0082 for supporting details.

#FF00FF · #000080 · #4B0082

CSS variables

:root {
  --midnight-city-pulse-1: #000080;
  --midnight-city-pulse-2: #4B0082;
  --midnight-city-pulse-3: #8A2BE2;
  --midnight-city-pulse-4: #00FFFF;
  --midnight-city-pulse-5: #FF00FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-city-pulse": {
        1: "#000080",
        2: "#4B0082",
        3: "#8A2BE2",
        4: "#00FFFF",
        5: "#FF00FF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#4B0082

Color 3#8A2BE2

Color 4#00FFFF

Color 5#FF00FF

Accessibility

Contrast checker

1.2:1Fail

2.7:1Fail

12.8:1AAA

5.1:1AA

1.2:1Fail

2.2:1Fail

10.3:1AAA

4.1:1AA18

2.7:1Fail

2.2:1Fail

4.8:1AA

1.9:1Fail

12.8:1AAA

10.3:1AAA

4.8:1AA

2.5:1Fail

5.1:1AA

4.1:1AA18

1.9:1Fail

2.5:1Fail

Similar palettes

More like Midnight City Pulse

Carnival Midnight Sky

Cyberpunk Cityscape

Cyberpunk Metropolis