Palette

Retro Arcade Pixels

Bold and simple colors, perfect for capturing the nostalgic charm of classic arcade games.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F94144#F8961E#F9C74F#43AA8B#277DA1

Palette guide

How to use Retro Arcade Pixels

Overview

The Retro Arcade Pixels palette offers bold and simple colors, perfect for capturing the nostalgic charm of classic arcade games. This vibrant collection features a vivid red (#F94144), warm orange (#F8961E), bright yellow (#F9C74F), a refreshing teal green (#43AA8B), and a deep teal blue (#277DA1). Unlike pure neons, these hues have a slightly muted yet still punchy quality, ideal for evoking a softer, more inviting retro mood. Designers can leverage this palette to create friendly interfaces, charming illustrations, and branding that feels both nostalgic and approachable, ensuring projects resonate with a warm, playful energy.

Best used for

Indie game development
Retro-inspired branding for cafes or boutiques
Children's toy websites
Educational game design
Vintage poster remakes
Social media graphics with a friendly vibe

Suggested color roles

primary

Use #F94144 (Vivid Red) to command attention for hero elements, calls-to-action, or important alerts.

secondary

Employ #277DA1 (Deep Teal Blue) to provide a stable, grounding backdrop or primary container color.

accent

Utilize #F9C74F (Bright Yellow) for small, impactful highlights, notifications, or interactive hover states.

background

Leverage #277DA1 (Deep Teal Blue) as a versatile, calming background that allows the warmer, brighter colors to stand out.

text

For dark backgrounds like #277DA1, use #F9C74F for headings, or white for body text. On lighter areas, a dark charcoal or black provides optimal readability.

Accessibility notes

Ensure text in lighter colors like #F9C74F has sufficient contrast against darker backgrounds like #277DA1.
Avoid using #F8961E on #F9C74F for small text, as contrast may be insufficient.
This palette generally offers better inherent contrast than pure neons, but always test combinations.
Prioritize clear, simple fonts for body text to maintain legibility, especially with varied background colors.

Recommended combinations

Classic Game UI

Creates clear, functional UI with red for actions and yellow for highlights against a deep blue.

#277DA1 · #F94144 · #F9C74F

Friendly Retro

Ideal for playful illustrations or branding, evoking a warm, inviting vintage feel.

#F8961E · #43AA8B · #F9C74F

Pixel Scene

Excellent for building pixel art scenes with distinct foreground and background elements.

#F94144 · #F9C74F · #277DA1

CSS variables

:root {
  --retro-arcade-pixels-1: #F94144;
  --retro-arcade-pixels-2: #F8961E;
  --retro-arcade-pixels-3: #F9C74F;
  --retro-arcade-pixels-4: #43AA8B;
  --retro-arcade-pixels-5: #277DA1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-arcade-pixels": {
        1: "#F94144",
        2: "#F8961E",
        3: "#F9C74F",
        4: "#43AA8B",
        5: "#277DA1",
      }
    }
  }
}

Hex values

Color 1#F94144

Color 2#F8961E

Color 3#F9C74F

Color 4#43AA8B

Color 5#277DA1

Accessibility

Contrast checker

1.6:1Fail

2.3:1Fail

1.3:1Fail

1.6:1Fail

1.4:1Fail

1.3:1Fail

2.1:1Fail

2.3:1Fail

1.4:1Fail

1.8:1Fail

2.9:1Fail

1.3:1Fail

1.8:1Fail

1.6:1Fail

1.3:1Fail

2.1:1Fail

2.9:1Fail

1.6:1Fail

Similar palettes

More like Retro Arcade Pixels

Retro Arcade Pixels

See it in context.

Ready when you are.

Built with Retro Arcade Pixels.

How to use Retro Arcade Pixels

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Classic Game UI

Friendly Retro

Pixel Scene

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Arcade Pixels