Palette

Retro Diner Jukebox

Iconic, bold shades inspired by the classic colors and chrome gleam of a 1950s American diner's jukebox.

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

#FF0000#0000CD#FFFF00#C0C0C0#8B4513

Palette guide

How to use Retro Diner Jukebox

Overview

The "Retro Diner Jukebox" palette captures the iconic essence of 1950s American diners, blending bold primaries with metallic and earthy tones. This scheme features a vibrant red (#FF0000), a classic dark blue (#0000CD), a cheerful yellow (#FFFF00), a chrome-like silver (#C0C0C0), and a rich brown (#8B4513). It's perfect for designers and developers aiming for a nostalgic yet striking aesthetic, reminiscent of vintage signage, polished chrome, and classic milkshakes. Utilize these colors to evoke a sense of playful energy and timeless appeal in your projects.

Best used for

Retro brand identity and logos
Vintage-themed event marketing
UI/UX design for nostalgic apps or websites
Packaging for food and beverage products
Themed merchandise and apparel design
Print materials with a 1950s aesthetic

Suggested color roles

primary

Use #FF0000 (Red) for energetic calls-to-action, prominent signage, or key brand elements to capture immediate attention.

secondary

Apply #0000CD (Dark Blue) for stability and depth, ideal for navigation, background sections, or complementary graphics.

accent

Incorporate #FFFF00 (Yellow) for highlights, playful details, or elements needing a cheerful pop, like buttons or icons.

background

Utilize #C0C0C0 (Silver) as a clean, neutral background, mimicking chrome accents and allowing other colors to shine.

text

Employ #8B4513 (Brown) for body text on light backgrounds to provide excellent readability with a warm, vintage feel, or use a crisp white on dark colors.

Accessibility notes

Ensure sufficient contrast when using #FFFF00 (Yellow) as text, especially on #C0C0C0 (Silver) or white backgrounds.
Pair #FF0000 (Red) and #0000CD (Dark Blue) with #C0C0C0 (Silver) for backgrounds to maintain strong readability.
Avoid placing #8B4513 (Brown) text directly on #0000CD (Dark Blue) without careful contrast testing.
For body text, a dark color like #8B4513 or black on a lighter background offers the best legibility.

Recommended combinations

Classic Jukebox

Ideal for prominent headers, hero sections, and branding that demands a timeless, bold statement.

#FF0000 · #0000CD · #C0C0C0

Vintage Glow

Effective for playful accents, glowing elements, or highlighting key information with an inviting warmth.

#FFFF00 · #FF0000 · #8B4513

Diner Comfort

Perfect for backgrounds, secondary text, and UI elements where a grounded, sophisticated retro feel is desired.

#C0C0C0 · #8B4513 · #0000CD

CSS variables

:root {
  --retro-diner-jukebox-6-1: #FF0000;
  --retro-diner-jukebox-6-2: #0000CD;
  --retro-diner-jukebox-6-3: #FFFF00;
  --retro-diner-jukebox-6-4: #C0C0C0;
  --retro-diner-jukebox-6-5: #8B4513;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox-6": {
        1: "#FF0000",
        2: "#0000CD",
        3: "#FFFF00",
        4: "#C0C0C0",
        5: "#8B4513",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#0000CD

Color 3#FFFF00

Color 4#C0C0C0

Color 5#8B4513

Accessibility

Contrast checker

2.8:1Fail

3.7:1AA18

2.2:1Fail

1.8:1Fail

2.8:1Fail

10.4:1AAA

6.1:1AA

1.6:1Fail

3.7:1AA18

10.4:1AAA

1.7:1Fail

6.6:1AA

2.2:1Fail

6.1:1AA

1.7:1Fail

3.9:1AA18

1.8:1Fail

1.6:1Fail

6.6:1AA

3.9:1AA18

Similar palettes

More like Retro Diner Jukebox