Palette

Digital Glitch Matrix

A chaotic yet captivating blend inspired by digital errors and retro computer graphics.

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

#00FFFF#39FF14#000000#FF0000#FFFFFF

Palette guide

How to use Digital Glitch Matrix

Overview

The Digital Glitch Matrix palette offers a chaotic yet captivating blend of colors inspired by digital errors and retro computer graphics. With brilliant cyan (#00FFFF), electric lime green (#39FF14), stark black (#000000), intense red (#FF0000), and crisp white (#FFFFFF), this palette is perfect for designers and developers aiming for an energetic, disruptive, or cyberpunk aesthetic. Its high contrast and vibrant hues make it ideal for creating dynamic user interfaces, engaging game environments, or bold branding that stands out. The interplay of neon brights and fundamental neutrals provides versatility for both foreground and background elements, embodying a modern, tech-forward vibe.

Best used for

Cyberpunk game UI
Electronic music event posters
Tech-focused branding
Dynamic website headers
Digital art installations
Sci-fi movie title sequences

Suggested color roles

primary

Use #000000 as the dominant background or base, providing a stark canvas for the vibrant accents.

secondary

Employ #00FFFF or #39FF14 for primary interactive elements, status indicators, or key information.

accent

Apply #FF0000 for warnings, critical alerts, or to create a strong, urgent focal point.

background

A deep #000000 or clean #FFFFFF can serve as versatile backgrounds, with the former enhancing neon effects.

text

For dark backgrounds, #FFFFFF provides excellent readability. For lighter backgrounds, #000000 or #FF0000 can be used for impact.

Accessibility notes

Ensure #00FFFF, #39FF14, and #FF0000 have sufficient contrast against #000000 and #FFFFFF backgrounds.
Avoid using #FF0000 text on #00FFFF or #39FF14 backgrounds due to potential readability issues for colorblind users.
Use #FFFFFF text on #000000 for maximum readability for body text.
Be mindful of flashing or rapidly changing neon colors to avoid triggering photosensitive epilepsy.

Recommended combinations

Neon Interface

Excellent for dark-themed UI components, navigation, and interactive elements.

#000000 · #00FFFF · #39FF14

Glitch Alert

Ideal for error messages, critical alerts, or high-impact call-to-action buttons.

#000000 · #FF0000 · #FFFFFF

Cyber Bright

Suitable for light-themed designs that still require a vibrant, digital edge, such as infographics or headers.

#FFFFFF · #00FFFF · #39FF14

CSS variables

:root {
  --digital-glitch-matrix-3-1: #00FFFF;
  --digital-glitch-matrix-3-2: #39FF14;
  --digital-glitch-matrix-3-3: #000000;
  --digital-glitch-matrix-3-4: #FF0000;
  --digital-glitch-matrix-3-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-glitch-matrix-3": {
        1: "#00FFFF",
        2: "#39FF14",
        3: "#000000",
        4: "#FF0000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#39FF14

Color 3#000000

Color 4#FF0000

Color 5#FFFFFF

Accessibility

Contrast checker

1.1:1Fail

16.7:1AAA

3.2:1AA18

1.3:1Fail

1.1:1Fail

15.5:1AAA

2.9:1Fail

1.4:1Fail

16.7:1AAA

15.5:1AAA

5.3:1AA

21:1AAA

3.2:1AA18

2.9:1Fail

5.3:1AA

4:1AA18

1.3:1Fail

1.4:1Fail

21:1AAA

4:1AA18

Similar palettes

More like Digital Glitch Matrix

View all vibrant

Digital Glitch Static

Cyber Glitch Array

Cyber Glitch Flicker

Cybernetic Glitch Neon

Cyberpunk Glitch

Cyberpunk Glitchscape