Palette

Digital Glitch Chroma

A chaotic burst of electric, high-saturation colors, mimicking digital interference and broken screens.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#FF00FF#39FF14#00FFFF#8A2BE2

Palette guide

How to use Digital Glitch Chroma

Overview

The Digital Glitch Chroma palette is a chaotic burst of electric, high-saturation colors, mimicking digital interference and broken screens. Centered around a stark #000000 black, it explodes with vibrant magenta #FF00FF, neon green #39FF14, electric cyan #00FFFF, and bold purple #8A2BE2. This palette is perfect for designers aiming to convey disruption, raw energy, and a cyberpunk aesthetic. It's ideal for projects that embrace the unpredictable and visually striking nature of a glitch, creating an immersive and unforgettable digital experience that demands attention.

Best used for

Cyberpunk game UI
Glitch art and digital installations
Music video effects
Experimental web design
VR/AR interfaces
Event visuals for tech festivals

Suggested color roles

primary

The stark #000000 provides the essential, deep background for all other colors to intensely pop and "glitch."

secondary

Use #FF00FF or #00FFFF for secondary elements or large blocks of color, maintaining the high-energy, digital feel.

accent

Any of #39FF14, #FF00FF, #00FFFF, or #8A2BE2 can serve as a powerful accent for visual disruptions, warnings, or interactive elements.

background

#000000 is the indispensable background, allowing the vibrant colors to simulate glowing errors and data bursts.

text

For text, #39FF14, #FF00FF, or #00FFFF on #000000 provides maximum visibility and a distinct glitch aesthetic.

Accessibility notes

Due to extreme vibrancy, use these colors for large text or headings. Avoid small body text as it can be visually jarring.
Ensure sufficient contrast by almost always pairing these bright colors with the #000000 background.
Avoid using bright colors on other bright colors (e.g., #FF00FF on #39FF14) as this creates very poor readability.
The palette is inherently high-contrast with black, but individual bright colors can be hard to distinguish from each other for colorblind users.

Recommended combinations

Chroma Glitch

Creates a core glitch effect with magenta and neon green popping against a deep black background.

#000000 · #FF00FF · #39FF14

Cyber Burst

Ideal for dynamic backgrounds or interactive elements, showcasing vibrant blue and purple against black.

#000000 · #00FFFF · #8A2BE2

Error Signal

Use for abstract graphic elements or sudden visual disruptions, emphasizing chaotic color interplay.

#39FF14 · #FF00FF · #00FFFF

CSS variables

:root {
  --digital-glitch-chroma-1: #000000;
  --digital-glitch-chroma-2: #FF00FF;
  --digital-glitch-chroma-3: #39FF14;
  --digital-glitch-chroma-4: #00FFFF;
  --digital-glitch-chroma-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-glitch-chroma": {
        1: "#000000",
        2: "#FF00FF",
        3: "#39FF14",
        4: "#00FFFF",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FF00FF

Color 3#39FF14

Color 4#00FFFF

Color 5#8A2BE2

Accessibility

Contrast checker

6.7:1AA

15.5:1AAA

16.7:1AAA

3.5:1AA18

6.7:1AA

2.3:1Fail

2.5:1Fail

1.9:1Fail

15.5:1AAA

2.3:1Fail

1.1:1Fail

4.4:1AA18

16.7:1AAA

2.5:1Fail

1.1:1Fail

4.8:1AA

3.5:1AA18

1.9:1Fail

4.4:1AA18

4.8:1AA

Similar palettes

More like Digital Glitch Chroma

View all vibrant

Cybernetic Glitch Neon