Palette

Retro Diner Neon

Bold, flashy colors that evoke the classic, glowing signs of a 1950s American diner.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Diner Neon 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 Diner Neon.

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

Data visualization

#FC2828#FCD928#28FCFC#2828FC#A828FC

Palette guide

How to use Retro Diner Neon

Overview

The "Retro Diner Neon" palette is a dazzling collection of intensely saturated, glowing colors, perfectly embodying the electrifying atmosphere of a vintage diner's signage. This scheme features a fiery neon red (#FC2828), a luminous yellow (#FCD928), a vibrant cyan (#28FCFC), a deep electric blue (#2828FC), and a striking purple (#A828FC). It's an ideal choice for designers and developers aiming to create projects that are bold, futuristic-retro, and visually stunning. Leverage these hues to evoke excitement, modern energy, and a distinct cyber-punk flair.

Best used for

Digital interfaces and game design
Cyberpunk or synthwave aesthetics
Event posters for clubs or festivals
Edgy fashion branding and marketing
Music album art and visualizers
Vibrant social media graphics

Suggested color roles

primary

Designate #FC2828 (Neon Red) for high-impact calls-to-action, prominent headlines, or dynamic elements that demand immediate attention.

secondary

Utilize #2828FC (Electric Blue) for stable, contrasting sections, navigation, or to ground the more energetic hues with a cool depth.

accent

Incorporate #FCD928 (Luminous Yellow), #28FCFC (Vibrant Cyan), and #A828FC (Striking Purple) for glowing highlights, interactive states, or to simulate true neon light effects.

background

A deep black or dark charcoal background is highly recommended to maximize the neon glow effect of all colors in this palette.

text

For optimal readability, use a crisp white or a luminous accent like #FCD928 (Luminous Yellow) on a dark background, ensuring strong contrast.

Accessibility notes

All colors are extremely bright; ensure sufficient contrast for text, especially when used on other bright colors or medium tones.
For true neon effect and best readability, pair these vibrant colors with a dark, contrasting background (e.g., black).
Avoid placing similar bright hues for text and background in critical areas, as this can cause eye strain and poor legibility.
Ensure large text and interactive elements have a minimum contrast ratio of 4.5:1 against their background.

Recommended combinations

Neon Glow

Excellent for creating energetic, eye-catching graphics, headlines, and interactive elements with a luminous quality.

#FC2828 · #FCD928 · #28FCFC

Electric Contrast

Ideal for bold branding, striking visual statements, or designs that require a powerful, dynamic contrast.

#2828FC · #A828FC · #FC2828

Cyber Retro

Perfect for backgrounds, secondary accents, or sections requiring a cool, modern, and high-tech retro aesthetic.

#28FCFC · #FCD928 · #2828FC

CSS variables

:root {
  --retro-diner-neon-1: #FC2828;
  --retro-diner-neon-2: #FCD928;
  --retro-diner-neon-3: #28FCFC;
  --retro-diner-neon-4: #2828FC;
  --retro-diner-neon-5: #A828FC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-neon": {
        1: "#FC2828",
        2: "#FCD928",
        3: "#28FCFC",
        4: "#2828FC",
        5: "#A828FC",
      }
    }
  }
}

Hex values

Color 1#FC2828

Color 2#FCD928

Color 3#28FCFC

Color 4#2828FC

Color 5#A828FC

Accessibility

Contrast checker

2.8:1Fail

3:1AA18

2:1Fail

1.3:1Fail

2.8:1Fail

1.1:1Fail

5.4:1AA

3.5:1AA18

3:1AA18

1.1:1Fail

5.9:1AA

3.8:1AA18

2:1Fail

5.4:1AA

5.9:1AA

1.6:1Fail

1.3:1Fail

3.5:1AA18

3.8:1AA18

1.6:1Fail

Similar palettes

More like Retro Diner Neon