Palette

Digital Glitch Static

The disruptive beauty of a digital error, fracturing the screen with sharp, geometric colors.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Digital Glitch Static 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 Digital Glitch Static.

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

Data visualization

#000000#00FFFF#FF00FF#00FF00#6A5ACD

Palette guide

How to use Digital Glitch Static

Overview

The Digital Glitch Static palette captures the disruptive beauty of a digital error, fracturing the screen with sharp, geometric colors. Featuring stark black (#000000), brilliant cyan (#00FFFF), electric magenta (#FF00FF), vivid green (#00FF00), and a rich slate blue (#6A5ACD), this palette is perfect for designers and developers aiming for a modern, tech-focused, or vibrant glitch aesthetic. Its high contrast and energetic hues make it ideal for dynamic user interfaces, engaging game environments, or bold branding that requires a distinct, edgy character. The slate blue offers a sophisticated depth that grounds the intense neon elements.

Best used for

Cyberpunk game interfaces
Electronic music branding
Tech startup websites
Abstract digital art
Motion graphics and animations
Dynamic event posters

Suggested color roles

primary

Use #000000 as the dominant background or base, providing depth and allowing other colors to pop.

secondary

Employ #00FFFF or #FF00FF for primary interactive elements, calls-to-action, or key data points.

accent

Apply #00FF00 for highlights, status indicators, or to introduce a fresh, energetic pop.

background

A deep #000000 background is essential to enhance the neon glow. #6A5ACD can be used for secondary background sections or subtle gradients.

text

For general text, #00FFFF or #00FF00 offer excellent legibility against #000000. For subtle accents, #6A5ACD can work.

Accessibility notes

Ensure #00FFFF, #FF00FF, and #00FF00 have sufficient contrast against #000000 backgrounds (WCAG AA usually met).
Avoid using #6A5ACD text on #000000 for small text due to potential low contrast; reserve for larger elements.
The intensity of neon colors can be overwhelming; use them strategically for emphasis, not for large blocks of text.
Test color combinations for readability, especially for users with color vision deficiencies, as some pairings might be difficult.

Recommended combinations

Static UI

Ideal for main UI elements, navigation, and dark mode interfaces requiring high visual impact.

#000000 · #00FFFF · #FF00FF

Glitch Alert

Excellent for warnings, status updates, or to highlight important information with a tech aesthetic.

#000000 · #00FF00 · #6A5ACD

Cyber Stream

Suitable for vibrant graphic overlays, data visualizations, or elements needing maximum digital energy.

#00FFFF · #FF00FF · #00FF00

CSS variables

:root {
  --digital-glitch-static-1: #000000;
  --digital-glitch-static-2: #00FFFF;
  --digital-glitch-static-3: #FF00FF;
  --digital-glitch-static-4: #00FF00;
  --digital-glitch-static-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-glitch-static": {
        1: "#000000",
        2: "#00FFFF",
        3: "#FF00FF",
        4: "#00FF00",
        5: "#6A5ACD",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#00FFFF

Color 3#FF00FF

Color 4#00FF00

Color 5#6A5ACD

Accessibility

Contrast checker

16.7:1AAA

6.7:1AA

15.3:1AAA

4:1AA18

16.7:1AAA

2.5:1Fail

1.1:1Fail

4.2:1AA18