Palette

Neon City Pulse

Electrifying primary colors that capture the thrilling energy of a bustling cityscape at night.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#00FF00#FF00FF#FFFF00#FF0000

Palette guide

How to use Neon City Pulse

Overview

The Neon City Pulse palette features electrifying primary colors that capture the thrilling energy of a bustling cityscape at night. Comprising #00FFFF (cyan), #00FF00 (lime green), #FF00FF (magenta), #FFFF00 (yellow), and #FF0000 (red), this palette is a pure explosion of vibrant light. Designers and developers can leverage these intensely saturated hues to create retro gaming experiences, dynamic pop art, or highly engaging event advertising. It's an excellent choice for projects demanding a bold, vivid, and unmistakably energetic aesthetic that immediately grabs attention and conveys a sense of excitement and modern glow.

Best used for

Retro arcade game interfaces and graphics
Pop art illustrations and graphic design
High-energy event advertising and flyers
Children's media and entertainment branding
Dynamic website headers and hero sections
Music festival visuals and light shows

Suggested color roles

primary

Use #00FFFF (Cyan) as a bright, cool, and dominant primary color for key sections or major UI elements, conveying a modern digital feel.

secondary

Employ #FF00FF (Magenta) for energetic complements, secondary interactive elements, or striking graphic accents that pulsate with life.

accent

Apply #FFFF00 (Yellow) for the highest visibility, crucial call-to-action buttons, or to signify vital, attention-grabbing information.

background

Black or a very dark neutral (e.g., charcoal) is highly recommended as a background to maximize the glow effect and ensure optimal contrast.

text

For headlines, #FFFF00 or #00FF00 offer excellent visibility. For body text, white or a light gray provides optimal readability on a dark background.

Accessibility notes

All colors are highly saturated; they need a dark background (black or very dark gray) for optimal contrast and WCAG AA compliance.
Avoid using these pure neon colors for large blocks of body text, as their intensity can cause eye strain.
Be cautious with #FF0000 (Red) and #FF00FF (Magenta) for users with red-green color blindness when used for critical information.
For body text, use white or near-white on a dark background to ensure maximum readability and comfort.

Recommended combinations

Core Neon Glow

Ideal for primary UI elements, digital displays, and core graphic components in a vibrant, energetic design.

#00FFFF · #00FF00 · #FF00FF

Dynamic Alert

Perfect for warning messages, urgent notifications, and high-impact interactive elements that demand attention.

#FF0000 · #FFFF00 · #00FFFF

Retro Vibe Accents

Excellent for playful graphics, arcade-themed elements, or illustrations that evoke a classic, vibrant retro feel.

#FF00FF · #FFFF00 · #00FF00

CSS variables

:root {
  --neon-city-pulse-1: #00FFFF;
  --neon-city-pulse-2: #00FF00;
  --neon-city-pulse-3: #FF00FF;
  --neon-city-pulse-4: #FFFF00;
  --neon-city-pulse-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-city-pulse": {
        1: "#00FFFF",
        2: "#00FF00",
        3: "#FF00FF",
        4: "#FFFF00",
        5: "#FF0000",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#00FF00

Color 3#FF00FF

Color 4#FFFF00

Color 5#FF0000

Accessibility

Contrast checker

1.1:1Fail

2.5:1Fail

1.2:1Fail

3.2:1AA18

1.1:1Fail

2.3:1Fail

1.3:1Fail

2.9:1Fail

2.5:1Fail

2.3:1Fail

2.9:1Fail

1.3:1Fail

1.2:1Fail

1.3:1Fail

2.9:1Fail

3.7:1AA18

3.2:1AA18

2.9:1Fail

1.3:1Fail

3.7:1AA18

Similar palettes

More like Neon City Pulse

Neon City Pulse

See it in context.

Ready when you are.

Built with Neon City Pulse.

How to use Neon City Pulse

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Core Neon Glow

Dynamic Alert

Retro Vibe Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Neon City Pulse