Back to palettes

Palette

Pixel Arcade Glow

Blazing primary and secondary colors reminiscent of a classic 8-bit arcade machine.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pixel Arcade Glow 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 Arcade Glow.

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 Arcade Glow

Overview

The Pixel Arcade Glow palette bursts with electrifying primary and secondary colors, evoking the nostalgic thrill of classic 8-bit arcade machines. This vibrant collection, featuring striking #FF00FF magenta, energetic #00FFFF cyan, and a bold #FFFF00 yellow, alongside classic #FF0000 red and #0000FF blue, is perfect for projects demanding high energy and a retro-futuristic feel. Designers and developers can leverage these intense hues to create dynamic interfaces, eye-catching branding, and immersive digital experiences that pop. It's a go-to for capturing a playful yet powerful aesthetic, ensuring visual impact and high engagement.

Best used for

  • Retro video game UI/UX
  • Esports branding and streaming overlays
  • 80s themed event promotions
  • Neon sign design and digital art
  • Children's entertainment apps
  • Vibrant website hero sections

Suggested color roles

primary

Use #FF00FF (Magenta) for key interactive elements or main brand identifiers to convey energy and playfulness.

secondary

Apply #00FFFF (Cyan) for complementary sections, progress indicators, or secondary calls to action, offering a cool contrast.

accent

Employ #FFFF00 (Yellow) sparingly for highlights, warnings, or small, impactful details that demand immediate attention.

background

A deep, dark neutral background (e.g., #1A1A1A or black) is highly recommended to make these vibrant colors truly 'glow' and provide contrast.

text

For maximum readability, use a dark neutral like #111111 for body text on lighter backgrounds. For text on dark backgrounds or the vibrant colors themselves, white or a very light gray (e.g., #EEEEEE) is essential. #FFFF00 can be impactful for headings on dark backgrounds.

Accessibility notes

  • High contrast is crucial; avoid pairing similar light or dark shades directly against each other.
  • Ensure sufficient contrast ratios for text, especially when using #FFFF00 or #FF0000 on anything but a very dark background.
  • Use these vibrant colors for larger text or UI elements to prevent eye strain, avoiding them for small body copy.
  • Provide alternative text or patterns for color-coded information, as some color combinations might be difficult for color-blind users.

Recommended combinations

Arcade Flash

Ideal for dynamic hero sections, interactive menus, or gaming splash screens, offering a high-energy, futuristic vibe.

#FF00FF · #00FFFF · #0000FF

Retro Game Over

Perfect for warning states, error messages, or a classic 'Game Over' screen, leveraging the iconic red and yellow contrast.

#FF0000 · #FFFF00 · #0000FF

Neon Circuit

Great for highlighting data visualization, progress bars, or creating captivating digital art backgrounds with a vibrant glow.

#00FFFF · #FF00FF · #FFFF00

CSS variables

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

Tailwind config

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

Related searches

neon color scheme80s retro palettevibrant ui colorsarcade game colorsbright digital design palette

Palette colors

Hex values

Color 1#FF00FF
·
Color 2#00FFFF
·
Color 3#FFFF00
·
Color 4#FF0000
·
Color 5#0000FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.5:1Fail
2.9:1Fail
1.3:1Fail
2.7:1Fail
2
2.5:1Fail
1.2:1Fail
3.2:1AA18
6.9:1AA
3
2.9:1Fail
1.2:1Fail
3.7:1AA18
8:1AAA
4
1.3:1Fail
3.2:1AA18
3.7:1AA18
2.1:1Fail
5
2.7:1Fail
6.9:1AA
8:1AAA
2.1:1Fail

Similar palettes

More like Pixel Arcade Glow

View all vibrant