Palette

Retro Game Pixel

Bold and electric, reminiscent of retro arcade games and the buzzing energy of late-night fun.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00FFC9#FF007C#FFEE00#3E006F#0B1527

Palette guide

How to use Retro Game Pixel

Overview

The Retro Game Pixel palette (version 3) is a vibrant and edgy collection, blending electric neons with deep, atmospheric tones for a distinctly modern retro feel. It features a dazzling aqua #00FFC9, a bold fuchsia #FF007C, and a brilliant neon yellow #FFEE00. These brights are grounded by a rich dark purple #3E006F and an almost-black deep blue #0B1527. This palette is ideal for designers and developers creating projects that require a playful yet sophisticated 80s-inspired vibe, from futuristic game interfaces and dynamic web designs to eye-catching branding that stands out with its energetic and digital aesthetic.

Best used for

Modern retro game UI/UX
Nightclub or event branding
Digital art with a synthwave edge
Dark mode web applications
Streaming platform overlays
Fashion or beauty content

Suggested color roles

primary

#0B1527 - A very dark blue, almost black, serving as a sophisticated and deep background to make the neons truly glow.

secondary

#00FFC9 - An electrifying aqua, perfect for interactive elements, highlights, or a primary accent color that feels futuristic.

accent

#FF007C - A striking fuchsia, ideal for calls-to-action, warnings, or adding a bold, playful pop against dark backgrounds.

background

#3E006F - A deep, mysterious purple, offering an alternative dark background that adds richness and depth to the neon accents.

text

#FFEE00 - This bright neon yellow is excellent for primary text on dark backgrounds like #0B1527 or #3E006F, ensuring high visibility.

Accessibility notes

Text in #FFEE00 (yellow) provides good contrast on #0B1527 (dark blue) and #3E006F (dark purple).
Ensure #00FFC9 (aqua) and #FF007C (fuchsia) are used for larger text or graphical elements on dark backgrounds to maximize readability.
Avoid using #00FFC9 or #FF007C for extensive body text, as their brightness can cause eye strain.
Always verify contrast ratios for all critical text and UI elements to meet WCAG standards.

Recommended combinations

Cyber Night

A high-contrast, futuristic look ideal for dark mode interfaces, game menus, or tech branding.

#0B1527 · #00FFC9 · #FFEE00

Electric Sunset

Vibrant and energetic, suitable for eye-catching headers, event promotions, or playful digital art.

#3E006F · #FF007C · #FFEE00

Digital Glitch

Dynamic and bold, great for highlighting interactive elements, warning messages, or abstract digital patterns.

#00FFC9 · #FF007C · #0B1527

CSS variables

:root {
  --retro-game-pixel-3-1: #00FFC9;
  --retro-game-pixel-3-2: #FF007C;
  --retro-game-pixel-3-3: #FFEE00;
  --retro-game-pixel-3-4: #3E006F;
  --retro-game-pixel-3-5: #0B1527;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-game-pixel-3": {
        1: "#00FFC9",
        2: "#FF007C",
        3: "#FFEE00",
        4: "#3E006F",
        5: "#0B1527",
      }
    }
  }
}

Hex values

Color 1#00FFC9

Color 2#FF007C

Color 3#FFEE00

Color 4#3E006F

Color 5#0B1527

Accessibility

Contrast checker

2.9:1Fail

1.1:1Fail

11.3:1AAA

14:1AAA

2.9:1Fail

3.2:1AA18

3.9:1AA18

4.8:1AA

1.1:1Fail

3.2:1AA18

12.2:1AAA

15.2:1AAA