Back to palettes

Palette

Jukebox Diner Hues

A cheerful throwback to 1950s diners, featuring the bold colors of classic jukeboxes and checkered floors.

retroretro5 colors
More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#BF0A0A#0D4D92#F2E2CD#A6A6A6#1D1D1D

Palette guide

How to use Jukebox Diner Hues

Overview

The Jukebox Diner Hues palette is a cheerful throwback to the 1950s, capturing the iconic vibrancy of classic diners and jukeboxes. Featuring a bold red (#BF0A0A), a deep navy blue (#0D4D92), a creamy off-white (#F2E2CD), a cool gray (#A6A6A6), and a near-black (#1D1D1D), this collection is perfect for designers and developers aiming for a classic American vintage aesthetic. These colors work together to create a nostalgic yet fresh feel, ideal for projects that require a sense of history, playfulness, and robust visual impact, reminiscent of mid-century Americana.

Best used for

  • Retro restaurant or café branding
  • Vintage apparel and merchandise
  • Themed event and party invitations
  • Nostalgic website and app design
  • Film or theater set design
  • Classic Americana marketing campaigns

Suggested color roles

primary

Utilize #BF0A0A (bold red) as a strong, iconic primary color for brand identity or crucial calls-to-action.

secondary

Employ #0D4D92 (deep navy blue) for robust secondary elements, navigation, or contrasting backgrounds.

accent

Apply #A6A6A6 (cool gray) for metallic accents, subtle details, or chrome-like finishes.

background

Use #F2E2CD (creamy off-white) as a warm, inviting background that enhances the retro feel and ensures readability.

text

For optimal readability and a classic look, use #1D1D1D (near-black) for all primary body text and headlines.

Accessibility notes

  • The dark colors (#BF0A0A, #0D4D92, #1D1D1D) provide excellent contrast against the creamy #F2E2CD background.
  • Ensure #A6A6A6 is used with sufficient contrast, especially for smaller text or icons, against lighter backgrounds.
  • Always use #1D1D1D for body text on #F2E2CD to guarantee high readability.
  • Verify contrast ratios for all interactive elements to ensure accessibility compliance.

Recommended combinations

Classic Diner

Ideal for main branding, signage, and core UI elements, capturing the 50s vibe.

#BF0A0A · #0D4D92 · #F2E2CD

Chrome Accents

Excellent for buttons, iconography, or metallic details to simulate a jukebox look.

#A6A6A6 · #1D1D1D · #BF0A0A

Vintage Base

Creates warm backgrounds, body text areas, and subtle patterns for a nostalgic feel.

#F2E2CD · #0D4D92 · #1D1D1D

CSS variables

:root {
  --jukebox-diner-hues-1: #BF0A0A;
  --jukebox-diner-hues-2: #0D4D92;
  --jukebox-diner-hues-3: #F2E2CD;
  --jukebox-diner-hues-4: #A6A6A6;
  --jukebox-diner-hues-5: #1D1D1D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jukebox-diner-hues": {
        1: "#BF0A0A",
        2: "#0D4D92",
        3: "#F2E2CD",
        4: "#A6A6A6",
        5: "#1D1D1D",
      }
    }
  }
}

Related searches

1950s diner colorsretro red blue palettevintage Americana designclassic jukebox thememid-century modern colors

Palette colors

Hex values

Color 1#BF0A0A
·
Color 2#0D4D92
·
Color 3#F2E2CD
·
Color 4#A6A6A6
·
Color 5#1D1D1D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
5.1:1AA
2.6:1Fail
2.6:1Fail
2
1.3:1Fail
6.6:1AA
3.5:1AA18
2:1Fail
3
5.1:1AA
6.6:1AA
1.9:1Fail
13.3:1AAA
4
2.6:1Fail
3.5:1AA18
1.9:1Fail
6.9:1AA
5
2.6:1Fail
2:1Fail
13.3:1AAA
6.9:1AA

Similar palettes

More like Jukebox Diner Hues

View all retro
Retro Diner Shake
Chrome Soda Fountain
Juke Joint Jive
Malt Shop Nostalgia
Retro Diner Jukebox
Retro Jukebox Glow