Palette

Retro Diner Booth

Bold and cheerful colors reminiscent of a classic 1950s diner's lively and iconic style.

vibrantplayful5 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#FFD700#00BFFF#C0C0C0#2F4F4F

Palette guide

How to use Retro Diner Booth

Overview

The Retro Diner Booth palette delivers bold and cheerful colors reminiscent of a classic 1950s diner's lively and iconic style. Featuring a striking #DC143C (crimson red), bright #FFD700 (gold), vibrant #00BFFF (sky blue), a cool #C0C0C0 (silver gray), and grounding #2F4F4F (dark slate gray), this collection is perfect for creating playful, yet sophisticated retro designs. Designers and developers can use these tones to evoke nostalgia and create engaging, high-contrast visual experiences that stand out with a timeless charm.

Best used for

Vintage-themed cafes and restaurants
Playful branding and logos
Event posters and promotional materials
Children's book illustrations
App user interfaces (UI)
Marketing materials with a retro twist

Suggested color roles

primary

#DC143C is excellent for main branding, attention-grabbing elements, or strong calls-to-action.

secondary

#00BFFF provides a vibrant supporting visual for interactive states, subheadings, or distinct content blocks.

accent

#FFD700 serves as a bright highlight for key information, call-to-action buttons, or energetic design bursts.

background

#C0C0C0 offers a neutral, versatile base, while #2F4F4F creates a dark, sophisticated backdrop.

text

Use #2F4F4F for optimal readability on light backgrounds like #C0C0C0; use #FFD700 or white on dark backgrounds.

Accessibility notes

#DC143C and #00BFFF provide good contrast against #C0C0C0 and #2F4F4F for text readability.
#FFD700 is a bright color and needs dark text (like #2F4F4F) for optimal readability when used as a background.
Ensure #C0C0C0 text on #2F4F4F has sufficient contrast, especially for smaller font sizes, to maintain legibility.
Always test color combinations for WCAG AA compliance to ensure broad usability for all users.

Recommended combinations

Diner Pop

Ideal for menu design, bold signage, or creating a classic, high-energy diner aesthetic.

#DC143C · #FFD700 · #2F4F4F

Cool & Warm

Excellent for playful illustrations, UI accents, or designs requiring a balanced yet vibrant feel.

#00BFFF · #C0C0C0 · #DC143C

Sophisticated Base

Perfect for headers, content sections, or creating a refined backdrop with pops of color.

#2F4F4F · #C0C0C0 · #FFD700

CSS variables

:root {
  --retro-diner-booth-3-1: #DC143C;
  --retro-diner-booth-3-2: #FFD700;
  --retro-diner-booth-3-3: #00BFFF;
  --retro-diner-booth-3-4: #C0C0C0;
  --retro-diner-booth-3-5: #2F4F4F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-booth-3": {
        1: "#DC143C",
        2: "#FFD700",
        3: "#00BFFF",
        4: "#C0C0C0",
        5: "#2F4F4F",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#FFD700

Color 3#00BFFF

Color 4#C0C0C0

Color 5#2F4F4F

Accessibility

Contrast checker

3.6:1AA18

2.4:1Fail

2.7:1Fail

1.8:1Fail

3.6:1AA18

1.5:1Fail

1.3:1Fail

6.4:1AA

2.4:1Fail

1.5:1Fail

1.2:1Fail

4.2:1AA18

2.7:1Fail

1.3:1Fail

1.2:1Fail

4.9:1AA

1.8:1Fail

6.4:1AA

4.2:1AA18

4.9:1AA

Similar palettes

More like Retro Diner Booth