Palette

Retro Diner Jive

Bright reds, golds, and teals capturing the iconic, energetic aesthetic of 1950s American diners.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#CC0000#FFD700#008080#F8F8F8#333333

Palette guide

How to use Retro Diner Jive

Overview

The Retro Diner Jive palette authentically captures the iconic, energetic aesthetic of 1950s American diners. It features a bold, classic red (#CC0000) and a bright, inviting gold (#FFD700), perfectly complemented by a distinctive teal (#008080). For foundational elements, a clean, near-white (#F8F8F8) and a grounding dark charcoal (#333333) complete the set. This palette is invaluable for designers aiming to evoke a sense of nostalgia, vibrancy, and timeless charm. Utilize #CC0000 for impactful calls to action and #FFD700 for highlighting key information, while #008080 adds a unique, sophisticated retro touch.

Best used for

Classic 1950s diner branding
Retro-themed website designs
Food and beverage packaging
Vintage event promotions
App interfaces with a nostalgic feel
Merchandise and apparel design

Suggested color roles

primary

The bold classic red (#CC0000) is perfect for primary branding, headlines, and calls to action, ensuring high visibility.

secondary

Use the bright gold (#FFD700) for secondary buttons, important highlights, or decorative elements that need to stand out.

accent

The distinctive teal (#008080) provides a sophisticated accent, ideal for navigation elements, icons, or subtle background patterns.

background

The clean near-white (#F8F8F8) serves as an excellent primary background, offering a fresh, crisp canvas for all other colors.

text

The dark charcoal (#333333) ensures optimal readability for body text, headings, and labels, providing strong contrast against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast for text when pairing #FFD700 with #F8F8F8; it's best reserved for large display text or accents.
The #333333 text on #F8F8F8 background offers excellent readability for all content.
Use #CC0000 and #008080 judiciously for UI elements, ensuring they pass contrast checks with surrounding colors.
Consider using a slightly darker shade for #008080 if used as text on #F8F8F8 to meet WCAG AA standards.

Recommended combinations

Iconic Contrast

Ideal for hero sections, main banners, or striking advertisements that demand immediate attention.

#CC0000 · #FFD700 · #F8F8F8

Retro Balance

Excellent for body content, navigation menus, or informational panels, providing clarity and a touch of vintage flair.

#F8F8F8 · #333333 · #008080

Vibrant Accent

Great for highlighting key features, callouts, or decorative patterns that require a bold and unique look.

#CC0000 · #008080 · #333333

CSS variables

:root {
  --retro-diner-jive-1: #CC0000;
  --retro-diner-jive-2: #FFD700;
  --retro-diner-jive-3: #008080;
  --retro-diner-jive-4: #F8F8F8;
  --retro-diner-jive-5: #333333;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jive": {
        1: "#CC0000",
        2: "#FFD700",
        3: "#008080",
        4: "#F8F8F8",
        5: "#333333",
      }
    }
  }
}

Hex values

Color 1#CC0000

Color 2#FFD700

Color 3#008080

Color 4#F8F8F8

Color 5#333333

Accessibility

Contrast checker

4.2:1AA18

1.2:1Fail

5.5:1AA

2.1:1Fail

4.2:1AA18

3.4:1AA18

1.3:1Fail

9:1AAA

1.2:1Fail

3.4:1AA18

4.5:1AA18

2.6:1Fail

5.5:1AA

1.3:1Fail

4.5:1AA18

11.9:1AAA

2.1:1Fail

9:1AAA

2.6:1Fail

11.9:1AAA

Similar palettes

More like Retro Diner Jive