Palette

Neon Arcade Glow

Electric brights and synthetic shades transport you to the exhilarating, glowing world of a retro arcade.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFC0#8A2BE2#FF00FF#00BFFF#FFFF00

Palette guide

How to use Neon Arcade Glow

Overview

The "Neon Arcade Glow" palette is an electrifying collection designed to transport viewers to a retro-futuristic world of vibrant light. Featuring a stunning bright turquoise #00FFC0, a deep, enigmatic blue violet #8A2BE2, and a powerful electric magenta #FF00FF, this palette exudes energy. The brilliant deep sky blue #00BFFF adds a cool, digital touch, while the luminous yellow #FFFF00 provides a radiant pop. This palette is perfect for designers aiming to create immersive, dynamic, and visually striking experiences. Developers can utilize these hex codes for game interfaces, interactive art, or any project requiring a distinct, glowing aesthetic. Its unique combination of cool and warm neons offers incredible versatility for compelling visual narratives.

Best used for

Retro-futuristic branding
Interactive art installations
Game UI and HUD elements
Concert and event graphics
Sci-fi themed web design
Motion graphics and animations

Suggested color roles

primary

Use #FF00FF (Magenta) for primary calls-to-action or large graphic elements to create a strong, energetic focal point.

secondary

Apply #00BFFF (Deep Sky Blue) for background sections, navigation, or secondary interactive elements, providing a cool and inviting feel.

accent

Highlight key information or interactive states with #FFFF00 (Yellow) for maximum visibility and a radiant, glowing effect.

background

A deep, dark shade of purple like #8A2BE2 can offer a unique and atmospheric background, or opt for classic black to amplify the neon glow.

text

For headlines and important text on dark backgrounds, #FFFF00 or #00FFC0 offers excellent legibility. Use white or light gray for body text.

Accessibility notes

Ensure sufficient contrast when using #00FFC0 or #FFFF00 for text against any background, especially other bright colors.
Avoid pairing #FFFF00 with #00FFC0 for text or small interactive elements due to potential low contrast.
Prioritize using these vibrant colors for larger text, icons, or decorative elements, reserving dark neutrals for body copy.
Always verify contrast ratios for text and interactive elements against WCAG guidelines (AA or AAA) to ensure readability.

Recommended combinations

Cyber Glow

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

#00FFC0 · #8A2BE2 · #FF00FF

Electric Pop

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

#FFFF00 · #00BFFF · #FF00FF

Arcade Energy

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

#00FFC0 · #FFFF00 · #00BFFF

CSS variables

:root {
  --neon-arcade-glow-1: #00FFC0;
  --neon-arcade-glow-2: #8A2BE2;
  --neon-arcade-glow-3: #FF00FF;
  --neon-arcade-glow-4: #00BFFF;
  --neon-arcade-glow-5: #FFFF00;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-arcade-glow": {
        1: "#00FFC0",
        2: "#8A2BE2",
        3: "#FF00FF",
        4: "#00BFFF",
        5: "#FFFF00",
      }
    }
  }
}

Hex values

Color 1#00FFC0

Color 2#8A2BE2

Color 3#FF00FF

Color 4#00BFFF

Color 5#FFFF00

Accessibility

Contrast checker

4.6:1AA

2.4:1Fail

1.6:1Fail

1.2:1Fail

4.6:1AA

1.9:1Fail

2.8:1Fail

5.5:1AA