Palette

Retro Pixel Glitch

Bold and electrifying colors reminiscent of classic 8-bit video games and early digital graphics.

VibrantRetro5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Pixel 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 Retro Pixel Glitch.

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

Data visualization

#00FFC2#FF00FF#FFFF00#0000FF#FF0000

Palette guide

How to use Retro Pixel Glitch

Overview

The "Retro Pixel Glitch" palette is a captivating blend of electric primaries and neons, designed to evoke the raw, energetic aesthetic of early digital graphics and 8-bit video games. This scheme features the vivid teal of #00FFC2, the intense magenta of #FF00FF, and the bright yellow of #FFFF00, creating a pulsating, high-contrast visual. The fundamental primary colors, strong blue #0000FF and bold red #FF0000, ground the palette while adding to its classic digital appeal. Designers can harness these striking hues to craft dynamic, memorable interfaces, pixel art, or branding that perfectly captures a nostalgic yet cutting-edge "glitch" aesthetic, ensuring every element pops with vibrant energy.

Best used for

Glitch art and digital aesthetics
Retro gaming UI/UX design
Cyberpunk or sci-fi themed branding
Music festival visuals (electronic genres)
Motion graphics and video effects
Youth-oriented tech product design

Suggested color roles

primary

#FF0000 (A bold, classic red, perfect for error states, critical warnings, or primary calls-to-action.)

secondary

#0000FF (A strong, electric blue, excellent for interactive elements, navigation, or data visualization.)

accent

#00FFC2 (A vibrant teal, providing a fresh, digital glow for highlights, icons, or subtle accents.)

background

#FF00FF (An intense magenta that can serve as a dramatic, energetic backdrop for other bright elements.)

text

Use white or light gray on #00FFC2, #FF00FF, #0000FF, #FF0000. Use dark gray or black on #FFFF00.

Accessibility notes

All highly saturated colors (#00FFC2, #FF00FF, #0000FF, #FF0000) will require white or very light text for sufficient contrast.
#FFFF00 (yellow) strictly requires dark text for readability.
Avoid using these vibrant hues as backgrounds for large blocks of body text; reserve them for headings or accents.
Be highly cautious with color-blind users, especially with red/green/blue combinations; ensure additional visual cues for information.

Recommended combinations

Glitch Core

The fundamental primaries, ideal for impactful game UIs or bold, minimalist designs.

#FF0000 · #0000FF · #FFFF00

Cyber Teal

Creates a cool, futuristic, and slightly ethereal glow, excellent for tech interfaces or abstract art.

#00FFC2 · #FF00FF · #0000FF

Neon Static

A high-energy, contrasting trio, perfect for alerts, dynamic graphics, or eye-catching headlines.

#FFFF00 · #FF0000 · #00FFC2

CSS variables

:root {
  --retro-pixel-glitch-1: #00FFC2;
  --retro-pixel-glitch-2: #FF00FF;
  --retro-pixel-glitch-3: #FFFF00;
  --retro-pixel-glitch-4: #0000FF;
  --retro-pixel-glitch-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-pixel-glitch": {
        1: "#00FFC2",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#0000FF",
        5: "#FF0000",
      }
    }
  }
}

Hex values

Color 1#00FFC2

Color 2#FF00FF

Color 3#FFFF00

Color 4#0000FF

Color 5#FF0000

Accessibility

Contrast checker

2.4:1Fail

1.2:1Fail

6.6:1AA

3.1:1AA18

2.4:1Fail

2.9:1Fail

2.7:1Fail

1.3:1Fail