Palette

Diner Booth Jive

Evoking the classic charm of a 1950s diner, with cool teal, vibrant red, and clean cream tones.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B2D42#8D99AE#EF233C#EDF2F4#5C7C8A

Palette guide

How to use Diner Booth Jive

Overview

The Diner Booth Jive palette evokes the classic charm of a 1950s diner, with cool teal, vibrant red, and clean cream tones. Featuring a deep charcoal (#2B2D42), muted grey (#8D99AE), energetic red (#EF233C), crisp off-white (#EDF2F4), and sophisticated grey-teal (#5C7C8A), this palette is perfect for designers and developers creating projects with a retro, vintage, or vibrant aesthetic. Its blend of inviting neutrals and a bold accent color makes it ideal for engaging user interfaces, nostalgic branding, or dynamic storytelling. This palette offers a fresh take on Americana, balancing classic comfort with a touch of modern vibrancy.

Best used for

Retro restaurant branding
Vintage-inspired app interfaces
50s themed event promotions
Cafe and bakery websites
Modern vintage product packaging
Editorial design with a classic feel

Suggested color roles

primary

Use #EDF2F4 as a clean, expansive background, reminiscent of classic diner tabletops and walls.

secondary

Employ #2B2D42 for strong contrasts, headlines, or primary navigation elements, providing depth.

accent

Apply #EF233C for energetic calls-to-action, highlights, or to introduce a vibrant focal point.

background

A crisp #EDF2F4 provides a clean and inviting base. #2B2D42 can be used for dark mode or contrasting sections.

text

For general text, #2B2D42 offers excellent readability on light backgrounds. For headlines, #EF233C provides a bold, classic look.

Accessibility notes

Ensure #2B2D42 text on #EDF2F4 background meets WCAG AAA contrast ratios for superior readability.
The vibrant #EF233C provides excellent contrast against #EDF2F4 for alerts or calls-to-action.
Avoid using #8D99AE or #5C7C8A for small text on #EDF2F4 if contrast is insufficient; test carefully.
Maintain clear visual hierarchy using the varying color values to guide users through the interface effectively.

Recommended combinations

Diner Classic

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

#EDF2F4 · #2B2D42 · #EF233C

Jive Pop

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

#EDF2F4 · #EF233C · #5C7C8A

Booth Comfort

Suitable for backgrounds, subtle gradients, or informational panels, offering a balanced and comfortable aesthetic.

#2B2D42 · #8D99AE · #EDF2F4

CSS variables

:root {
  --diner-booth-jive-1: #2B2D42;
  --diner-booth-jive-2: #8D99AE;
  --diner-booth-jive-3: #EF233C;
  --diner-booth-jive-4: #EDF2F4;
  --diner-booth-jive-5: #5C7C8A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-booth-jive": {
        1: "#2B2D42",
        2: "#8D99AE",
        3: "#EF233C",
        4: "#EDF2F4",
        5: "#5C7C8A",
      }
    }
  }
}

Hex values

Color 1#2B2D42

Color 2#8D99AE

Color 3#EF233C

Color 4#EDF2F4

Color 5#5C7C8A

Accessibility

Contrast checker

4.7:1AA

3.2:1AA18

12:1AAA

3:1AA18

4.7:1AA

1.5:1Fail

2.5:1Fail

1.6:1Fail