Palette

Digital Glitch Matrix

A jarring, high-contrast palette inspired by the sharp, unexpected colors of a digital glitch.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FF00#000000#FF00FF#00FFFF#800080

Palette guide

How to use Digital Glitch Matrix

Overview

The Digital Glitch Matrix palette is a jarring, high-contrast collection designed to evoke the sharp, unexpected visuals of a digital error. Featuring vibrant neon green (#00FF00), stark black (#000000), electric magenta (#FF00FF), brilliant cyan (#00FFFF), and deep purple (#800080), this palette is perfect for projects needing an energetic, cybernetic, or disruptive aesthetic. Designers can leverage its intensity for eye-catching UI elements, dynamic backgrounds, or impactful branding. Developers will find these hex codes ideal for creating dark-mode interfaces with vivid highlights, ensuring a modern, tech-forward feel. Its inherent chaos makes it excellent for themes requiring a sense of urgency or digital anomaly.

Best used for

Cyberpunk game interfaces
Music festival branding
Tech startup websites
Abstract digital art
Motion graphics and animations
Vibrant event posters

Suggested color roles

primary

Use #000000 as the foundational dark canvas, providing depth and allowing other colors to truly pop.

secondary

Employ #00FF00 for primary interactive elements, calls-to-action, or key data points, offering high visibility.

accent

Apply #FF00FF and #00FFFF for dynamic accents, hover states, or to introduce a sense of digital disruption.

background

A deep, dark #000000 background is essential to enhance the neon glow of the other palette colors.

text

For general text, use a bright color like #00FF00 or #00FFFF against #000000. For subtle text, #800080 can provide a unique touch on dark backgrounds.

Accessibility notes

Ensure sufficient contrast when using #00FF00, #FF00FF, or #00FFFF text against #000000 backgrounds (WCAG AA usually met).
Avoid using #800080 for small text on #000000 as contrast may be insufficient; reserve for larger elements.
When pairing neon colors, ensure they don't clash or cause visual vibration for users with sensitivities.
Provide alternative text styles for users who may find high-contrast neon overwhelming.

Recommended combinations

Glitch Core

Ideal for main UI elements, headlines, or brand logos that demand immediate attention.

#000000 · #00FF00 · #FF00FF

Cyber Glow

Excellent for dark mode interfaces, creating depth with a cool, enigmatic atmosphere.

#000000 · #00FFFF · #800080

Matrix Pop

Use for vibrant graphic overlays, data visualization, or elements needing maximum visual impact against a dark base.

#00FF00 · #FF00FF · #00FFFF

CSS variables

:root {
  --digital-glitch-matrix-2-1: #00FF00;
  --digital-glitch-matrix-2-2: #000000;
  --digital-glitch-matrix-2-3: #FF00FF;
  --digital-glitch-matrix-2-4: #00FFFF;
  --digital-glitch-matrix-2-5: #800080;
}

Tailwind config

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

Hex values

Color 1#00FF00

Color 2#000000

Color 3#FF00FF

Color 4#00FFFF

Color 5#800080

Accessibility

Contrast checker

15.3:1AAA

2.3:1Fail

1.1:1Fail

6.9:1AA

15.3:1AAA

6.7:1AA

16.7:1AAA

2.2:1Fail

2.3:1Fail

6.7:1AA

2.5:1Fail

3:1AA18

1.1:1Fail

16.7:1AAA

2.5:1Fail

7.5:1AAA

6.9:1AA

2.2:1Fail

3:1AA18

7.5:1AAA

Similar palettes

More like Digital Glitch Matrix

View all vibrant

Chroma Glitch Pop

Cybernetic Glitch Stream

Digital Interface Glitch

Error Code Static

Urban Neon Glitch

Abstract Pop Glitch