Palette

Retro Arcade Brights

Eye-popping, electric colors from classic arcade games, buzzing with an energetic, playful vibe.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF00FF#00FFFF#FFFF00#FF007F#00FF7F

Palette guide

How to use Retro Arcade Brights

Overview

The Retro Arcade Brights palette features eye-popping, electric colors from classic arcade games, buzzing with an energetic, playful vibe. This scheme includes #FF00FF (magenta), #00FFFF (cyan), #FFFF00 (yellow), #FF007F (raspberry), and #00FF7F (spring green). Designers and developers can deploy these highly saturated, contrasting hues to create vibrant, dynamic, and unmistakably retro experiences. It's an ideal choice for projects that demand a bold, pop-art aesthetic with a strong sense of fun and digital nostalgia, perfect for grabbing attention.

Best used for

Youth fashion and streetwear branding
Club flyers and music event promotions
Digital interfaces for entertainment platforms
Indie game development and character design
Vibrant social media graphics and campaigns
Concert promotions and festival branding

Suggested color roles

primary

Use #00FFFF (electric cyan) as a cool, inviting base for main sections or navigation, providing a modern edge.

secondary

Employ #FF00FF (vibrant magenta) for energetic complements, subheadings, or interactive elements that pop.

accent

Apply #FFFF00 (bright yellow) as an intense focal point for calls to action, scores, or critical alerts, ensuring high visibility.

background

Deep black (#000000) is essential for backgrounds to maximize the visual impact and neon glow of these bright colors.

text

For optimal readability on a black background, use #FFFF00 (bright yellow) or #00FFFF (electric cyan) for headings and key information.

Accessibility notes

These neon shades demand a very dark background (like black) for text readability to meet WCAG contrast requirements.
Be mindful of using #FF007F (raspberry) and #00FF7F (spring green) together for critical content due to potential contrast issues for some users.
Yellow (#FFFF00) on black provides the highest contrast for headings and important alerts within this palette.
Ensure sufficient contrast for interactive elements, especially buttons and links, to be discernible for all users.

Recommended combinations

Cyber Pop

Creates an iconic neon, high-contrast look, perfect for hero sections, dynamic logos, or vibrant digital advertisements.

#FF00FF · #00FFFF · #FFFF00

Electric Mix

Offers a playful and energetic blend, suitable for background patterns, decorative elements, or lively infographics.

#FF007F · #00FF7F · #FFFF00

Bright Pulse

Provides a cool, vibrant, and dynamic feel, excellent for interactive UI components, game effects, or abstract art.

#00FFFF · #FF00FF · #00FF7F

CSS variables

:root {
  --retro-arcade-brights-1: #FF00FF;
  --retro-arcade-brights-2: #00FFFF;
  --retro-arcade-brights-3: #FFFF00;
  --retro-arcade-brights-4: #FF007F;
  --retro-arcade-brights-5: #00FF7F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-arcade-brights": {
        1: "#FF00FF",
        2: "#00FFFF",
        3: "#FFFF00",
        4: "#FF007F",
        5: "#00FF7F",
      }
    }
  }
}

Hex values

Color 1#FF00FF

Color 2#00FFFF

Color 3#FFFF00

Color 4#FF007F

Color 5#00FF7F

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.2:1Fail

2.3:1Fail

2.5:1Fail

1.2:1Fail

3:1AA18

1.1:1Fail

2.9:1Fail

1.2:1Fail

3.5:1AA18

1.3:1Fail

1.2:1Fail

3:1AA18

3.5:1AA18

2.8:1Fail

2.3:1Fail

1.1:1Fail

1.3:1Fail

2.8:1Fail

Similar palettes

More like Retro Arcade Brights

Retro Arcade Brights

See it in context.

Ready when you are.

Built with Retro Arcade Brights.

How to use Retro Arcade Brights

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Cyber Pop

Electric Mix

Bright Pulse

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Arcade Brights