Palette

Neon Arcade Nights

Electrifying, luminous colors inspired by the dazzling glow of a retro arcade after dark.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFD700#39FF14#8A2BE2

Palette guide

How to use Neon Arcade Nights

Overview

The "Neon Arcade Nights" palette is an electrifying and luminous collection, drawing inspiration from the dazzling glow of a retro arcade after dark. It features a bold electric magenta #FF00FF, a cool, digital cyan #00FFFF, and a radiant golden yellow #FFD700. A vibrant neon green #39FF14 injects pure energy, perfectly balanced by the deep, atmospheric blue violet #8A2BE2. This palette is a powerhouse for designers aiming to create high-impact, futuristic, and energetic visuals. Developers will find these hex codes invaluable for crafting immersive game environments, dynamic UI elements, or captivating digital art. Its intense contrast and striking hues ensure any project stands out with an undeniable electric presence.

Best used for

Futuristic game interfaces
Cyberpunk themed illustrations
High-energy event branding
Interactive web experiences
Esports graphics and streaming
Motion design and animations

Suggested color roles

primary

Use #FF00FF (Magenta) for dominant calls-to-action, hero sections, or key graphic elements to command immediate attention.

secondary

Apply #00FFFF (Cyan) for navigation, background accents, or secondary interactive elements, creating a cool, digital contrast.

accent

Highlight critical information or interactive states with #39FF14 (Neon Green) for unparalleled visibility and a vivid, energetic pop.

background

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

text

For headlines and important text on dark backgrounds, #FFD700 or #39FF14 offers excellent legibility. Use white or a very light gray for body text.

Accessibility notes

Ensure high contrast for text, especially when using #39FF14 or #FFD700 against other bright colors; dark text is usually required.
Avoid placing #FFD700 text directly on #39FF14 backgrounds due to potential low contrast.
Prioritize using these vibrant colors for larger visual elements, icons, or decorative accents rather than lengthy body text.
Always test color combinations with accessibility checkers to confirm WCAG AA or AAA compliance for critical information.

Recommended combinations

Cyber Glow

Creates a mysterious, glowing atmosphere, great for sci-fi interfaces or backgrounds.

#FF00FF · #00FFFF · #8A2BE2

Electric Pop

Ideal for high-energy headlines, calls-to-action, or vibrant interactive elements.

#39FF14 · #FFD700 · #00FFFF

Arcade Energy

Excellent for creating a lively, playful feel in game UIs or digital art.

#FF00FF · #39FF14 · #FFD700

CSS variables

:root {
  --neon-arcade-nights-3-1: #FF00FF;
  --neon-arcade-nights-3-2: #00FFFF;
  --neon-arcade-nights-3-3: #FFD700;
  --neon-arcade-nights-3-4: #39FF14;
  --neon-arcade-nights-3-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-arcade-nights-3": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFD700",
        4: "#39FF14",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFD700

Color 4#39FF14

Color 5#8A2BE2

Accessibility

Contrast checker

2.5:1Fail

2.2:1Fail

2.3:1Fail

1.9:1Fail

2.5:1Fail

1.1:1Fail

4.8:1AA

2.2:1Fail

1.1:1Fail

1:1Fail

4.2:1AA18

2.3:1Fail

1.1:1Fail

1:1Fail

4.4:1AA18

1.9:1Fail

4.8:1AA

4.2:1AA18

4.4:1AA18

Similar palettes

More like Neon Arcade Nights

Neon Arcade Nights

See it in context.

Ready when you are.

Built with Neon Arcade Nights.

How to use Neon Arcade Nights

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cyber Glow

Electric Pop

Arcade Energy

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Neon Arcade Nights