Palette

Diner Booth Classic

Captures the nostalgic charm of a classic 1950s diner with its iconic pastel booths and bold accents.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ffc0cb#f08080#b0e0e6#800000#00008b

Palette guide

How to use Diner Booth Classic

Overview

The Diner Booth Classic palette captures the nostalgic charm of a classic 1950s diner with its iconic pastel booths and bold accents. Featuring soft pink (#ffc0cb), muted red (#f08080), light blue (#b0e0e6), deep maroon (#800000), and dark blue (#00008b), this palette is perfect for designers and developers creating projects with a retro, vintage, or whimsical aesthetic. Its blend of gentle pastels and strong, traditional accents makes it ideal for inviting user interfaces, nostalgic branding, or engaging storytelling. The palette evokes a sense of comfort and timeless Americana, offering versatility for both cheerful and sophisticated retro designs.

Best used for

Retro restaurant branding
Vintage fashion websites
Nostalgic game interfaces
50s themed event promotions
Children's book illustrations
Cafe and bakery interior design

Suggested color roles

primary

Use #ffc0cb or #b0e0e6 as soft, inviting background colors, reminiscent of classic diner booths.

secondary

Employ #f08080 for secondary accents, buttons, or to add a touch of playful energy.

accent

Apply #800000 or #00008b for strong contrasts, headlines, or important calls-to-action, providing depth.

background

A light #ffc0cb or #b0e0e6 provides a cheerful and inviting base, while darker accents offer grounding.

text

For general text, a deep charcoal or black offers readability. For headlines, #800000 or #00008b provide a bold, classic look.

Accessibility notes

Ensure sufficient contrast for text, especially when using #f08080 on #ffc0cb or #b0e0e6 backgrounds.
The dark accents (#800000, #00008b) will provide excellent contrast for text on the lighter pastel backgrounds.
Avoid using #ffc0cb or #b0e0e6 for small text on similar light backgrounds to prevent readability issues.
Maintain clear visual hierarchy using the varying color values to guide users through the interface effectively.

Recommended combinations

Classic Booth

Ideal for main UI components, backgrounds, and strong accents, creating a quintessential diner feel.

#FFC0CB · #B0E0E6 · #800000

Retro Pop

Excellent for highlights, interactive elements, or to add a vibrant yet nostalgic pop to designs.

#F08080 · #00008B · #FFC0CB

Vintage Charm

Suitable for headers, decorative elements, or informational panels where a balanced retro look is desired.

#B0E0E6 · #800000 · #F08080

CSS variables

:root {
  --diner-booth-classic-1: #ffc0cb;
  --diner-booth-classic-2: #f08080;
  --diner-booth-classic-3: #b0e0e6;
  --diner-booth-classic-4: #800000;
  --diner-booth-classic-5: #00008b;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-booth-classic": {
        1: "#ffc0cb",
        2: "#f08080",
        3: "#b0e0e6",
        4: "#800000",
        5: "#00008b",
      }
    }
  }
}

Hex values

Color 1#ffc0cb

Color 2#f08080

Color 3#b0e0e6

Color 4#800000

Color 5#00008b

Accessibility

Contrast checker

1.7:1Fail

1.1:1Fail

7.1:1AAA

9.9:1AAA

1.7:1Fail

1.8:1Fail

4.2:1AA18

5.9:1AA

1.1:1Fail

1.8:1Fail

7.6:1AAA

10.7:1AAA

7.1:1AAA

4.2:1AA18

7.6:1AAA

1.4:1Fail

9.9:1AAA

5.9:1AA

10.7:1AAA

1.4:1Fail

Similar palettes

More like Diner Booth Classic