Palette

Electric City Pulse

Fluorescent blues and electric pinks pulsate, capturing the dazzling, high-energy nights of a cyberpunk city.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00F0FF#00A0C0#006080#FF0077#BB0055

Palette guide

How to use Electric City Pulse

Overview

The 'Electric City Pulse' palette features fluorescent blues and electric pinks that pulsate, capturing the dazzling, high-energy nights of a cyberpunk city. With a gradient of blues from bright #00F0FF to deep #006080, complemented by vibrant #FF0077 and #BB0055 pinks, this scheme offers depth and dynamic contrast. It's ideal for designs that aim for a futuristic, synthwave, or tech-noir aesthetic, conveying motion and a powerful digital glow.

Best used for

Cyberpunk game environments and UI
Synthwave album art and music videos
Tech event branding and visuals
Digital interfaces and dashboards
Futuristic fashion lookbooks
Motion graphics and animated logos

Suggested color roles

primary

Utilize #00F0FF as the dominant electric blue for main calls-to-action, primary interactive elements, or focal points that convey energy.

secondary

Employ #FF0077 for strong supporting elements, subheadings, or to create a vibrant, high-contrast pop against the blues.

accent

Apply #BB0055 sparingly for deeper, intense pink accents, or to add richness and warmth within the pink spectrum.

background

Use a darker blue like #006080 or #00A0C0 as the primary background to establish an atmospheric base, enhancing the luminosity of brighter colors.

text

For body text on dark backgrounds, use white or a very light grey. For prominent headlines, #00F0FF or #FF0077 will provide excellent contrast and visibility.

Accessibility notes

Ensure sufficient contrast for text, especially when using the darker blues. White or bright pink text is recommended on #006080.
Avoid using #00A0C0 for small text on #006080, as their low contrast may hinder readability.
Vibrant pinks like #FF0077 are excellent for highlights but can be fatiguing for large blocks of text.
Test color pairings for contrast ratios against WCAG guidelines, particularly for interactive elements.

Recommended combinations

Blue Pink Neon

Ideal for a cyberpunk UI: #006080 background, #00F0FF for primary content, and #FF0077 for striking interactive elements.

#00F0FF · #FF0077 · #006080

Electric Gradient

Create a smooth blue gradient for backgrounds or large graphical elements, with #BB0055 adding a rich, deep pink accent.

#00A0C0 · #00F0FF · #BB0055

Pulse & Depth

Use #006080 as a deep base, #FF0077 for vibrant highlights, and #00F0FF for glowing text or energetic visual elements.

#006080 · #FF0077 · #00F0FF

CSS variables

:root {
  --electric-city-pulse-1: #00F0FF;
  --electric-city-pulse-2: #00A0C0;
  --electric-city-pulse-3: #006080;
  --electric-city-pulse-4: #FF0077;
  --electric-city-pulse-5: #BB0055;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-city-pulse": {
        1: "#00F0FF",
        2: "#00A0C0",
        3: "#006080",
        4: "#FF0077",
        5: "#BB0055",
      }
    }
  }
}

Hex values

Color 1#00F0FF

Color 2#00A0C0

Color 3#006080

Color 4#FF0077

Color 5#BB0055

Accessibility

Contrast checker

2.2:1Fail

5:1AA

2.7:1Fail

4.6:1AA

2.2:1Fail

2.3:1Fail

1.2:1Fail

2.1:1Fail

5:1AA

2.3:1Fail

1.8:1Fail

1.1:1Fail

2.7:1Fail

1.2:1Fail

1.8:1Fail

1.7:1Fail

4.6:1AA

2.1:1Fail

1.1:1Fail

1.7:1Fail

Similar palettes

More like Electric City Pulse

Retro Synthwave Sunset

Synthwave Cyber Neon