Palette

Retro Diner Booth

Bold, playful colors reminiscent of a classic 1950s diner booth and checkered floors.

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

#DC143C#4169E1#FFD700#F0F8FF#808080

Palette guide

How to use Retro Diner Booth

Overview

The Retro Diner Booth palette captures the quintessential vibrancy of a 1950s diner with its bold, playful color choices. Featuring a striking Crimson (#DC143C) and a classic RoyalBlue (#4169E1), these colors immediately evoke iconic Americana. A radiant Gold (#FFD700) adds a touch of cheerful opulence, perfect for chrome accents or bright signage. The soft AliceBlue (#F0F8FF) provides a clean, airy background, while a neutral Gray (#808080) grounds the palette, ideal for subtle details or chrome finishes. This combination is excellent for creating designs that are energetic, nostalgic, and visually impactful, suitable for entertainment, food, or vintage-themed projects.

Best used for

Classic diner branding
Retro gaming interfaces
Vintage toy packaging
Event invitations for themed parties
Digital illustrations with a pop-art feel
Websites targeting nostalgia marketing

Suggested color roles

primary

Use #DC143C (Crimson) for dominant brand elements, calls to action, or headlines to command attention with a classic diner feel.

secondary

Apply #4169E1 (RoyalBlue) for complementary sections, interactive elements, or a strong background to create a balanced, patriotic contrast.

accent

Leverage #FFD700 (Gold) for key highlights, premium details, or decorative elements that need to pop and add a touch of cheer.

background

Employ #F0F8FF (AliceBlue) as a light, airy background, providing a clean canvas that makes the vibrant colors stand out.

text

Utilize #808080 (Gray) for body text on lighter backgrounds, offering a softer alternative to black while maintaining a clean, legible appearance.

Accessibility notes

Ensure #808080 text on #F0F8FF background has sufficient contrast; a darker charcoal or black might be preferred for body text.
#DC143C and #4169E1 offer strong contrast against #F0F8FF, suitable for headings and calls to action.
Avoid using #FFD700 for small text on #F0F8FF due to potential poor contrast; it's best for accents.
Consider using white text on #DC143C or #4169E1 for maximum readability on darker elements.

Recommended combinations

Vibrant Main

Bold headings, primary calls to action, and clean, high-contrast content areas.

#DC143C · #4169E1 · #F0F8FF

Golden Accents

Highlighting special offers, premium features, and decorative chrome-like elements.

#DC143C · #FFD700 · #808080

Cool & Clear

Informational sections, background layers, and subtle UI elements for a clean, approachable look.

#4169E1 · #F0F8FF · #808080

CSS variables

:root {
  --retro-diner-booth-8-1: #DC143C;
  --retro-diner-booth-8-2: #4169E1;
  --retro-diner-booth-8-3: #FFD700;
  --retro-diner-booth-8-4: #F0F8FF;
  --retro-diner-booth-8-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-booth-8": {
        1: "#DC143C",
        2: "#4169E1",
        3: "#FFD700",
        4: "#F0F8FF",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#4169E1

Color 3#FFD700

Color 4#F0F8FF

Color 5#808080

Accessibility

Contrast checker

1:1Fail

3.6:1AA18

4.7:1AA

1.3:1Fail

1:1Fail

3.5:1AA18

4.5:1AA

1.2:1Fail

3.6:1AA18

3.5:1AA18

1.3:1Fail

2.8:1Fail

4.7:1AA

4.5:1AA

1.3:1Fail

3.7:1AA18

1.3:1Fail

1.2:1Fail

2.8:1Fail

3.7:1AA18

Similar palettes

More like Retro Diner Booth

Retro Diner Booth

See it in context.

Ready when you are.

Built with Retro Diner Booth.

How to use Retro Diner Booth

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Main

Golden Accents

Cool & Clear

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Diner Booth