Palette

Pixelated Game Grid

A playful palette reminiscent of classic 8-bit arcade games, featuring vibrant pixelated colors and a dark backdrop.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A1A1A#E63946#457B9D#F4D35E#A8DADC

Palette guide

How to use Pixelated Game Grid

Overview

The Pixelated Game Grid palette offers a playful yet structured aesthetic, reminiscent of classic 8-bit arcade games. It features a solid dark background (#1A1A1A) that makes its vibrant pixelated colors truly stand out. Bold red (#E63946), serene blue (#457B9D), and cheerful yellow (#F4D35E) provide dynamic accents, while a light, airy blue (#A8DADC) adds a touch of brightness. This palette is an excellent choice for designers and developers seeking to create modern retro interfaces, data visualizations, or branding that feels both nostalgic and sophisticated.

Best used for

Retro gaming interfaces and dashboards
Educational platforms and infographics
Data visualization and analytics tools
Indie game branding and marketing
Tech blogs and online portfolios
Modern art installations with pixel themes

Suggested color roles

primary

#E63946 serves as a bold, engaging primary, ideal for main calls to action, important alerts, or key interactive elements.

secondary

#457B9D offers a calm, stable contrast, excellent for supporting information, navigation, or background elements.

accent

#F4D35E is a bright, cheerful accent, perfect for highlights, interactive states, or small details that need to pop.

background

The solid dark #1A1A1A provides a strong, sophisticated base that ensures the vibrant colors are highly visible.

text

For optimal readability, use #F4D35E or #A8DADC for text on the #1A1A1A background. For lighter backgrounds, a dark charcoal or black is recommended.

Accessibility notes

Both #F4D35E and #A8DADC provide good contrast on the dark #1A1A1A background, making them suitable for text.
Be cautious using #A8DADC on #457B9D for small text; ensure sufficient luminosity difference for readability.
Always test color combinations against WCAG contrast guidelines, especially for interactive elements and critical information.
Consider using larger font sizes for important text elements to enhance legibility with these color pairings.

Recommended combinations

Dark Grid

Creates a strong contrast and dynamic feel, perfect for main screen designs, interactive game maps, or data dashboards.

#1A1A1A · #F4D35E · #E63946

Playful Data

A clear and informative combination, ideal for charts, graphs, or secondary UI elements that need to be legible and engaging.

#457B9D · #A8DADC · #F4D35E

Retro Accent

A balanced and engaging combination, excellent for differentiating sections or highlighting key features with a retro vibe.

#1A1A1A · #E63946 · #457B9D

CSS variables

:root {
  --pixelated-game-grid-1: #1A1A1A;
  --pixelated-game-grid-2: #E63946;
  --pixelated-game-grid-3: #457B9D;
  --pixelated-game-grid-4: #F4D35E;
  --pixelated-game-grid-5: #A8DADC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pixelated-game-grid": {
        1: "#1A1A1A",
        2: "#E63946",
        3: "#457B9D",
        4: "#F4D35E",
        5: "#A8DADC",
      }
    }
  }
}

Hex values

Color 1#1A1A1A

Color 2#E63946

Color 3#457B9D

Color 4#F4D35E

Color 5#A8DADC

Accessibility

Contrast checker

4.2:1AA18

3.8:1AA18

11.9:1AAA

11.4:1AAA

4.2:1AA18

1.1:1Fail

2.8:1Fail

2.7:1Fail

3.8:1AA18

1.1:1Fail

3.1:1AA18

3:1AA18

11.9:1AAA

2.8:1Fail

3.1:1AA18

1:1Fail

11.4:1AAA

2.7:1Fail

3:1AA18

1:1Fail

Similar palettes

More like Pixelated Game Grid

View all vibrant

Pixelated Arcade Glitch