Palette

Pixel Neon Rush

A nostalgic yet energetic palette channeling the pixelated fun and neon glow of classic arcade games.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pixel Neon Rush 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 Neon Rush.

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

Data visualization

#FF00FF#00FFFF#FFFF00#000000#FFFFFF

Palette guide

How to use Pixel Neon Rush

Overview

The Pixel Neon Rush palette is a dynamic and nostalgic collection designed for high-energy digital experiences. Featuring electric magenta #FF00FF, vibrant cyan #00FFFF, and bold yellow #FFFF00, it perfectly captures the essence of classic arcade games and futuristic interfaces. Grounded by deep black #000000 and crisp white #FFFFFF, this palette offers stark contrasts essential for readability and visual impact. Designers and developers can leverage its electrifying hues to create unforgettable user interfaces, game environments, and branding that demands attention. It's ideal for projects aiming for a retro-futuristic aesthetic.

Best used for

Arcade game UIs and graphics
Retro-themed event posters and flyers
Live streaming overlays and branding
Vibrant digital art installations
Tech startup branding with an energetic feel
Motion graphics and animated logos

Suggested color roles

primary

Use #FF00FF as a dominant brand color or for key interactive elements that require immediate attention.

secondary

Employ #00FFFF for supporting visual information, secondary calls-to-action, or to create a cool, digital glow effect.

accent

Apply #FFFF00 sparingly for highlights, warnings, or small, impactful details to add a jolt of energy.

background

Utilize #000000 (black) extensively to make the neon colors pop, creating a dramatic, deep space effect.

text

Primarily use #FFFFFF (white) for body text and labels against dark backgrounds, ensuring maximum readability.

Accessibility notes

Ensure sufficient contrast when pairing neon colors directly, especially #FFFF00 on #FFFFFF, which will be illegible.
Avoid using #FF00FF text on #00FFFF backgrounds without a strong border or shadow due to low luminosity contrast.
Always test text legibility; #FFFFFF on #000000 is highly accessible, but neon text requires larger sizes or bolding.
Consider alternative text styles or indicators for users with color vision deficiencies, as some neon contrasts might be difficult.

Recommended combinations

Arcade Pop

Ideal for main headers or key graphic elements where high impact and contrast are crucial.

#000000 · #FF00FF · #00FFFF

Cyber Glow

Great for dynamic backgrounds or animated elements to evoke a glowing digital interface.

#00FFFF · #FFFF00 · #000000

Bright Retro

Use for clean layouts where white provides a stark canvas for neon accents and black text.

#FFFFFF · #FF00FF · #000000

CSS variables

:root {
  --pixel-neon-rush-1: #FF00FF;
  --pixel-neon-rush-2: #00FFFF;
  --pixel-neon-rush-3: #FFFF00;
  --pixel-neon-rush-4: #000000;
  --pixel-neon-rush-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pixel-neon-rush": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#000000

Color 5#FFFFFF

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

6.7:1AA

3.1:1AA18

2.5:1Fail

1.2:1Fail

16.7:1AAA

1.3:1Fail

2.9:1Fail

1.2:1Fail

19.6:1AAA

1.1:1Fail

6.7:1AA

16.7:1AAA

19.6:1AAA

21:1AAA

3.1:1AA18

1.3:1Fail

1.1:1Fail

21:1AAA

Similar palettes

More like Pixel Neon Rush

View all vibrant

Arcade Neon Dreams

Neon Vaporwave Nights