Palette

Arcade Game Glitch

A playful, glitchy blend of vibrant purples, cyans, and yellows, reminiscent of old arcade games.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arcade Game 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 Arcade Game Glitch.

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

Data visualization

#330066#663399#FF00FF#00FFFF#FFFF00

Palette guide

How to use Arcade Game Glitch

Overview

The "Arcade Game Glitch" palette offers a playful, glitchy blend of vibrant purples, cyans, and yellows, reminiscent of old arcade games with a digital twist. This energetic collection features deep dark violet #330066 and a rich medium purple #663399, contrasted sharply with the electric Magenta #FF00FF, dazzling Cyan #00FFFF, and brilliant Yellow #FFFF00. Developers can utilize these colors to create unique, edgy user interfaces that play with digital aesthetics and nostalgic errors. Designers will find this palette perfect for projects related to retro tech, experimental art, gaming, or any brand seeking a visually striking, playful, and slightly unconventional aesthetic that stands out.

Best used for

Indie game development
Cyberpunk-themed designs
Music festival branding
Tech event promotions
Digital art and animation
Retro-futuristic websites

Suggested color roles

primary

A deep, mysterious dark violet #330066, providing a strong backdrop or foundation for UI elements, evoking a digital void.

secondary

A richer medium purple #663399 that offers depth and complements the primary, suitable for larger content blocks or secondary navigation.

accent

A vibrant magenta #FF00FF that serves as a powerful, glitchy highlight, perfect for interactive elements, error states, or strong calls to action.

background

Use #330066 for an immersive dark mode or pure black for maximum contrast for neon elements.

text

Use #FFFF00 for headings and key information on dark backgrounds, and #00FFFF for secondary text to maintain the glitch aesthetic.

Accessibility notes

Ensure sufficient contrast for light text (e.g., #FFFF00 or #00FFFF) against dark backgrounds like #330066 and #663399.
The vibrant neon colors like #FF00FF, #00FFFF, and #FFFF00 need careful pairing; they are best used as accents on very dark backgrounds.
Avoid using dark text on the purple shades for small font sizes.
For body text, consider pure white or #FFFF00 on the darkest shades to meet wcag guidelines.

Recommended combinations

Glitch Core

For creating a striking, glitch-inspired interface, with dark violet as background, magenta for primary actions, and yellow for digital readouts.

#330066 · #FF00FF · #FFFF00

Cyber Shift

Ideal for dynamic effects or transitions, using medium purple as a base, with cyan and magenta creating a vibrant, shifting visual.

#663399 · #00FFFF · #FF00FF

Retro Error

Effective for conveying error states or important alerts in a retro gaming style, using bright yellow and cyan against the deep violet.

#330066 · #FFFF00 · #00FFFF

CSS variables

:root {
  --arcade-game-glitch-1: #330066;
  --arcade-game-glitch-2: #663399;
  --arcade-game-glitch-3: #FF00FF;
  --arcade-game-glitch-4: #00FFFF;
  --arcade-game-glitch-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arcade-game-glitch": {
        1: "#330066",
        2: "#663399",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#330066

Color 2#663399

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFFF00

Accessibility

Contrast checker

1.9:1Fail

5:1AA

12.6:1AAA

14.7:1AAA

1.9:1Fail

2.7:1Fail

6.7:1AA

7.8:1AAA

5:1AA

2.7:1Fail

2.5:1Fail

2.9:1Fail

12.6:1AAA

6.7:1AA

2.5:1Fail

1.2:1Fail

14.7:1AAA

7.8:1AAA

2.9:1Fail

1.2:1Fail

Similar palettes

More like Arcade Game Glitch