Palette

Electric Pixel Art

Bold, contrasting neon colors that pop like classic pixel art from an arcade game.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Electric Pixel Art 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 Electric Pixel Art.

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

Data visualization

#FF0077#7700FF#00FF77#FF7700#0077FF

Palette guide

How to use Electric Pixel Art

Overview

The Electric Pixel Art palette features bold, contrasting neon colors that pop like classic pixel art from an arcade game. It includes the vibrant #FF0077 (Rose), energetic #7700FF (Violet), luminous #00FF77 (Spring Green), striking #FF7700 (Orange), and electric #0077FF (Azure). This collection is perfect for designs that evoke retro gaming, digital nostalgia, or anything requiring a playful, high-impact aesthetic. Designers can leverage these hues for stark contrasts, pixelated graphics, or dynamic UI elements. Developers will find it excellent for creating immersive user experiences in applications, websites, or games that demand a distinct retro-futuristic and energetic visual identity, particularly for pixel art games or creative platforms.

Best used for

Retro video game design
8-bit art and animation
Gaming brand identity
Digital art with pixelated effects
Children's educational apps
Vibrant interactive web elements

Suggested color roles

primary

#FF0077 (Rose) - A vibrant and energetic primary color, excellent for main characters, prominent game elements, or a bold background color.

secondary

#7700FF (Violet) - Offers a powerful, electric counterpoint, ideal for secondary characters, UI borders, or dynamic special effects in games.

accent

#FF7700 (Orange) - A luminous, attention-grabbing accent for power-ups, alerts, or critical information that needs immediate visibility in a pixelated style.

background

#0077FF (Azure) - A dynamic and bright background that can command attention, best used sparingly. For a more versatile background, consider a deep blue like #00008B or black.

text

#00FF77 (Spring Green) - Effective for high-impact headlines or short, urgent messages. For body text, black or dark gray on lighter backgrounds, or white on darker backgrounds like a deep blue or black.

Accessibility notes

Ensure high contrast when pairing #00FF77 or #FF7700 with light backgrounds; dark text is usually necessary.
Avoid using #FF0077, #7700FF, or #0077FF for small body text due to their intensity and potential for eye strain.
When using #0077FF as a background, ensure text colors (e.g., black or white) meet WCAG contrast ratios.
Prioritize dark text (e.g., black) on #00FF77, and white text on #FF0077 or #7700FF for optimal readability.

Recommended combinations

Arcade Pop

Creates a classic arcade game aesthetic, ideal for bold character outlines, glowing UI elements, or vibrant abstract pixel art.

#FF0077 · #7700FF · #00FF77

Retro Grid

Ideal for warnings, power-ups, or interactive elements that need to stand out with a clear, energetic signal in a pixelated environment.

#FF7700 · #0077FF · #FF0077

Electric Sprite

A high-energy trio for game sprites, event posters, or any design requiring a bold, electric, and modern feel with a pixel art twist.

#00FF77 · #7700FF · #FF7700

CSS variables

:root {
  --electric-pixel-art-1: #FF0077;
  --electric-pixel-art-2: #7700FF;
  --electric-pixel-art-3: #00FF77;
  --electric-pixel-art-4: #FF7700;
  --electric-pixel-art-5: #0077FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "electric-pixel-art": {
        1: "#FF0077",
        2: "#7700FF",
        3: "#00FF77",
        4: "#FF7700",
        5: "#0077FF",
      }
    }
  }
}

Hex values

Color 1#FF0077

Color 2#7700FF

Color 3#00FF77

Color 4#FF7700

Color 5#0077FF

Accessibility

Contrast checker

1.7:1Fail

2.8:1Fail

1.4:1Fail

1.1:1Fail

1.7:1Fail

4.8:1AA

2.4:1Fail

1.6:1Fail

2.8:1Fail

4.8:1AA

2:1Fail

3.1:1AA18

1.4:1Fail

2.4:1Fail

2:1Fail

1.6:1Fail

1.1:1Fail

1.6:1Fail

3.1:1AA18

1.6:1Fail

Similar palettes

More like Electric Pixel Art

Electric Pixel Art

See it in context.

Ready when you are.

Built with Electric Pixel Art.

How to use Electric Pixel Art

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Arcade Pop

Retro Grid

Electric Sprite

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Electric Pixel Art