Palette

Retro Diner Glow

Bold reds, sunny yellows, and cool blues ignite a vibrant, nostalgic feel, reminiscent of classic 50s diners.

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

#DC143C#FFD700#4682B4#D3D3D3#1C1C1C

Palette guide

How to use Retro Diner Glow

Overview

The Retro Diner Glow palette ignites a vibrant, nostalgic feel, reminiscent of classic 1950s diners with its bold and balanced color selection. This palette features a striking #DC143C (crimson red) and a sunny #FFD700 (gold yellow), which immediately evoke the classic diner aesthetic. A calming #4682B4 (steel blue) introduces a cool counterpoint, while the inclusion of a versatile #D3D3D3 (light grey) and a grounding #1C1C1C (very dark grey) provides essential neutrals. Designers and developers will find this palette excellent for creating projects that require a strong, authentic retro vibe with practical options for readability and structure.

Best used for

Classic automotive or motorcycle branding
Vintage movie poster and advertising design
Retro-themed web and mobile application UIs
Packaging for traditional food products or beverages
Industrial design with a nostalgic touch
Interactive experiences that require clear visual hierarchy

Suggested color roles

primary

Utilize #DC143C (crimson red) for high-impact elements like headlines, critical alerts, or primary calls to action, ensuring immediate visibility and a strong retro feel.

secondary

Employ #FFD700 (gold yellow) to add warmth and cheer, perfect for secondary buttons, highlights, or graphical accents that need to pop against darker backgrounds.

accent

Introduce #4682B4 (steel blue) for a cool, stable accent, ideal for subheadings, navigation elements, or to provide visual balance to the warm primary colors.

background

The light #D3D3D3 (light grey) serves as an excellent neutral background, allowing the vibrant colors to stand out. For a darker, sophisticated base, consider #1C1C1C for specific sections.

text

For optimal readability on light backgrounds, use #1C1C1C (very dark grey). On darker backgrounds like #1C1C1C or #4682B4, crisp white text provides excellent contrast.

Accessibility notes

Always ensure sufficient contrast for text, especially when pairing #FFD700 (yellow) with any light background; dark text is essential.
The #D3D3D3 (light grey) and #1C1C1C (dark grey) provide excellent contrast options for text and UI elements.
Avoid placing #DC143C (red) text directly on #FFD700 (yellow) backgrounds without careful contrast checks due to potential legibility issues for some users.
Use #1C1C1C for body text on #D3D3D3 for superior readability, meeting WCAG AA standards easily.

Recommended combinations

Diner Classic

The iconic red and yellow against a neutral grey, perfect for main branding, headers, and UI elements that need to evoke a strong retro diner feel.

#DC143C · #FFD700 · #D3D3D3

Cool Contrast

Creates a balanced and professional look, ideal for secondary information, navigation, or applications that require a more subdued yet classic aesthetic.

#4682B4 · #D3D3D3 · #1C1C1C

Bold Statement

Offers a high-impact, readable combination, excellent for hero sections, call-to-action buttons, or striking visual displays with a vintage edge.

#1C1C1C · #DC143C · #FFD700

CSS variables

:root {
  --retro-diner-glow-2-1: #DC143C;
  --retro-diner-glow-2-2: #FFD700;
  --retro-diner-glow-2-3: #4682B4;
  --retro-diner-glow-2-4: #D3D3D3;
  --retro-diner-glow-2-5: #1C1C1C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-glow-2": {
        1: "#DC143C",
        2: "#FFD700",
        3: "#4682B4",
        4: "#D3D3D3",
        5: "#1C1C1C",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#FFD700

Color 3#4682B4

Color 4#D3D3D3

Color 5#1C1C1C

Accessibility

Contrast checker

3.6:1AA18

1.2:1Fail

3.3:1AA18

3.4:1AA18

3.6:1AA18

2.9:1Fail

1.1:1Fail

12.2:1AAA

1.2:1Fail

2.9:1Fail

2.7:1Fail

4.1:1AA18

3.3:1AA18

1.1:1Fail

2.7:1Fail

11.4:1AAA

3.4:1AA18

12.2:1AAA

4.1:1AA18

11.4:1AAA

Similar palettes

More like Retro Diner Glow