Palette

Retro Arcade Pop

A high-energy blast of 80s arcade glory, full of pixels and excitement, totally groovy.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Arcade Pop 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 Arcade Pop.

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

Data visualization

#00FFFF#FF00FF#FFFF00#39FF14#8A2BE2

Palette guide

How to use Retro Arcade Pop

Overview

The "Retro Arcade Pop" palette delivers an electrifying burst of pure primary and secondary colors, directly echoing the intense glow of classic arcade screens. With standout hues like the vivid #00FFFF (cyan), shocking #FF00FF (magenta), and radiant #FFFF00 (yellow), this palette is designed for maximum visual impact. The addition of energetic #39FF14 (lime green) and deep #8A2BE2 (blue-violet) adds complexity and grounding. Designers can harness this palette to create high-contrast, dynamic visuals that instantly evoke nostalgia and excitement. Developers will find these hex codes perfect for game interfaces, animated graphics, and any digital product requiring a bold, unforgettable aesthetic.

Best used for

Gaming applications and websites
Neon sign design mockups
Music festival branding
Children's entertainment platforms
Animated explainer videos
Pop art inspired digital campaigns

Suggested color roles

primary

#FF00FF (A bold magenta, perfect for calls to action, primary headings, or focal points.)

secondary

#00FFFF (A bright cyan, ideal for supporting information, interactive elements, or background patterns.)

accent

#39FF14 (An intense lime green, excellent for hover states, progress indicators, or small, high-visibility details.)

background

#8A2BE2 (A deep blue-violet, providing a rich, dark backdrop that makes the other neon colors truly pop and glow.)

text

#FFFF00 (A vibrant yellow, offering strong contrast on dark backgrounds like #8A2BE2 for headlines, or use black for lighter backgrounds.)

Accessibility notes

The high vibrancy of #00FFFF, #FF00FF, and #FFFF00 requires careful contrast checking, especially for text.
Avoid using #FFFF00 (yellow) text on light backgrounds; it has inherently poor contrast.
#39FF14 (lime green) can be challenging for users with certain types of color blindness when paired with red or yellow.
For critical text, consider using a dark color like black or a very dark gray on lighter colors, or white on darker palette colors.

Recommended combinations

Neon Flash

Perfect for creating dazzling visual effects, loading screens, or interactive elements that demand attention.

#00FFFF · #FF00FF · #FFFF00

Retro Glow

Excellent for dark-themed interfaces, gaming UIs, or designs aiming for a strong, energetic, and futuristic retro vibe.

#8A2BE2 · #39FF14 · #FF00FF

High Score

Use for impactful headlines, celebratory animations, or elements that need to convey excitement and achievement.

#FF00FF · #FFFF00 · #00FFFF

CSS variables

:root {
  --retro-arcade-pop-1: #00FFFF;
  --retro-arcade-pop-2: #FF00FF;
  --retro-arcade-pop-3: #FFFF00;
  --retro-arcade-pop-4: #39FF14;
  --retro-arcade-pop-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-arcade-pop": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#39FF14",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#39FF14

Color 5#8A2BE2

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.1:1Fail

4.8:1AA

2.5:1Fail

2.9:1Fail

2.3:1Fail

1.9:1Fail