Palette

Retro Neon Diner

A dynamic burst of bright, contrasting colors inspired by classic retro diner signs and decor.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF5733#FFC300#DAF7A6#5A8BBD#C70039

Palette guide

How to use Retro Neon Diner

Overview

The "Retro Neon Diner" palette serves up a vibrant, high-energy mix reminiscent of classic roadside eateries and 80s aesthetics. This exciting scheme combines the fiery intensity of #FF5733 (a bright coral red) and #C70039 (a deep crimson) with the cheerful glow of #FFC300 (a sunny yellow). The unexpected inclusion of #DAF7A6 (a soft lime green) provides a fresh, quirky counterpoint, while #5A8BBD (a muted blue) offers a touch of cool stability. Designers can use this palette to create dynamic, eye-catching interfaces and branding that feel both nostalgic and undeniably modern. It's perfect for projects requiring a playful yet bold visual statement, ensuring elements stand out.

Best used for

Diner or fast-food branding
80s themed party invitations
Arcade game interfaces
Event promotion for lively festivals
Youth-oriented product packaging
Vibrant social media campaigns

Suggested color roles

primary

#FF5733 (An energetic, warm red that commands attention, ideal for calls-to-action and important alerts.)

secondary

#FFC300 (A bright, cheerful yellow, excellent for highlights, interactive elements, or headings.)

accent

#DAF7A6 (A fresh, soft lime green, providing a unique, playful pop for small details or icons.)

background

#5A8BBD (A calming, muted blue that provides a stable and slightly retro backdrop for the brighter colors.)

text

Use dark gray or black on #FFC300, #DAF7A6. Use white or light gray on #FF5733, #C70039, and #5A8BBD.

Accessibility notes

Text on #DAF7A6 and #FFC300 will require dark text for optimal readability.
#FF5733 and #C70039 are dark enough to usually require white or very light text.
Ensure sufficient contrast between #5A8BBD and any text placed upon it; light text is usually best.
The vibrant hues might be challenging for color-blind users if used as sole indicators; provide alternative cues.

Recommended combinations

Diner Pop

Captures the classic diner vibe, great for headers, buttons, and brand identity.

#FF5733 · #FFC300 · #5A8BBD

Neon Zest

Creates a lively, fresh contrast, ideal for playful graphics or energetic calls-to-action.

#DAF7A6 · #FF5733 · #C70039

Bold Contrast

Offers a strong, impactful combination, suitable for striking headlines or a dark mode theme.

#C70039 · #FFC300 · #5A8BBD

CSS variables

:root {
  --retro-neon-diner-1: #FF5733;
  --retro-neon-diner-2: #FFC300;
  --retro-neon-diner-3: #DAF7A6;
  --retro-neon-diner-4: #5A8BBD;
  --retro-neon-diner-5: #C70039;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-neon-diner": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#DAF7A6",
        4: "#5A8BBD",
        5: "#C70039",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#DAF7A6

Color 4#5A8BBD

Color 5#C70039

Accessibility

Contrast checker

2:1Fail

2.7:1Fail

1.1:1Fail

1.9:1Fail

2:1Fail

1.4:1Fail

2.2:1Fail

3.7:1AA18

2.7:1Fail

1.4:1Fail

3:1AA18

5.1:1AA

1.1:1Fail

2.2:1Fail

3:1AA18

1.7:1Fail

1.9:1Fail

3.7:1AA18

5.1:1AA

1.7:1Fail

Similar palettes

More like Retro Neon Diner

View all vibrant

Neon Arcade

Bubblegum Neon Pop

Electric Carnival Joy

Electric City Neon

Electro Arcade Surge

Electro City Beat