Palette

Cyberpunk Pulse Wave

Electrifying neon hues that capture the fast-paced, digital pulse of a cyberpunk cityscape.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk Pulse Wave 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 Cyberpunk Pulse Wave.

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

Data visualization

#00FFFF#FF00FF#FFFF00#39FF14#00BFFF

Palette guide

How to use Cyberpunk Pulse Wave

Overview

The Cyberpunk Pulse Wave palette is a vibrant explosion of pure neon, designed to embody the electrifying energy of a futuristic cityscape. Featuring brilliant cyan (#00FFFF), intense magenta (#FF00FF), glowing yellow (#FFFF00), vivid green (#39FF14), and a bright sky blue (#00BFFF), this collection is ideal for designers and developers seeking to create highly dynamic and eye-catching digital experiences. It excels in applications requiring a sense of speed, technology, and energetic visual pop, perfect for interfaces that demand immediate user engagement.

Best used for

High-energy gaming interfaces
Virtual reality (VR) environments
Interactive data visualizations
Event promotions for music festivals
Sportswear branding
Motion graphics and animations

Suggested color roles

primary

#FF00FF (Magenta) for strong calls to action, drawing immediate attention with its intensity.

secondary

#00FFFF (Cyan) as a complementary interactive color, providing a cool, digital feel.

accent

#FFFF00 (Yellow) for highlighting critical information or creating a striking glow effect.

background

A very dark grey or black (#000000 or #1A1A1A) is essential to make these neon colors truly pulsate.

text

Use white (#FFFFFF) for body text and reserve palette colors for headings or prominent labels to ensure readability.

Accessibility notes

High contrast is paramount for text; ensure neon colors are used sparingly for text or on very dark backgrounds.
Avoid using color alone for crucial information; supplement with icons or patterns.
Be aware that #00FFFF and #00BFFF can be challenging for some colorblind individuals to distinguish.
Test readability of vibrant color combinations against each other, particularly for larger blocks of content.

Recommended combinations

Electric Flow

Perfect for animated transitions, energy bars, or dynamic light effects.

#00FFFF · #FF00FF · #FFFF00

Tech Glow

Ideal for status indicators, active states, or highlighting interactive elements.

#39FF14 · #00BFFF · #FF00FF

Cyber Spectrum

Use for layered graphical elements or abstract backgrounds that convey digital complexity.

#00FFFF · #FFFF00 · #00BFFF

CSS variables

:root {
  --cyberpunk-pulse-wave-1: #00FFFF;
  --cyberpunk-pulse-wave-2: #FF00FF;
  --cyberpunk-pulse-wave-3: #FFFF00;
  --cyberpunk-pulse-wave-4: #39FF14;
  --cyberpunk-pulse-wave-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-pulse-wave": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#39FF14",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#39FF14

Color 5#00BFFF

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

2.5:1Fail

2.9:1Fail

2.3:1Fail

1.5:1Fail

1.2:1Fail

2.9:1Fail

1.3:1Fail

2:1Fail

1.1:1Fail

2.3:1Fail

1.3:1Fail

1.6:1Fail

1.7:1Fail

1.5:1Fail

2:1Fail

1.6:1Fail

Similar palettes

More like Cyberpunk Pulse Wave