Back to palettes

Palette

Neon Urban Glitch

A high-contrast, electric palette inspired by vibrant neon signs and digital glitches in a futuristic city.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Urban Glitch 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 Urban Glitch.

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

Data visualization

#FF00C8#00FFD8#0055FF#FFFF00#FF0000

Palette guide

How to use Neon Urban Glitch

Overview

The Neon Urban Glitch palette offers a high-contrast, electric aesthetic inspired by vibrant neon signs and digital anomalies in a futuristic city. This collection is defined by bold, pure neons like #FF00C8 (Bright Pink), #00FFD8 (Cyan-Green), and the striking #FFFF00 (Yellow). The deep #0055FF (Blue) provides a rich, grounding counterpoint, while #FF0000 (Red) adds an urgent, impactful punch. This palette is exceptionally useful for designers aiming to create dynamic, edgy, and technologically-inspired visuals, perfect for glitch art, cybersecurity themes, or any project that needs to convey a sense of digital energy and urban grit.

Best used for

  • Cybersecurity UI/UX designs
  • Glitch art and digital installations
  • Gaming interfaces and streaming overlays
  • Tech event branding and promotions
  • Motion graphics with digital effects
  • Vibrant urban photography edits

Suggested color roles

primary

Utilize #FF00C8 (Bright Pink) for dominant calls-to-action or key visual elements to create a powerful focal point.

secondary

Employ #00FFD8 (Cyan-Green) for secondary information, data visualizations, or as a vibrant background accent.

accent

Leverage #FFFF00 (Yellow) and #FF0000 (Red) for error states, urgent alerts, or highly interactive elements.

background

A deep black or very dark gray is essential to allow these intense neons to vibrate and stand out effectively.

text

For body text, use a crisp white or light gray. For headlines or interactive text, #FFFF00 or #00FFD8 can be very effective against dark backgrounds.

Accessibility notes

  • Extreme caution is needed for text readability; always ensure high contrast against backgrounds.
  • Avoid using #FFFF00 for small text on light backgrounds due to low contrast.
  • Prioritize dark, desaturated backgrounds to make the vibrant neons pop and improve overall legibility.
  • Test for visual vibration, especially when using #FF0000 and #FFFF00 in close proximity.

Recommended combinations

Digital Pulse

Ideal for creating futuristic UI elements, digital displays, or abstract backgrounds with depth.

#FF00C8 · #00FFD8 · #0055FF

Glitch Effect

Perfect for error messages, warning indicators, or impactful glitch-inspired graphic elements.

#FFFF00 · #FF0000 · #00FFD8

Urban Contrast

Use for striking headlines, brand logos, or focal points against a deep, rich background.

#0055FF · #FF00C8 · #FFFF00

CSS variables

:root {
  --neon-urban-glitch-1: #FF00C8;
  --neon-urban-glitch-2: #00FFD8;
  --neon-urban-glitch-3: #0055FF;
  --neon-urban-glitch-4: #FFFF00;
  --neon-urban-glitch-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-urban-glitch": {
        1: "#FF00C8",
        2: "#00FFD8",
        3: "#0055FF",
        4: "#FFFF00",
        5: "#FF0000",
      }
    }
  }
}

Related searches

glitch art color palettecyberpunk neon schemeelectric urban designhigh contrast tech colorsvibrant digital aesthetic

Palette colors

Hex values

Color 1#FF00C8
·
Color 2#00FFD8
·
Color 3#0055FF
·
Color 4#FFFF00
·
Color 5#FF0000
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.7:1Fail
1.6:1Fail
3.2:1AA18
1.2:1Fail
2
2.7:1Fail
4.4:1AA18
1.2:1Fail
3.1:1AA18
3
1.6:1Fail
4.4:1AA18
5.2:1AA
1.4:1Fail
4
3.2:1AA18
1.2:1Fail
5.2:1AA
3.7:1AA18
5
1.2:1Fail
3.1:1AA18
1.4:1Fail
3.7:1AA18

Similar palettes

More like Neon Urban Glitch

View all vibrant