Palette

Neon Arcade Pop

An electric burst of super-saturated colors, capturing the flashing lights and thrilling energy of a vintage arcade.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FF00#FFD700#8A2BE2#00BFFF

Palette guide

How to use Neon Arcade Pop

Overview

The "Neon Arcade Pop" palette is an electric burst of super-saturated colors, perfectly capturing the flashing lights and thrilling energy of a vintage arcade. It features a powerful electric magenta #FF00FF, a vibrant lime green #00FF00, and a dazzling golden yellow #FFD700 that radiates excitement. The rich blue violet #8A2BE2 adds a touch of unexpected depth, beautifully complemented by the bright deep sky blue #00BFFF. This collection is ideal for designers looking to create dynamic, playful, and visually striking experiences. Developers can utilize these hex codes for game interfaces, interactive art, or any project requiring a distinct, energetic aesthetic. Its versatility allows for both bold statements and intricate details, making any design truly pop with excitement.

Best used for

Retro gaming interfaces
Youth-focused digital branding
Interactive web applications
Event posters and flyers
Mobile app onboarding screens
Digital art and illustrations

Suggested color roles

primary

Use #FF00FF (Magenta) for primary calls-to-action or large graphic elements to create a strong, energetic focal point.

secondary

Apply #00BFFF (Deep Sky Blue) for background sections, navigation, or secondary interactive elements, providing a cool and inviting feel.

accent

Highlight key information or interactive states with #FFD700 (Golden Yellow) for maximum visibility and a radiant, glowing effect.

background

A deep blue violet like #8A2BE2 can serve as a unique and atmospheric background, or opt for a classic black to amplify the neon glow.

text

For headlines and important text on dark backgrounds, #FFD700 or #00FF00 offers excellent legibility. Use white or light gray for body text.

Accessibility notes

Ensure sufficient contrast when using #00FF00 or #FFD700 for text against other bright colors, especially #00BFFF.
Avoid pairing #FFD700 with #00FF00 for text or small interactive elements due to potential low contrast.
Prioritize using these vibrant colors for larger text, icons, or decorative elements, reserving dark neutrals for body copy.
Always verify contrast ratios for text and interactive elements against WCAG guidelines (AA or AAA) to ensure readability.

Recommended combinations

Arcade Pop

Excellent for high-impact headlines, banners, or interactive buttons with a classic arcade feel.

#FF00FF · #00FF00 · #FFD700

Electric Depth

Creates a sophisticated yet energetic vibe, perfect for backgrounds or layered elements.

#8A2BE2 · #00BFFF · #FF00FF

Vibrant Glow

Ideal for creating a lively, playful feel in game UIs or digital art, drawing attention with brightness.

#FFD700 · #00FF00 · #00BFFF

CSS variables

:root {
  --neon-arcade-pop-1: #FF00FF;
  --neon-arcade-pop-2: #00FF00;
  --neon-arcade-pop-3: #FFD700;
  --neon-arcade-pop-4: #8A2BE2;
  --neon-arcade-pop-5: #00BFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-arcade-pop": {
        1: "#FF00FF",
        2: "#00FF00",
        3: "#FFD700",
        4: "#8A2BE2",
        5: "#00BFFF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FF00

Color 3#FFD700

Color 4#8A2BE2

Color 5#00BFFF

Accessibility

Contrast checker

2.3:1Fail

2.2:1Fail

1.9:1Fail

1.5:1Fail

2.3:1Fail

1:1Fail

4.3:1AA18

1.5:1Fail

2.2:1Fail

1:1Fail

4.2:1AA18

1.5:1Fail

1.9:1Fail

4.3:1AA18

4.2:1AA18

2.8:1Fail

1.5:1Fail

2.8:1Fail

Similar palettes

More like Neon Arcade Pop

Neon Arcade Pop

See it in context.

Ready when you are.

Built with Neon Arcade Pop.

How to use Neon Arcade Pop

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Arcade Pop

Electric Depth

Vibrant Glow

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Neon Arcade Pop