Back to palettes

Palette

Cyberpunk Glitchscape

Harsh, artificial glow and unexpected jolts of color, depicting a futuristic city in disarray.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0B12#39FF14#00C8FF#FF00FF#FFC000

Palette guide

How to use Cyberpunk Glitchscape

Overview

The "Cyberpunk Glitchscape" palette captures a futuristic city in disarray, with harsh, artificial glows and unexpected jolts of color. Anchored by the deep #0A0B12 (very dark blue-gray), this palette explodes with #39FF14 (electric green), #00C8FF (bright blue), #FF00FF (magenta), and #FFC000 (vivid orange). It's an exceptional choice for designers aiming to convey an energetic, chaotic, and visually aggressive mood. Developers will find these colors highly effective for creating distinct UI elements, urgent notifications, and captivating visual effects in games or applications. The strong contrast ensures that key elements pop, making this palette ideal for interfaces that demand attention and a compelling, immersive user experience that vibrates with digital energy.

Best used for

  • Dystopian game environments and character design
  • Glitch art and digital installations
  • Futuristic app interfaces and dashboards
  • Event branding for tech conferences or music festivals
  • Motion graphics and animated sequences
  • Dark mode application themes

Suggested color roles

primary

Utilize #00C8FF (Bright Blue) for main interactive elements, primary branding, or prominent headings to establish a clear focal point.

secondary

Apply #FF00FF (Magenta) for secondary calls to action, important notifications, or vibrant accents that demand attention.

accent

Employ #39FF14 (Electric Green) for energetic highlights, success states, or elements needing a sharp, vibrant pop.

background

Use #0A0B12 (Very Dark Blue-Gray) as the foundational background, providing a deep, shadowy canvas for the neon lights.

text

For optimal legibility on dark backgrounds, use white (#FFFFFF) or a very light gray. For headings, #00C8FF or #FF00FF are impactful.

Accessibility notes

  • Ensure very high contrast between neon colors and #0A0B12 background for all text and interactive elements.
  • Avoid using #39FF14 or #FFC000 directly for small body text; they are better suited for larger headings or accents.
  • Test combinations for color blindness, especially with #39FF14 (green) and #FFC000 (orange).
  • The dark background helps visual comfort, but strategic use of bright neons is key to prevent visual fatigue.

Recommended combinations

Glitch Core

Excellent for creating atmospheric backgrounds, subtle digital glows, or tech interfaces in dark modes.

#00C8FF · #FF00FF · #0A0B12

Electric Surge

Ideal for striking call-to-action buttons, energetic data visualizations, or spotlight effects.

#39FF14 · #FFC000 · #0A0B12

Cyber Pulse

Perfect for vibrant gradients, interactive states, or highlighting key features in a futuristic interface.

#FF00FF · #00C8FF · #39FF14

CSS variables

:root {
  --cyberpunk-glitchscape-1: #0A0B12;
  --cyberpunk-glitchscape-2: #39FF14;
  --cyberpunk-glitchscape-3: #00C8FF;
  --cyberpunk-glitchscape-4: #FF00FF;
  --cyberpunk-glitchscape-5: #FFC000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cyberpunk-glitchscape": {
        1: "#0A0B12",
        2: "#39FF14",
        3: "#00C8FF",
        4: "#FF00FF",
        5: "#FFC000",
      }
    }
  }
}

Related searches

cyberpunk dark neon paletteelectric urban colorsmagenta blue green orangefuturistic night aestheticdark mode sci-fi design

Palette colors

Hex values

Color 1#0A0B12
·
Color 2#39FF14
·
Color 3#00C8FF
·
Color 4#FF00FF
·
Color 5#FFC000
·

Accessibility

Contrast checker

1
2
3
4
5
1
14.5:1AAA
10:1AAA
6.3:1AA
12:1AAA
2
14.5:1AAA
1.4:1Fail
2.3:1Fail
1.2:1Fail
3
10:1AAA
1.4:1Fail
1.6:1Fail
1.2:1Fail
4
6.3:1AA
2.3:1Fail
1.6:1Fail
1.9:1Fail
5
12:1AAA
1.2:1Fail
1.2:1Fail
1.9:1Fail

Similar palettes

More like Cyberpunk Glitchscape

View all vibrant
Cybernetic Glitch Neon
Cybernetic Vista Glow
Cyberpunk Alley Glitch
Cyberpunk Neon Blaze
Neo Pixel Glitch
Abstract Pop Glitch