Palette

Pixelated Game Night

Electric, saturated colors that instantly transport you back to a classic 8-bit arcade game.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pixelated Game Night 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 Pixelated Game Night.

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF66FF#66FFFF

Palette guide

How to use Pixelated Game Night

Overview

The Pixelated Game Night palette features electric, saturated colors that instantly transport you back to a classic 8-bit arcade game. Dominated by vibrant magenta (#FF00FF), cool cyan (#00FFFF), and brilliant yellow (#FFFF00), this palette is designed for high energy. Softer variations of magenta (#FF66FF) and cyan (#66FFFF) add depth and versatility, allowing for nuanced glows and transitions. Ideal for designers and developers aiming to create immersive, nostalgic, and visually stimulating digital experiences with a strong retro gaming or cyberpunk aesthetic.

Best used for

Arcade game UI and character design
Streaming channel graphics and overlays
Retro party invitations and flyers
Synthwave music covers and visuals
Digital art and generative graphics
Cyberpunk-themed websites and apps

Suggested color roles

primary

#FF00FF serves as a dominant, high-energy primary, ideal for main calls to action, logos, or key interactive elements.

secondary

#00FFFF provides a cool, techy contrast, excellent for supporting information, active states, or navigation.

accent

#FFFF00 is a brilliant accent, perfect for urgent alerts, interactive elements, or small details that demand attention.

background

A deep, dark neutral like black or a very dark blue is crucial to provide a strong contrast and allow these neon colors to truly glow.

text

For optimal readability, use #FFFF00 or #00FFFF for text on dark backgrounds. For lighter backgrounds, a stark black or charcoal is recommended.

Accessibility notes

Luminosity contrast is crucial. #FFFF00 on a dark background offers good readability.
Avoid using #FF00FF on #FF66FF for small text due to insufficient contrast in luminosity.
Consider using larger font sizes or bolding for critical text elements to enhance legibility with these vibrant color combinations.
Always test color pairings against WCAG contrast guidelines for interactive elements and essential content.

Recommended combinations

Neon Arcade

A classic vibrant triad, perfect for high-energy interactive elements, main UI components, or dynamic graphic overlays.

#FF00FF · #00FFFF · #FFFF00

Soft Glow

Creates a lighter, ethereal feel, suitable for glowing effects, secondary backgrounds, or subtle transitions.

#FF66FF · #66FFFF · #FFFF00

Game Over

An energetic and dynamic combination, great for alerts, status indicators, or impactful visual feedback.

#FF00FF · #FFFF00 · #66FFFF

CSS variables

:root {
  --pixelated-game-night-1: #FF00FF;
  --pixelated-game-night-2: #00FFFF;
  --pixelated-game-night-3: #FFFF00;
  --pixelated-game-night-4: #FF66FF;
  --pixelated-game-night-5: #66FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pixelated-game-night": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF66FF",
        5: "#66FFFF",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#FF66FF

Color 5#66FFFF

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.3:1Fail

2.6:1Fail

2.5:1Fail

1.2:1Fail

1.9:1Fail

1:1Fail

2.9:1Fail

1.2:1Fail

2.3:1Fail

1.1:1Fail

1.3:1Fail

1.9:1Fail

2.3:1Fail

2:1Fail

2.6:1Fail

1:1Fail

1.1:1Fail

2:1Fail

Similar palettes

More like Pixelated Game Night

View all vibrant

80s Arcade Glow

Neon Arcade Buzz

Pixelated Arcade Glitch

Pixelated Game Grid

Retro Arcade

Retro Arcade Flash