Palette

Midnight Urban Pulse

Captures the intense, electric glow of a city at midnight, blending dark shadows with vibrant neon lights.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1E1E2E#2D2B55#82589F#C44569#222831

Palette guide

How to use Midnight Urban Pulse

Overview

The Midnight Urban Pulse palette embodies the intense, electric glow of a city at midnight, blending deep, shadowy blues and purples with vibrant, neon accents. Anchored by the profound #1E1E2E (dark slate blue) and #2D2B55 (deep indigo), it sets a mysterious, immersive foundation. The palette truly comes alive with the energetic #C44569 (vibrant fuchsia) and the cool #82589F (muted purple), evoking neon lights cutting through the urban night. #222831 (dark grey-blue) adds further depth. This scheme is perfectly suited for designs that aim for a dynamic, futuristic, or cyberpunk aesthetic, offering both depth and striking visual interest.

Best used for

Cyberpunk game user interfaces (UI)
Music festival and event branding
Streaming platform dark themes
Sci-fi or tech startup websites
Nightclub and entertainment venue promotions
Modern digital art and illustrations

Suggested color roles

primary

Use #1E1E2E as the foundational dark background, providing an immersive, deep blue-grey canvas for digital experiences.

secondary

Apply #2D2B55 for content containers, navigation elements, or secondary panels to add subtle structural variation.

accent

Employ #C44569 for high-visibility calls to action, interactive elements, or key information that requires immediate attention.

background

Choose #1E1E2E for the main background to create an immediate sense of depth and a futuristic, dark atmosphere.

text

For primary text, a light color like white or a very light grey is recommended. For headings or decorative text, #82589F provides a softer, readable option on dark backgrounds.

Accessibility notes

Ensure #C44569 provides sufficient contrast against #1E1E2E or #2D2B55 for critical text and interactive elements.
Verify that #82589F, when used for text, meets readability standards on the darker backgrounds, especially for smaller fonts.
Avoid using #222831 as a text color on #1E1E2E or #2D2B55 due to extremely low contrast; reserve it for subtle background elements.
Always test contrast ratios for all color pairings to ensure WCAG AA compliance across different screen sizes and lighting conditions.

Recommended combinations

Neon Core

A deep dark base with a vibrant fuchsia accent and a cool, muted purple for highlights, ideal for impactful UI elements.

#1E1E2E · #C44569 · #82589F

Deep Pulse

A dark indigo base with a subtle purple for content and a fuchsia pop for dynamic interactive components.

#2D2B55 · #82589F · #C44569

Shadow Tech

The darkest grey-blue as a base, layered with a slightly lighter dark, and a sharp fuchsia for high-contrast accents.

#222831 · #1E1E2E · #C44569

CSS variables

:root {
  --midnight-urban-pulse-1: #1E1E2E;
  --midnight-urban-pulse-2: #2D2B55;
  --midnight-urban-pulse-3: #82589F;
  --midnight-urban-pulse-4: #C44569;
  --midnight-urban-pulse-5: #222831;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midnight-urban-pulse": {
        1: "#1E1E2E",
        2: "#2D2B55",
        3: "#82589F",
        4: "#C44569",
        5: "#222831",
      }
    }
  }
}

Hex values

Color 1#1E1E2E

Color 2#2D2B55

Color 3#82589F

Color 4#C44569

Color 5#222831

Accessibility

Contrast checker

1.2:1Fail

3:1AA18

3.4:1AA18

1.1:1Fail

1.2:1Fail

2.4:1Fail

2.8:1Fail

1.1:1Fail

3:1AA18

2.4:1Fail

1.1:1Fail

2.7:1Fail

3.4:1AA18

2.8:1Fail

1.1:1Fail

3.1:1AA18

1.1:1Fail

2.7:1Fail

3.1:1AA18

Similar palettes

More like Midnight Urban Pulse

Midnight Urban Pulse

See it in context.

Ready when you are.

Built with Midnight Urban Pulse.

How to use Midnight Urban Pulse

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Core

Deep Pulse

Shadow Tech

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Midnight Urban Pulse