Palette

Retro Diner Booth

Classic reds, from deep burgundy to bright cherry, inspired by vintage diner booths.

retroretro5 colors

More retro 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

#4a1a1a#7b1e1e#a73b3b#d36565#ffe0e0

Palette guide

How to use Retro Diner Booth

Overview

The Retro Diner Booth palette offers a sophisticated take on classic diner aesthetics, focusing on a rich, monochromatic exploration of red. Ranging from a deep, brooding #4a1a1a to a bright, inviting #ffe0e0, this gradient of reds evokes the plush vinyl booths and cherry-red accents of vintage establishments. The intermediate shades like #7b1e1e, #a73b3b, and #d36565 provide depth and versatility, allowing for subtle tonal variations in UI elements or branding. This palette is ideal for creating designs that feel warm, intimate, and nostalgically elegant, moving beyond typical bright diner schemes while retaining unmistakable retro charm.

Best used for

Sophisticated retro branding
Vintage-inspired interior design concepts
Restaurant menu designs
Luxury product packaging
Editorial layouts with a classic feel
Themed event marketing

Suggested color roles

primary

Use #a73b3b (Mid-Red) as the main brand color, offering a balanced warmth that's neither too dark nor too bright, ideal for headers.

secondary

Employ #7b1e1e (Deep Red) for secondary accents, backgrounds for emphasized content, or as a rich base for darker elements.

accent

Apply #d36565 (Light Red) for interactive states, subtle highlights, or delicate graphical elements, providing a soft contrast.

background

Utilize #ffe0e0 (Pale Pink) as a soft, inviting background, perfect for large content areas where legibility is paramount and a gentle warmth is desired.

text

Choose #4a1a1a (Dark Burgundy) for primary body text, ensuring excellent readability against lighter reds and maintaining the palette's rich, cohesive feel.

Accessibility notes

Ensure #4a1a1a text on #ffe0e0 provides strong contrast for readability (WCAG AA compliant).
Be cautious using lighter reds like #d36565 for text on #ffe0e0; contrast might be insufficient.
For interactive elements, ensure sufficient contrast between inactive and active states using different shades within the palette.
Consider using pure white text on the darkest reds (#4a1a1a, #7b1e1e) for maximum legibility and impact.

Recommended combinations

Rich Depth

Elegant typography, deep background sections, and bright, contrasting headlines or calls to action.

#4A1A1A · #7B1E1E · #FFE0E0

Soft Gradient

Subtle visual hierarchies, background elements, or illustrations requiring smooth tonal transitions.

#A73B3B · #D36565 · #FFE0E0

Bold Accent

Highlighting specific content, creating visual interest with layered elements, or strong branding marks.

#7B1E1E · #D36565 · #4A1A1A

CSS variables

:root {
  --retro-diner-booth-6-1: #4a1a1a;
  --retro-diner-booth-6-2: #7b1e1e;
  --retro-diner-booth-6-3: #a73b3b;
  --retro-diner-booth-6-4: #d36565;
  --retro-diner-booth-6-5: #ffe0e0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-booth-6": {
        1: "#4a1a1a",
        2: "#7b1e1e",
        3: "#a73b3b",
        4: "#d36565",
        5: "#ffe0e0",
      }
    }
  }
}

Hex values

Color 1#4a1a1a

Color 2#7b1e1e

Color 3#a73b3b

Color 4#d36565

Color 5#ffe0e0

Accessibility

Contrast checker

1.4:1Fail

2.3:1Fail

4:1AA18

11.7:1AAA

1.4:1Fail

1.6:1Fail

2.8:1Fail

8.3:1AAA

2.3:1Fail

1.6:1Fail

1.7:1Fail

5.1:1AA

4:1AA18

2.8:1Fail

1.7:1Fail

2.9:1Fail

11.7:1AAA

8.3:1AAA

5.1:1AA

2.9:1Fail

Similar palettes

More like Retro Diner Booth