Palette

Retro Diner Jukebox

A cheerful collection of classic diner reds, blues, and oranges with a creamy white for a nostalgic feel.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DC143C#4682B4#FFA500#F0E68C#FFFFFF

Palette guide

How to use Retro Diner Jukebox

Overview

The Retro Diner Jukebox palette offers a cheerful collection of classic diner reds, blues, and oranges, combined with a creamy white for a truly nostalgic feel. It features a bold crimson (#DC143C), a steady steel blue (#4682B4), a bright orange (#FFA500), a warm khaki (#F0E68C), and a crisp pure white (#FFFFFF). This palette is perfect for designers and developers aiming to evoke a sense of vintage charm, warmth, and accessibility in their projects. Utilize #DC143C for high-impact calls to action and #FFFFFF as a clean, inviting background, while #F0E68C can add subtle texture or secondary accents.

Best used for

Retro food and beverage branding
Vintage-inspired web design
Diner-themed restaurant interiors
Packaging for classic products
Event invitations with a nostalgic touch
Comfort food marketing materials

Suggested color roles

primary

The bold crimson (#DC143C) is excellent for primary calls to action, main headlines, and key branding elements.

secondary

The steady steel blue (#4682B4) provides a reliable secondary color, great for navigation, informational sections, or background accents.

accent

The bright orange (#FFA500) serves as a cheerful accent, perfect for highlights, interactive states, or playful decorative elements.

background

Pure white (#FFFFFF) offers a clean, bright, and versatile background that ensures excellent readability and allows other colors to shine.

text

For optimal readability, use a dark neutral like black or dark charcoal for body text. The khaki (#F0E68C) can be used for very subtle, decorative, large text or as an accent.

Accessibility notes

Black or dark charcoal text on #FFFFFF background provides excellent readability.
Avoid using #F0E68C as text on #FFFFFF due to insufficient contrast; it's best for large decorative elements or as a background.
Ensure sufficient contrast when pairing #DC143C, #4682B4, and #FFA500 with adjacent colors for UI elements.
The steel blue (#4682B4) can be used for text on #FFFFFF, offering good readability, but black is preferred for body copy.

Recommended combinations

Diner Classic

Ideal for hero sections, key promotions, or branding elements that require a warm and inviting retro feel.

#DC143C · #FFA500 · #FFFFFF

Comforting Contrast

Excellent for main content areas, providing clear readability with a stable blue and a punch of red for emphasis.

#FFFFFF · #4682B4 · #DC143C

Warm Accents

Great for subtle background patterns, secondary information, or decorative elements that add warmth and depth.

#F0E68C · #FFA500 · #4682B4

CSS variables

:root {
  --retro-diner-jukebox-5-1: #DC143C;
  --retro-diner-jukebox-5-2: #4682B4;
  --retro-diner-jukebox-5-3: #FFA500;
  --retro-diner-jukebox-5-4: #F0E68C;
  --retro-diner-jukebox-5-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox-5": {
        1: "#DC143C",
        2: "#4682B4",
        3: "#FFA500",
        4: "#F0E68C",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#4682B4

Color 3#FFA500

Color 4#F0E68C

Color 5#FFFFFF

Accessibility

Contrast checker

1.2:1Fail

2.5:1Fail

3.9:1AA18

5:1AA

1.2:1Fail

2.1:1Fail

3.2:1AA18

4.1:1AA18

2.5:1Fail

2.1:1Fail

1.5:1Fail

2:1Fail

3.9:1AA18

3.2:1AA18

1.5:1Fail

1.3:1Fail

5:1AA

4.1:1AA18

2:1Fail

1.3:1Fail

Similar palettes

More like Retro Diner Jukebox

Nostalgic Soda Fountain