Palette

Pixel Surge Glitch

Bold, simple hues inspired by the classic neon glow and pixelated graphics of vintage arcade games.

retroenergetic5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF0000#0000FF

Palette guide

How to use Pixel Surge Glitch

Overview

The Pixel Surge Glitch palette delivers a jolt of energetic, retro vibrancy, perfect for designs that demand attention. Inspired by classic arcade games, its bold, simple hues like electric magenta (#FF00FF), vibrant cyan (#00FFFF), and bright yellow (#FFFF00) evoke a nostalgic yet modern digital aesthetic. Complementary primary red (#FF0000) and blue (#0000FF) round out this powerful combination, making it ideal for creating high-impact visual experiences. Designers and developers can leverage these colors to build dynamic interfaces, striking branding, or captivating digital art that truly pops.

Best used for

Retro arcade game interfaces
8-bit inspired branding
Dynamic event posters and flyers
Glitch art and digital installations
Streaming overlays and content creation
Youth-oriented tech product design

Suggested color roles

primary

#FF00FF serves as a dominant, energetic primary, ideal for main calls to action or key visual elements that need to stand out.

secondary

#00FFFF provides a cool, vibrant contrast, excellent for supporting information, secondary buttons, or accentuating graphics.

accent

#FFFF00 is a brilliant accent, perfect for urgent alerts, interactive states, or small details that require maximum visibility.

background

A deep, immersive background like #0000FF or a pure black works best to allow the other vibrant colors to truly glow.

text

For optimal readability, use #FFFF00 or #FF00FF for text against dark backgrounds. For lighter backgrounds, a stark black or charcoal is recommended.

Accessibility notes

Ensure high contrast when pairing vibrant colors, especially for text. #FFFF00 offers good legibility on dark backgrounds.
Avoid using #FF00FF directly on #FF0000 for small text; the hue difference is insufficient for clear separation.
Utilize larger font sizes or bolding for text in these bright colors to enhance readability.
Test color combinations with accessibility checkers to meet WCAG contrast guidelines for interactive elements.

Recommended combinations

Neon Pop

A high-energy trio excellent for interactive elements, highlights, and main visual points in a playful design.

#FF00FF · #00FFFF · #FFFF00

Retro Glitch

Creates strong, almost jarring contrasts, ideal for 'error' states, digital distortions, or aggressive visual statements.

#FF0000 · #0000FF · #FF00FF

Arcade Glow

A classic arcade aesthetic, perfect for dynamic backgrounds, game UI elements, or vibrant graphic overlays.

#00FFFF · #FFFF00 · #FF00FF

CSS variables

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

Tailwind config

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

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#FF0000

Color 5#0000FF

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.3:1Fail

2.7:1Fail

2.5:1Fail

1.2:1Fail

3.2:1AA18

6.9:1AA

2.9:1Fail

1.2:1Fail

3.7:1AA18

8:1AAA

1.3:1Fail

3.2:1AA18

3.7:1AA18

2.1:1Fail

2.7:1Fail

6.9:1AA

8:1AAA

2.1:1Fail

Similar palettes

More like Pixel Surge Glitch