Palette

Neon Game Level

Electrifying and vibrant, this palette captures the iconic glow of an 80s arcade game screen.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Game Level 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 Game Level.

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

Data visualization

#22002A#8F00FF#FF00FF#00FFFF#FFDA00

Palette guide

How to use Neon Game Level

Overview

The Neon Game Level palette is a high-octane tribute to the electrifying arcade aesthetics of the 80s, perfect for projects seeking a retro-futuristic vibe. It features a bold array of colors: a deep, mysterious dark purple (#22002A), vibrant violet (#8F00FF), shocking magenta (#FF00FF), luminous cyan (#00FFFF), and a bright, energetic yellow (#FFDA00). This combination is designed for maximum visual excitement and nostalgia, making it an excellent choice for designers and developers creating game UIs, synthwave album art, or anything that needs to capture the iconic glow of classic arcade screens and digital realms.

Best used for

Retro arcade game interfaces and assets
Synthwave and vaporwave album art
80s-themed event promotions
Streamer branding and overlays
Nostalgic web design projects
Digital art with a vintage tech feel

Suggested color roles

primary

Use #8F00FF (Violet) for primary UI elements, main character highlights, or key interactive areas, embodying the core retro glow.

secondary

Apply #FF00FF (Magenta) for secondary actions, power-ups, or distinct game elements to add a punchy, energetic contrast.

accent

Incorporate #FFDA00 (Yellow) for score displays, warnings, or special effects, ensuring high visibility, or #00FFFF (Cyan) for cool, digital accents.

background

Utilize #22002A (Dark Purple) as the dominant background color, providing a deep, atmospheric canvas for the bright neons.

text

For body text, use white or a light gray. Headings, scores, and critical game information can leverage #FFDA00 or #00FFFF for maximum retro appeal.

Accessibility notes

Ensure high contrast between text and interactive elements and the dark #22002A background to meet WCAG standards.
Limit the use of highly saturated neon colors for small, dense text blocks, as they can cause eye fatigue during gameplay.
When using multiple neon colors, ensure adequate luminance difference to prevent elements from blending together.
Consider offering options for reducing flashing or intense visual effects for users with light sensitivity.

Recommended combinations

Arcade Glow

Ideal for main game screens, scoreboards, or prominent UI elements, combining key retro colors with a dark base.

#8F00FF · #FFDA00 · #22002A

Synthwave Burst

Excellent for dynamic effects, loading screens, or character highlights, leveraging contrasting neons.

#FF00FF · #00FFFF · #22002A

Power-Up Pop

Perfect for buttons, power-up indicators, or call-to-action elements that need to stand out with vibrant energy.

#FFDA00 · #8F00FF · #22002A

CSS variables

:root {
  --neon-game-level-1: #22002A;
  --neon-game-level-2: #8F00FF;
  --neon-game-level-3: #FF00FF;
  --neon-game-level-4: #00FFFF;
  --neon-game-level-5: #FFDA00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-game-level": {
        1: "#22002A",
        2: "#8F00FF",
        3: "#FF00FF",
        4: "#00FFFF",
        5: "#FFDA00",
      }
    }
  }
}

Hex values

Color 1#22002A

Color 2#8F00FF

Color 3#FF00FF

Color 4#00FFFF

Color 5#FFDA00

Accessibility

Contrast checker

3.3:1AA18

6.1:1AA

15.2:1AAA

13.9:1AAA

3.3:1AA18

1.9:1Fail

4.6:1AA

4.2:1AA18

6.1:1AA

1.9:1Fail

2.5:1Fail

2.3:1Fail