Palette

Retro Diner Glow

A vibrant blast of classic Americana, reminiscent of bright neon signs and juicy burgers in a 50s diner.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FCBF49#F77F00#D62828#003049#D68500

Palette guide

How to use Retro Diner Glow

Overview

The Retro Diner Glow palette is a vibrant blast of classic Americana, reminiscent of bright neon signs and juicy burgers from a 1950s diner. This energetic collection features a radiant #FCBF49 (golden yellow), a fiery #F77F00 (bright orange), a bold #D62828 (deep red), a grounding #003049 (dark navy blue), and a rich #D68500 (deep gold-orange). It's a powerful palette for designers and developers looking to inject projects with an exciting, vintage-inspired energy. The strong contrasts and saturated hues make it perfect for designs that aim to be both eye-catching and deeply nostalgic, capturing the lively spirit of a bygone era.

Best used for

Food truck or restaurant branding with a bold personality
Event posters and promotional materials requiring high impact
Retro gaming interfaces and design elements
Apparel and merchandise design with a vintage Americana theme
Digital advertising campaigns needing strong visual appeal
Website hero sections that demand immediate attention

Suggested color roles

primary

Anchor your design with #D62828 (deep red) or #003049 (dark navy blue) for commanding headlines, key calls to action, or dominant brand elements.

secondary

Utilize #F77F00 (bright orange) or #FCBF49 (golden yellow) to provide vibrant contrast and warmth, ideal for secondary information, interactive states, or decorative patterns.

accent

Employ #D68500 (deep gold-orange) to add a rich, warm accent, perfect for subtle highlights, borders, or text elements that need a touch of vintage sophistication.

background

The deep #003049 (dark navy blue) can serve as a dramatic and sophisticated background, allowing the brighter colors to pop. Alternatively, a clean white or light cream provides a neutral base.

text

For text on lighter backgrounds, #003049 (dark navy blue) provides excellent readability. On dark backgrounds like #003049, crisp white or #FCBF49 offers optimal contrast.

Accessibility notes

Ensure sufficient contrast for text, especially when using #FCBF49 (golden yellow) or #F77F00 (bright orange) as backgrounds; dark text is almost always necessary.
The #003049 (dark navy blue) offers robust contrast with the brighter colors, making it excellent for text on colored backgrounds or vice-versa.
Avoid using #D62828 (deep red) for small text on a dark background without careful contrast checks, as it can sometimes lose legibility.
For interactive elements, clearly differentiate states using a combination of color, size, or iconography, as the palette's intensity can sometimes mask subtle changes.

Recommended combinations

Neon Signage

Creates a high-contrast, energetic look reminiscent of neon signs, perfect for bold headers, hero sections, or impactful branding.

#003049 · #D62828 · #FCBF49

Warm Diner

Offers a rich, inviting, and warm feel, ideal for backgrounds, food photography accents, or sections emphasizing comfort and flavor.

#FCBF49 · #F77F00 · #D68500

Americana Impact

A classic, powerful combination for strong visual statements, branding, and promotional materials that evoke a vintage, energetic Americana aesthetic.

#D62828 · #003049 · #F77F00

CSS variables

:root {
  --retro-diner-glow-4-1: #FCBF49;
  --retro-diner-glow-4-2: #F77F00;
  --retro-diner-glow-4-3: #D62828;
  --retro-diner-glow-4-4: #003049;
  --retro-diner-glow-4-5: #D68500;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-glow-4": {
        1: "#FCBF49",
        2: "#F77F00",
        3: "#D62828",
        4: "#003049",
        5: "#D68500",
      }
    }
  }
}

Hex values

Color 1#FCBF49

Color 2#F77F00

Color 3#D62828

Color 4#003049

Color 5#D68500

Accessibility

Contrast checker

1.6:1Fail

3:1AA18

8.4:1AAA

1.8:1Fail

1.6:1Fail

1.9:1Fail

5.3:1AA

1.1:1Fail

3:1AA18

1.9:1Fail

2.8:1Fail

1.7:1Fail

8.4:1AAA

5.3:1AA

2.8:1Fail

4.7:1AA

1.8:1Fail

1.1:1Fail

1.7:1Fail

4.7:1AA

Similar palettes

More like Retro Diner Glow

View all vibrant

Diner Booth Jive

Midcentury Eatery Glow