Palette

Retro Pop Arcade

A high-energy blast from the past, full of neon lights and pixelated fun from old arcade games.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#0000FF#FFFF00#39FF14#000000

Palette guide

How to use Retro Pop Arcade

Overview

The Retro Pop Arcade palette is a high-energy collection designed to evoke the thrilling, neon-lit atmosphere of classic arcade games. Featuring striking hues like vibrant Magenta (#FF00FF), electric Blue (#0000FF), dazzling Yellow (#FFFF00), and a standout Neon Green (#39FF14), grounded by deep Black (#000000), this palette is perfect for designers and developers aiming for a bold, playful, and nostalgic aesthetic. Its high contrast and saturation make it ideal for creating dynamic visual experiences that grab attention and communicate excitement.

Best used for

Video game UI/UX design
Event posters and flyers (music festivals, retro nights)
Children's product branding and packaging
Digital art and illustration with a pixelated style
Interactive exhibits and installations
Merchandise for gaming and entertainment brands

Suggested color roles

primary

Use #FF00FF (Magenta) for bold statements, main headers, or key graphical elements that demand immediate attention.

secondary

Employ #0000FF (Blue) for supporting elements, primary links, or sections requiring a stable yet vibrant presence.

accent

Leverage #39FF14 (Neon Green) or #FFFF00 (Yellow) for interactive states, call-to-action buttons, and vibrant highlights.

background

The deep #000000 (Black) serves as an excellent dramatic backdrop, allowing the neon colors to truly pop and glow.

text

For optimal readability, use white or a bright color like #FFFF00 on the #000000 background. For lighter backgrounds (if introduced), use black.

Accessibility notes

Avoid using #FF00FF text on a #0000FF background due to insufficient contrast for readability.
Ensure #FFFF00 or #39FF14 text has sufficient contrast against darker backgrounds, especially for smaller font sizes.
Utilize #000000 for body text on very light (not in palette) or #FFFF00 backgrounds to maintain legibility.
Always test color pairs for WCAG AA/AAA compliance, particularly for interactive elements and critical information.

Recommended combinations

Neon Contrast

For high-impact headlines, gaming UI elements, and striking brand logos.

#000000 · #FF00FF · #39FF14

Arcade Glow

Ideal for call-to-action buttons, retro graphic illustrations, and interactive hover states.

#0000FF · #FFFF00 · #000000

Vibrant Duo

Perfect for eye-catching banners, decorative accents, and energetic social media posts.

#FF00FF · #FFFF00 · #000000

CSS variables

:root {
  --retro-pop-arcade-1: #FF00FF;
  --retro-pop-arcade-2: #0000FF;
  --retro-pop-arcade-3: #FFFF00;
  --retro-pop-arcade-4: #39FF14;
  --retro-pop-arcade-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-pop-arcade": {
        1: "#FF00FF",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#39FF14",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#0000FF

Color 3#FFFF00

Color 4#39FF14

Color 5#000000

Accessibility

Contrast checker

2.7:1Fail

2.9:1Fail

2.3:1Fail

6.7:1AA

2.7:1Fail

8:1AAA

6.3:1AA

2.4:1Fail

2.9:1Fail

8:1AAA

1.3:1Fail

19.6:1AAA

2.3:1Fail

6.3:1AA

1.3:1Fail

15.5:1AAA

6.7:1AA

2.4:1Fail

19.6:1AAA

15.5:1AAA

Similar palettes

More like Retro Pop Arcade