Palette

Diner Booth Vinyl

Bright and cheerful, this palette captures the iconic colors of a 1950s diner booth, full of nostalgic charm.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#FFD700#008080#C0C0C0#800080

Palette guide

How to use Diner Booth Vinyl

Overview

The "Diner Booth Vinyl" palette is a bold and cheerful tribute to the iconic 1950s diner aesthetic, capturing the vibrant spirit of its classic decor. This collection features a striking primary red #FF0000, a brilliant gold #FFD700, and a deep teal #008080. Anchored by a cool silver-grey #C0C0C0 and accented with a rich purple #800080, it offers a distinct retro yet contemporary feel. Designers can use this palette to create energetic and memorable experiences, from branding and advertising to digital interfaces that demand attention. It’s perfect for projects aiming to evoke a nostalgic charm with a punchy, vivid character.

Best used for

Retro-themed restaurant or bar branding
Vintage arcade game interfaces
Pop art-inspired graphic design
Event promotions for retro parties
Product packaging with a bold, classic look
Website design for entertainment venues

Suggested color roles

primary

A powerful, attention-grabbing red #FF0000, ideal for calls-to-action, main headings, or brand logos to convey energy and excitement.

secondary

This bright gold #FFD700 provides a luminous, cheerful contrast. Use it for secondary highlights, decorative elements, or interactive states to add sparkle.

accent

A deep, rich teal #008080 that offers a sophisticated counterpoint to the warmer tones. Excellent for subheadings, navigation, or visual breaks.

background

A neutral, metallic silver-grey #C0C0C0 that provides a clean, retro-inspired backdrop, allowing the vibrant colors to pop effectively.

text

A deep, regal purple #800080 that offers strong contrast against #C0C0C0 or #FFD700, providing a unique and legible text color for headings or important notes.

Accessibility notes

#FFD700 (gold) text on #C0C0C0 (silver) will likely have insufficient contrast; reserve gold for larger display text or accents.
#FF0000 (red) on #C0C0C0 (silver) should provide good contrast for text.
Ensure #800080 (purple) text is used on sufficiently light backgrounds like #C0C0C0 for readability.
Avoid placing #008080 (teal) text on #800080 (purple) or #FF0000 (red) backgrounds due to potential low contrast.

Recommended combinations

Bold Retro Pop

Primary branding for a dynamic, fun-loving brand with a classic feel.

#FF0000 · #FFD700 · #C0C0C0

Sophisticated Vintage

More subdued, elegant designs, perhaps for a retro lounge or evening event.

#008080 · #C0C0C0 · #800080

Vibrant Accents

Highlight elements in UI, banners, or illustrations where maximum visual impact is desired.

#FFD700 · #FF0000 · #008080

CSS variables

:root {
  --diner-booth-vinyl-1: #FF0000;
  --diner-booth-vinyl-2: #FFD700;
  --diner-booth-vinyl-3: #008080;
  --diner-booth-vinyl-4: #C0C0C0;
  --diner-booth-vinyl-5: #800080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-booth-vinyl": {
        1: "#FF0000",
        2: "#FFD700",
        3: "#008080",
        4: "#C0C0C0",
        5: "#800080",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#FFD700

Color 3#008080

Color 4#C0C0C0

Color 5#800080

Accessibility

Contrast checker

2.9:1Fail

1.2:1Fail

2.2:1Fail

2.4:1Fail

2.9:1Fail

3.4:1AA18

1.3:1Fail

6.7:1AA