Palette

Retro Arcade

Evokes the buzzing energy and flashing lights of classic 80s and 90s arcade gaming machines.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFFF#FF00FF#FFFF00#0000FF#8A2BE2

Palette guide

How to use Retro Arcade

Overview

The "Retro Arcade" palette captures the raw, unfiltered energy of classic 80s and 90s arcade machines. Dominated by the iconic neon trio of #00FFFF (cyan), #FF00FF (magenta), and #FFFF00 (yellow), it's a direct nod to pixelated graphics and glowing screens. The inclusion of a vibrant #0000FF (blue) and a deep #8A2BE2 (blue-violet) provides essential grounding and depth, preventing the palette from becoming overwhelming. Designers can wield this collection to create projects that demand high visibility, playful nostalgia, and an unmistakable vintage tech vibe. Developers will find these hex codes perfect for designing game interfaces, digital signage, and any platform aiming for a high-energy, retro aesthetic.

Best used for

Arcade game cabinet art
90s themed party invitations
Tech startup branding (retro focus)
Digital art and pixel graphics
Interactive museum exhibits
Children's educational apps

Suggested color roles

primary

#FF00FF (A powerful magenta, excellent for calls to action, main headings, or focal points.)

secondary

#00FFFF (A bright cyan, ideal for supporting information, interactive elements, or background patterns.)

accent

#FFFF00 (A luminous yellow, perfect for highlights, notifications, or small, impactful details that need to pop.)

background

#8A2BE2 (A deep blue-violet, providing a rich, dark canvas that makes the neon colors truly glow and stand out.)

text

#0000FF (A vivid blue, offering good contrast on lighter backgrounds, or use white for text against #8A2BE2.)

Accessibility notes

#FFFF00 (yellow) and #00FFFF (cyan) offer strong contrast against dark backgrounds like #8A2BE2 or black.
Avoid using #FFFF00 (yellow) text on white or very light backgrounds due to poor readability.
#FF00FF (magenta) can be challenging for text readability on medium backgrounds; always check contrast ratios.
For general body text on lighter colors, a dark charcoal or black would be most accessible.

Recommended combinations

Pixel Pop

Ideal for creating dazzling effects, game animations, or elements that need to convey pure arcade energy.

#00FFFF · #FF00FF · #FFFF00

Retro Screen

Excellent for dark-themed interfaces, gaming UIs, or designs aiming for a strong, energetic, and futuristic retro vibe.

#8A2BE2 · #0000FF · #FFFF00

High Contrast

Use for impactful headlines, interactive buttons, or illustrations that require strong visual separation and excitement.

#FF00FF · #0000FF · #00FFFF

CSS variables

:root {
  --retro-arcade-1: #00FFFF;
  --retro-arcade-2: #FF00FF;
  --retro-arcade-3: #FFFF00;
  --retro-arcade-4: #0000FF;
  --retro-arcade-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-arcade": {
        1: "#00FFFF",
        2: "#FF00FF",
        3: "#FFFF00",
        4: "#0000FF",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#00FFFF

Color 2#FF00FF

Color 3#FFFF00

Color 4#0000FF

Color 5#8A2BE2

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

6.9:1AA

4.8:1AA

2.5:1Fail

2.9:1Fail

2.7:1Fail

1.9:1Fail

1.2:1Fail

2.9:1Fail

8:1AAA

5.5:1AA

6.9:1AA

2.7:1Fail

8:1AAA

1.4:1Fail

4.8:1AA

1.9:1Fail

5.5:1AA

1.4:1Fail

Similar palettes

More like Retro Arcade

Electric Synthwave Drive

Neon Dream Sequence