Palette

Cyber Neon Pulse

An electrifying palette evoking the bright, digital energy of a futuristic city's neon-lit circuitry.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#FFFF00#2B004F#00FF7F

Palette guide

How to use Cyber Neon Pulse

Overview

The Cyber Neon Pulse palette is an electrifying collection, evoking the bright, digital energy of a futuristic city's neon-lit circuitry. Featuring the dazzling cyan of #00FFFF, the shocking magenta of #FF00FF, and the vibrant yellow of #FFFF00, this palette is designed for extreme impact. #2B004F adds a very deep, mysterious purple, while #00FF7F introduces a brilliant spring green. Designers can leverage these hex codes to create high-impact interfaces, eye-catching branding, or captivating digital art that pulses with synthetic energy. Developers will find these colors excellent for crafting UI elements that pop and command attention in a cybernetic context.

Best used for

Cyberpunk game interfaces and environments
Electronic music visualizers and album art
Sci-fi film posters and promotional materials
Vibrant tech product branding
Dynamic website hero sections and animations
Abstract digital art and motion graphics

Suggested color roles

primary

#00FFFF - A brilliant, energetic cyan, ideal for main brand elements, significant calls-to-action, or prominent UI features.

secondary

#FF00FF - A dazzling magenta, perfect for complementary interactive elements or striking graphic accents.

accent

#FFFF00 - A pure, vibrant yellow that provides a powerful, almost aggressive highlight for interactive elements or warnings.

background

#2B004F - A very deep, rich purple, offering a strong, dark base for the brighter neon colors to truly glow against.

text

#00FF7F - This brilliant spring green is excellent for headings or short, impactful text on very dark backgrounds like #2B004F. For body text on other colors, use white or a very light gray.

Accessibility notes

Ensure very high contrast for text, as many colors are extremely vibrant and can be difficult to read on each other.
Avoid using #00FFFF, #FF00FF, #FFFF00, and #00FF7F for large blocks of text; reserve them for accents and short statements.
The palette's high saturation and contrast can be jarring; use sparingly for users with light sensitivity.
Due to reliance on primary color hues, ensure alternative indicators for color-blind users, such as patterns or icons.

Recommended combinations

Neon Circuit

A dark, immersive background with glowing cyan and yellow elements, suitable for tech interfaces or data displays.

#2B004F · #00FFFF · #FFFF00

Electric Flux

High-energy compositions for hero sections or transition effects, mimicking digital energy flows.

#FF00FF · #00FF7F · #00FFFF

Cyber Pulse

Bold, contrasting elements for calls-to-action, progress indicators, or striking graphical overlays that demand attention.

#FFFF00 · #FF00FF · #2B004F

CSS variables

:root {
  --cyber-neon-pulse-1: #00FFFF;
  --cyber-neon-pulse-2: #FF00FF;
  --cyber-neon-pulse-3: #FFFF00;
  --cyber-neon-pulse-4: #2B004F;
  --cyber-neon-pulse-5: #00FF7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyber-neon-pulse": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#2B004F",
        5: "#00FF7F",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#2B004F

Color 5#00FF7F

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

13.8:1AAA

1.1:1Fail

2.5:1Fail

2.9:1Fail

5.5:1AA

2.3:1Fail

1.2:1Fail

2.9:1Fail

16.1:1AAA

1.3:1Fail