Palette

Neon Arcade Flash

Bold and electrifying, these colors burst like the flashing lights and sounds 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 Flash 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 Flash.

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

Data visualization

#000000#FF00FF#00FFFF#FFFF00#FF0000

Palette guide

How to use Neon Arcade Flash

Overview

The "Neon Arcade Flash" palette is a bold, electrifying collection designed to burst with the energy of a vintage arcade. Centered around a classic black #000000, it provides the perfect stage for dazzling neon accents. The vivid magenta #FF00FF, brilliant cyan #00FFFF, and radiant yellow #FFFF00 create a striking, high-contrast effect. A powerful red #FF0000 adds an intense, urgent pop. This palette is a go-to for designers aiming for maximum visual impact and a distinct retro-futuristic feel. Developers will find these hex codes invaluable for creating dynamic UI elements, eye-catching game interfaces, or vibrant marketing materials that truly stand out. It's a versatile choice for projects that demand attention and convey excitement.

Best used for

Retro video game interfaces
Cyberpunk aesthetic branding
Dark mode UI designs
Event posters and flyers
High-contrast web layouts
Interactive art installations

Suggested color roles

primary

Use #000000 (Black) as the foundational background or dominant structural color to make the neons truly explode.

secondary

Apply #FF00FF (Magenta) for significant calls-to-action, active states, or prominent graphic elements to create a powerful focal point.

accent

Highlight critical information or interactive elements with #FFFF00 (Yellow) for unparalleled visibility and a vibrant pop.

background

The #000000 (Black) is the ideal background, allowing all other colors to glow intensely and creating an authentic arcade atmosphere.

text

For optimal readability, use #FFFF00 or #00FFFF for headings and important text. White or a very light gray should be used for body text against the black background.

Accessibility notes

Ensure sufficient contrast when using #FF00FF, #00FFFF, #FFFF00, or #FF0000 for text against the #000000 background.
Avoid placing #FFFF00 text directly on #FF0000 backgrounds or vice-versa due to low contrast.
Prioritize larger font sizes for any neon-colored text to enhance readability, especially for decorative fonts.
Use a tool to check WCAG compliance for all text and interactive elements, aiming for AA or AAA ratings.

Recommended combinations

Classic Neon

Perfect for creating a dramatic, high-contrast background with vibrant UI elements.

#000000 · #FF00FF · #00FFFF

Arcade Alert

Ideal for warnings, alerts, or urgent interactive elements in a game or application.

#FF0000 · #FFFF00 · #000000

Electric Pop

Excellent for dynamic headlines, hero sections, or loading screen animations.

#FFFF00 · #FF00FF · #00FFFF

CSS variables

:root {
  --neon-arcade-flash-1: #000000;
  --neon-arcade-flash-2: #FF00FF;
  --neon-arcade-flash-3: #00FFFF;
  --neon-arcade-flash-4: #FFFF00;
  --neon-arcade-flash-5: #FF0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-arcade-flash": {
        1: "#000000",
        2: "#FF00FF",
        3: "#00FFFF",
        4: "#FFFF00",
        5: "#FF0000",
      }
    }
  }
}

Hex values

Color 1#000000

Color 2#FF00FF

Color 3#00FFFF

Color 4#FFFF00

Color 5#FF0000

Accessibility

Contrast checker

6.7:1AA

16.7:1AAA

19.6:1AAA

5.3:1AA

6.7:1AA

2.5:1Fail

2.9:1Fail

1.3:1Fail

16.7:1AAA

2.5:1Fail

1.2:1Fail

3.2:1AA18

19.6:1AAA

2.9:1Fail

1.2:1Fail

3.7:1AA18

5.3:1AA

1.3:1Fail

3.2:1AA18

3.7:1AA18

Similar palettes

More like Neon Arcade Flash

Cybernetic Spectrum Surge

Cyberpunk Pulse Wave