Palette

Retro Arcade Neon

Bright, glowing hues reminiscent of vintage arcade games and vibrant digital displays.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0099#00CCFF#99FF00#FFCC00#3300FF

Palette guide

How to use Retro Arcade Neon

Overview

The Retro Arcade Neon palette bursts with electric energy, capturing the essence of vintage arcade games and vibrant digital displays. This dynamic collection features a striking magenta-pink (#FF0099), brilliant sky blue (#00CCFF), an energetic lime green (#99FF00), warm golden yellow (#FFCC00), and a deep electric blue (#3300FF). Designers can harness these highly saturated hues to create engaging interfaces, eye-catching advertisements, and truly memorable branding. It's an ideal choice for projects seeking to infuse a playful, energetic, and distinctly retro-futuristic vibe, ensuring designs feel both nostalgic and cutting-edge.

Best used for

Retro-themed web applications
Esports team branding and graphics
Music album covers (synthwave, electronic)
Interactive art installations
Youth-centric fashion design
Event posters and digital signage

Suggested color roles

primary

Use #FF0099 (Magenta Pink) to command attention for hero sections, main calls-to-action, or dominant graphic elements.

secondary

Employ #00CCFF (Sky Blue) to provide a refreshing counterpoint, ideal for navigation, secondary buttons, or background gradients.

accent

Utilize #99FF00 (Lime Green) for small, high-impact indicators, progress bars, or interactive hover states.

background

Leverage #3300FF (Electric Blue) as a deep, saturated blue that offers a strong foundation, allowing the brighter neons to glow intensely.

text

For dark backgrounds like #3300FF, consider #FFCC00 for headings or a crisp white for body text. On lighter areas, use a dark grey or black.

Accessibility notes

High contrast is crucial; ensure text in #FF0099 or #99FF00 has a sufficiently dark background, or use white text on these colors.
Avoid placing #99FF00 directly next to #FFCC00 for small elements due to potential contrast issues for some users.
Prioritize clear, simple fonts when using these intense colors to maintain readability.
Use these vibrant colors sparingly for large blocks of text; they are best as accents or for headlines.

Recommended combinations

Neon Grid

Creates a cyberpunk grid effect, perfect for backgrounds or UI borders.

#3300FF · #FF0099 · #00CCFF

Alert Flash

Ideal for urgent notifications or interactive elements that need to grab immediate attention.

#FFCC00 · #99FF00 · #FF0099

Synthwave Glow

Excellent for creating gradient effects or lighting in retro-futuristic scenes.

#00CCFF · #3300FF · #FF0099

CSS variables

:root {
  --retro-arcade-neon-2-1: #FF0099;
  --retro-arcade-neon-2-2: #00CCFF;
  --retro-arcade-neon-2-3: #99FF00;
  --retro-arcade-neon-2-4: #FFCC00;
  --retro-arcade-neon-2-5: #3300FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-arcade-neon-2": {
        1: "#FF0099",
        2: "#00CCFF",
        3: "#99FF00",
        4: "#FFCC00",
        5: "#3300FF",
      }
    }
  }
}

Hex values

Color 1#FF0099

Color 2#00CCFF

Color 3#99FF00

Color 4#FFCC00

Color 5#3300FF

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

2.4:1Fail

2.2:1Fail

1.9:1Fail

1.5:1Fail

1.3:1Fail

4.3:1AA18

2.9:1Fail

1.5:1Fail

1.2:1Fail

6.4:1AA

2.4:1Fail

1.3:1Fail

1.2:1Fail

5.4:1AA

2.2:1Fail

4.3:1AA18

6.4:1AA

5.4:1AA

Similar palettes

More like Retro Arcade Neon