Back to palettes

Palette

Cyberpunk Neon Blur

A high-energy, futuristic mix of glowing neons, reminiscent of a cyberpunk cityscape at night.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cyberpunk Neon Blur 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 Neon Blur.

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

Data visualization

#FF00FF#00FFFF#FFD700#39FF14#8A2BE2

Palette guide

How to use Cyberpunk Neon Blur

Overview

The Cyberpunk Neon Blur palette offers a high-voltage blend of electric hues perfect for dynamic digital experiences. Featuring vibrant magenta (#FF00FF), striking cyan (#00FFFF), intense gold (#FFD700), radiant green (#39FF14), and a bold electric purple (#8A2BE2), this collection is designed to capture attention. Developers can leverage these colors for UI elements that demand a futuristic edge, while designers will find them ideal for creating immersive visual narratives in tech-forward branding or interactive media. Its energetic nature makes it suitable for projects requiring a distinct, glowing aesthetic.

Best used for

  • Futuristic UI/UX designs
  • Gaming interfaces and assets
  • Event branding for tech conferences
  • Digital art and illustrations
  • Motion graphics and animations
  • Creative advertising campaigns

Suggested color roles

primary

Use #FF00FF (Magenta) for primary calls to action or hero elements, providing a strong, energetic focal point.

secondary

#00FFFF (Cyan) works well for secondary navigation or interactive elements, offering a cool contrast.

accent

#FFD700 (Gold) can highlight important data or alerts, drawing immediate attention with its bright glow.

background

A deep charcoal or near-black background is recommended to make the neon colors pop effectively.

text

Use white or light grey text (e.g., #FFFFFF) for optimal readability against dark backgrounds, reserving palette colors for headings or highlights.

Accessibility notes

  • Ensure sufficient contrast when using neon colors for text, especially #39FF14, against any background.
  • Avoid using color alone to convey meaning; pair with icons or text labels.
  • Test #FF00FF and #00FFFF combinations for colorblind users, as they can sometimes be hard to distinguish.
  • Prioritize white or light text on dark backgrounds for legibility, reserving vibrant colors for larger elements.

Recommended combinations

Electric Contrast

Ideal for dynamic headers or interactive elements where strong visual separation is key.

#FF00FF · #00FFFF · #8A2BE2

Future Glow

Excellent for creating glowing effects, progress bars, or status indicators.

#FFD700 · #39FF14 · #FF00FF

Deep Cyber

Use for sub-sections or data visualizations where a rich, layered neon look is desired.

#8A2BE2 · #00FFFF · #FFD700

CSS variables

:root {
  --cyberpunk-neon-blur-1: #FF00FF;
  --cyberpunk-neon-blur-2: #00FFFF;
  --cyberpunk-neon-blur-3: #FFD700;
  --cyberpunk-neon-blur-4: #39FF14;
  --cyberpunk-neon-blur-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-neon-blur": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#39FF14",
        5: "#8A2BE2",
      }
    }
  }
}

Related searches

neon color palettefuturistic ui colorscyberpunk design aestheticvibrant digital colorselectric theme color scheme

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFD700
·
Color 4#39FF14
·
Color 5#8A2BE2
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.2:1Fail
2.3:1Fail
1.9:1Fail
2
2.5:1Fail
1.1:1Fail
1.1:1Fail
4.8:1AA
3
2.2:1Fail
1.1:1Fail
1:1Fail
4.2:1AA18
4
2.3:1Fail
1.1:1Fail
1:1Fail
4.4:1AA18
5
1.9:1Fail
4.8:1AA
4.2:1AA18
4.4:1AA18

Similar palettes

More like Cyberpunk Neon Blur

View all vibrant
Cybernetic Glitch Flow
Cyber Synth Glow
Cybernetic City Pulse
Cybernetic Future Glow
Cybernetic Pulse Beat
Cybernetic Street Grid