Palette

Retro Game Pixel

Iconic, punchy primary colors that transport you back to the simplistic charm of 8-bit video games.

retroplayful5 colors

More retro 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

#FF0000#00FF00#0000FF#FFFF00#800080

Palette guide

How to use Retro Game Pixel

Overview

The Retro Game Pixel palette (version 2) is a vibrant celebration of classic 8-bit graphics, built upon bold primary colors with a playful twist. It features a strong red #FF0000, a bright green #00FF00, and a deep blue #0000FF, reminiscent of early video game consoles. A brilliant yellow #FFFF00 and a rich purple #800080 add depth and versatility. This palette is perfect for designers and developers looking to inject a sense of nostalgia, simplicity, and fun into their projects, from game development and digital illustrations to branding and merchandise that aims for a distinct retro charm. Its directness makes it highly impactful.

Best used for

8-bit video game graphics
Children's app interfaces
Retro-themed merchandise
Educational content for kids
Playful branding and logos
Pixel art illustrations

Suggested color roles

primary

#FF0000 - A bold, classic red, excellent for main characters, significant alerts, or primary calls-to-action in a pixelated style.

secondary

#00FF00 - A vibrant green, perfect for secondary elements, power-ups, or positive feedback in game interfaces.

accent

#FFFF00 - A brilliant yellow, ideal for highlights, score displays, or any element needing high visibility and energy.

background

#0000FF - A strong blue that can serve as a sky or water backdrop, or a deep dark blue/black for contrast.

text

white - Pure white or a very light gray provides excellent contrast against all primary colors in this palette.

Accessibility notes

Ensure #FFFF00 (yellow) text has sufficient contrast against its background, especially if used on #00FF00 (green) or #0000FF (blue).
Contrast between #800080 (purple) and #FF0000 (red) or #00FF00 (green) can be low; use carefully for adjacent elements.
White text on #FF0000, #00FF00, #0000FF, and #800080 should generally provide good readability.
Avoid using the bright primary colors for extensive blocks of body text; they are best for headings and accents.

Recommended combinations

Primary Punch

The classic 8-bit triad, perfect for game sprites, iconic logos, or bold statements.

#FF0000 · #00FF00 · #0000FF

Pixel Pop

Vibrant and playful, excellent for power-ups, special items, or highlighting key game elements.

#FFFF00 · #800080 · #FF0000

Retro Screen

A cool-toned combination for backgrounds, level designs, or abstract retro patterns.

#0000FF · #00FF00 · #800080

CSS variables

:root {
  --retro-game-pixel-2-1: #FF0000;
  --retro-game-pixel-2-2: #00FF00;
  --retro-game-pixel-2-3: #0000FF;
  --retro-game-pixel-2-4: #FFFF00;
  --retro-game-pixel-2-5: #800080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-game-pixel-2": {
        1: "#FF0000",
        2: "#00FF00",
        3: "#0000FF",
        4: "#FFFF00",
        5: "#800080",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#00FF00

Color 3#0000FF

Color 4#FFFF00

Color 5#800080

Accessibility

Contrast checker

2.9:1Fail

2.1:1Fail

3.7:1AA18

2.4:1Fail

2.9:1Fail

6.3:1AA

1.3:1Fail

6.9:1AA

2.1:1Fail

6.3:1AA

8:1AAA

1.1:1Fail

3.7:1AA18

1.3:1Fail

8:1AAA

8.8:1AAA

2.4:1Fail

6.9:1AA

1.1:1Fail

8.8:1AAA

Similar palettes

More like Retro Game Pixel

View all retro

Childhood Memory Blocks