Palette

Electric Urban Pulse

A high-energy palette reflecting the dazzling neon signs and dynamic rhythm of a futuristic city at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFD700#00FF00#333333

Palette guide

How to use Electric Urban Pulse

Overview

The Electric Urban Pulse palette captures the dazzling neon signs and dynamic rhythm of a futuristic city at night. This high-energy collection features vibrant magenta (#FF00FF), electric cyan (#00FFFF), brilliant gold (#FFD700), luminous lime green (#00FF00), and a solid dark gray (#333333). It’s an ideal choice for projects demanding a striking, modern, and energetic aesthetic. Designers and developers can leverage these intense hues to create captivating digital experiences, from interactive interfaces to bold branding. The inclusion of a strong neutral grounds the vibrant colors, allowing them to pop with maximum impact and convey a sense of excitement and urban sophistication.

Best used for

Modern website designs and landing pages
Nightlife event promotions and club branding
Interactive digital advertisements
Motion graphics and animated logos
Gaming UI and streaming channel aesthetics
Fashion and streetwear brand identity

Suggested color roles

primary

Vibrant magenta (#FF00FF) or electric cyan (#00FFFF) can serve as the dominant energetic force for branding, large headlines, or key interactive elements.

secondary

Brilliant gold (#FFD700) or luminous lime green (#00FF00) are excellent for supporting graphical elements, subheadings, or secondary calls-to-action.

accent

Any of the vibrant colors (#FF00FF, #00FFFF, #FFD700, #00FF00) can act as an accent, used judiciously for highlights, icons, or notifications.

background

The dark gray (#333333) provides an essential grounding backdrop, allowing the neon colors to truly stand out and create a dramatic, urban night effect.

text

Use white or a very light gray for body text on the dark gray background (#333333). For headings or short impactful phrases, #FF00FF or #00FFFF work well against #333333.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing vibrant colors like #FF00FF or #00FF00 with a dark background.
Avoid using two highly saturated colors together for text and background to prevent visual discomfort.
Use the dark gray (#333333) for body text on lighter sections (if any) to maintain readability.
Test color combinations for WCAG compliance, particularly for interactive elements and crucial information.

Recommended combinations

Neon Contrast

Ideal for creating a striking dark mode interface where elements pop with electric vibrancy against a neutral base.

#333333 · #FF00FF · #00FFFF

Urban Glow

Excellent for highlighting key information or calls-to-action, evoking the glow of city lights on a dark street.

#333333 · #FFD700 · #00FF00

Dynamic Duo

Use for impactful gradients, split designs, or dynamic hover states in UI elements, grounded by the dark gray.

#FF00FF · #00FFFF · #333333

CSS variables

:root {
  --electric-urban-pulse-1: #FF00FF;
  --electric-urban-pulse-2: #00FFFF;
  --electric-urban-pulse-3: #FFD700;
  --electric-urban-pulse-4: #00FF00;
  --electric-urban-pulse-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-urban-pulse": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#00FF00",
        5: "#333333",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFD700

Color 4#00FF00

Color 5#333333

Accessibility

Contrast checker

2.5:1Fail

2.2:1Fail

2.3:1Fail

4:1AA18

2.5:1Fail

1.1:1Fail

10.1:1AAA

2.2:1Fail

1.1:1Fail

1:1Fail

9:1AAA

2.3:1Fail

1.1:1Fail

1:1Fail

9.2:1AAA

4:1AA18

10.1:1AAA

9:1AAA

9.2:1AAA

Similar palettes

More like Electric Urban Pulse

Electric Urban Pulse

See it in context.

Ready when you are.

Built with Electric Urban Pulse.

How to use Electric Urban Pulse

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Neon Contrast

Urban Glow

Dynamic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Electric Urban Pulse