Palette

Retro Diner Booth

Iconic bold reds, yellows, and blues with classic grays, inspired by a lively 1950s diner aesthetic.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#F2B80F#0A2E80#D9D9D9#262626

Palette guide

How to use Retro Diner Booth

Overview

The Retro Diner Booth palette encapsulates the iconic 1950s aesthetic with a bold, primary-driven color scheme. It features a classic, vibrant Red (#FF0000), a cheerful Goldenrod (#F2B80F), and a deep, authoritative Dark Blue (#0A2E80), instantly evoking vintage signage and upholstery. The inclusion of a light Gray (#D9D9D9) provides a clean, neutral background, while a dark Charcoal (#262626) offers strong contrast and grounding, reminiscent of checkered floors and chrome. This palette is perfect for designers aiming to create an energetic, nostalgic, and unmistakably retro feel in branding, web design, or marketing materials, ensuring a lively and memorable visual experience.

Best used for

Classic 1950s diner branding
Retro-themed website interfaces
Vintage poster and flyer design
Children's product packaging
Entertainment industry visuals
Mobile game UI with a nostalgic feel

Suggested color roles

primary

Use #FF0000 (Red) for dominant brand elements, calls to action, or headlines to capture the essence of classic diner energy.

secondary

Apply #F2B80F (Goldenrod) for cheerful highlights, secondary buttons, or playful accents, adding warmth and vibrancy.

accent

Leverage #0A2E80 (Dark Blue) for strategic contrast, important links, or as a strong background to ground the energetic primary colors.

background

Employ #D9D9D9 (Light Gray) as a clean, versatile background, allowing the bold primary colors to stand out while maintaining a bright feel.

text

Utilize #262626 (Charcoal) for all primary body text, ensuring excellent readability and a sophisticated contrast against lighter backgrounds.

Accessibility notes

Ensure #262626 text on #D9D9D9 background provides optimal readability (WCAG AAA compliant).
All primary colors (#FF0000, #F2B80F, #0A2E80) offer strong contrast against #D9D9D9 for headings.
Avoid using #F2B80F for small text on #D9D9D9 due to potential low contrast; it's best for larger elements.
Consider using white text on #FF0000 or #0A2E80 for maximum legibility on darker elements.

Recommended combinations

Primary Impact

Bold headlines, cheerful illustrations, and vibrant calls to action for high visibility.

#FF0000 · #F2B80F · #D9D9D9

Classic Contrast

Clean informational sections, navigation elements, and legible body text for a structured look.

#0A2E80 · #D9D9D9 · #262626

Retro Energy

Striking graphic elements, iconic logos, or powerful branding statements with strong definition.

#FF0000 · #0A2E80 · #262626

CSS variables

:root {
  --retro-diner-booth-1: #FF0000;
  --retro-diner-booth-2: #F2B80F;
  --retro-diner-booth-3: #0A2E80;
  --retro-diner-booth-4: #D9D9D9;
  --retro-diner-booth-5: #262626;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-booth": {
        1: "#FF0000",
        2: "#F2B80F",
        3: "#0A2E80",
        4: "#D9D9D9",
        5: "#262626",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#F2B80F

Color 3#0A2E80

Color 4#D9D9D9

Color 5#262626

Accessibility

Contrast checker

2.2:1Fail

3.1:1AA18

2.8:1Fail

3.8:1AA18

2.2:1Fail

6.8:1AA

1.3:1Fail

8.4:1AAA

3.1:1AA18

6.8:1AA

8.7:1AAA

1.2:1Fail