Palette

Digital City Glitch

Harsh, electric colors mimicking the unexpected and jarring visual errors in a digital city landscape.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#000000#FF00FF#00FFFF#FFFF00#FF0000

Palette guide

How to use Digital City Glitch

Overview

The Digital City Glitch palette is a bold and aggressive collection of harsh, electric colors, mimicking the jarring visual errors in a digital city landscape. Centered around a stark #000000 black, it explodes with high-contrast primaries like #FF00FF (magenta), #00FFFF (cyan), #FFFF00 (yellow), and #FF0000 (red). This palette is perfect for designers aiming to convey disruption, energy, and a raw, unfiltered digital aesthetic. It's ideal for projects that embrace imperfection, chaos, and the vibrant, unpredictable nature of a glitch, creating a truly unforgettable visual impact.

Best used for

Cyberpunk game art
Glitch art and digital installations
Music video aesthetics
Experimental web design
Error message interfaces
Bold event promotions

Suggested color roles

primary

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

secondary

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

accent

Any of #FFFF00, #FF0000, #FF00FF, or #00FFFF 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.

text

For text, #FF00FF, #00FFFF, #FFFF00, or #FF0000 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 #FFFF00) 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

Core Glitch

Creates the quintessential glitch effect, with vibrant magenta and cyan popping against a deep black.

#000000 · #FF00FF · #00FFFF

Warning Burst

Ideal for error messages, warnings, or sudden visual disruptions, demanding immediate attention.

#000000 · #FFFF00 · #FF0000

Digital Chaos

Use for abstract graphical elements or dynamic backgrounds where chaotic energy is desired.

#FF00FF · #00FFFF · #FF0000

CSS variables

:root {
  --digital-city-glitch-1: #000000;
  --digital-city-glitch-2: #FF00FF;
  --digital-city-glitch-3: #00FFFF;
  --digital-city-glitch-4: #FFFF00;
  --digital-city-glitch-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "digital-city-glitch": {
        1: "#000000",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FFFF00",
        5: "#FF0000",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FF00FF

Color 3#00FFFF

Color 4#FFFF00

Color 5#FF0000

Accessibility

Contrast checker

6.7:1AA

16.7:1AAA

19.6:1AAA

5.3:1AA

6.7:1AA

2.5:1Fail

2.9:1Fail

1.3:1Fail

16.7:1AAA

2.5:1Fail

1.2:1Fail

3.2:1AA18

19.6:1AAA

2.9:1Fail

1.2:1Fail

3.7:1AA18

5.3:1AA

1.3:1Fail

3.2:1AA18

3.7:1AA18

Similar palettes

More like Digital City Glitch

View all vibrant

Chroma Glitch Pop

Cyber Glitch Array

Cybernetic Glitch Stream

Digital Glitch Matrix

Urban Neon Glitch

Abstract Pop Glitch