Palette

Diner Booth Nostalgia

Bright and cheerful, evoking the nostalgic charm of classic 1950s diners and their iconic decor.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#F0E68C#00BFFF#2E8B57#DDA0DD

Palette guide

How to use Diner Booth Nostalgia

Overview

The "Diner Booth Nostalgia" palette captures the vibrant, cheerful essence of classic 1950s diners. This playful mix features a bold red like #FF0000, a sunny yellow #F0E68C, and a striking blue #00BFFF. Designers can leverage this collection to infuse projects with a retro, yet fresh, appeal, perfect for branding, digital interfaces, or print materials that aim to evoke a sense of joyous past. The inclusion of a deep green #2E8B57 and a soft lavender #DDA0DD adds depth and versatility, allowing for both energetic primary schemes and more nuanced secondary applications. It’s ideal for creating designs that feel both familiar and exciting, bringing a touch of vintage charm to modern contexts.

Best used for

Retro branding and packaging for food/beverage
Themed event invitations and decor
UI/UX for nostalgic mobile games or apps
Vintage-inspired website designs
Apparel and merchandise with a 50s aesthetic
Children's book illustrations

Suggested color roles

primary

Use this bold red #FF0000 for prominent calls-to-action, important headlines, or key brand elements to capture immediate attention and convey retro energy.

secondary

This bright blue #00BFFF provides a cool, energetic contrast. Ideal for secondary navigation, interactive elements, or backgrounds that need to stand out without overpowering the primary red.

accent

A sunny, warm yellow #F0E68C perfect for highlighting subtle details, small icons, or decorative flourishes to add a cheerful pop.

background

This soft lavender #DDA0DD offers a whimsical, understated backdrop. Use it for less prominent areas or as a gentle canvas to let the brighter colors truly shine.

text

A deep, earthy green #2E8B57 that offers good readability against lighter backgrounds like #F0E68C or #DDA0DD, providing a unique alternative to standard black or charcoal.

Accessibility notes

Ensure sufficient contrast when using #F0E68C (yellow) for text against light backgrounds; pair it with darker colors like #FF0000 or #2E8B57.
#FF0000 for text against #DDA0DD might pass, but verify contrast ratios for body text, especially.
Avoid using #F0E68C text on #DDA0DD background, as contrast will be very low.
For interactive elements, ensure hover/focus states maintain high contrast against their background.

Recommended combinations

Classic Diner

For bold, eye-catching marketing materials or a primary brand identity that screams 50s.

#FF0000 · #F0E68C · #00BFFF

Whimsical Retro

Softer, playful designs like children's products or quirky illustrations.

#DDA0DD · #2E8B57 · #F0E68C

Energetic Pop

Dynamic web banners, app highlights, or event promotions needing immediate visual impact.

#00BFFF · #FF0000 · #F0E68C

CSS variables

:root {
  --diner-booth-nostalgia-1: #FF0000;
  --diner-booth-nostalgia-2: #F0E68C;
  --diner-booth-nostalgia-3: #00BFFF;
  --diner-booth-nostalgia-4: #2E8B57;
  --diner-booth-nostalgia-5: #DDA0DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-booth-nostalgia": {
        1: "#FF0000",
        2: "#F0E68C",
        3: "#00BFFF",
        4: "#2E8B57",
        5: "#DDA0DD",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#F0E68C

Color 3#00BFFF

Color 4#2E8B57

Color 5#DDA0DD

Accessibility

Contrast checker

3.1:1AA18

1.9:1Fail

1.1:1Fail

1.9:1Fail

3.1:1AA18

1.7:1Fail

3.3:1AA18

1.6:1Fail

1.9:1Fail

1.7:1Fail

2:1Fail

1:1Fail

1.1:1Fail

3.3:1AA18

2:1Fail

2.1:1Fail

1.9:1Fail

1.6:1Fail

1:1Fail

2.1:1Fail

Similar palettes

More like Diner Booth Nostalgia

Diner Booth Nostalgia

See it in context.

Ready when you are.

Built with Diner Booth Nostalgia.

How to use Diner Booth Nostalgia

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Classic Diner

Whimsical Retro

Energetic Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Diner Booth Nostalgia