Palette

Diner Jukebox Pop

Bold and bright, this palette captures the iconic colors and cheerful vibe of a classic 1950s diner.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#DC143C#FFD700#4169E1#FFFFFF#808080

Palette guide

How to use Diner Jukebox Pop

Overview

The "Diner Jukebox Pop" palette is a bold and cheerful celebration of the classic 1950s diner aesthetic, bursting with the iconic colors of a vintage jukebox. This collection features a strong crimson #DC143C, a radiant gold #FFD700, and a vibrant royal blue #4169E1. Anchored by a clean white #FFFFFF and a versatile medium grey #808080, it offers a dynamic interplay of primary colors with metallic undertones. Designers can leverage these hues to create energetic and memorable experiences, perfect for branding, digital interfaces, or print materials that evoke a sense of nostalgic fun and lively character.

Best used for

Retro-themed branding for cafes or entertainment
UI/UX design for vintage-style apps or games
Event promotions for classic car shows or dances
Packaging for nostalgic food products
Pop art-inspired illustrations and posters
Website design for a vibrant online store

Suggested color roles

primary

A powerful, attention-grabbing crimson #DC143C, ideal for calls-to-action, main headings, or key brand elements to convey energy and retro excitement.

secondary

This vibrant royal blue #4169E1 provides a clear, energetic contrast. Excellent for secondary navigation, interactive elements, or graphic details that stand out.

accent

A brilliant gold #FFD700 that adds a luminous, cheerful touch. Perfect for highlights, small icons, or decorative flourishes reminiscent of chrome accents.

background

A crisp, clean white #FFFFFF that serves as an optimal backdrop, allowing the bold primary and accent colors to truly pop and ensuring high readability.

text

A versatile medium grey #808080 that offers good readability against white or lighter backgrounds, providing a softer alternative to pure black for body text and subheadings.

Accessibility notes

#808080 (grey) on #FFFFFF (white) offers good contrast for body text.
#DC143C (crimson) text on #FFFFFF (white) provides strong contrast.
Ensure #FFD700 (gold) is used for larger text or accents, as its contrast might be low on #FFFFFF for small body text.
Avoid placing #4169E1 (blue) text on #DC143C (crimson) backgrounds due to potential readability issues and color vibration.

Recommended combinations

Classic Jukebox

Core branding for a retro-themed business, evoking immediate recognition and energy.

#DC143C · #4169E1 · #FFFFFF

Gleaming Details

Accents, metallic effects, or subtle background patterns to add a touch of vintage elegance.

#FFD700 · #808080 · #FFFFFF

Bold UI Elements

Interactive buttons, notifications, or key highlights in a user interface for maximum impact.

#DC143C · #FFD700 · #4169E1

CSS variables

:root {
  --diner-jukebox-pop-1: #DC143C;
  --diner-jukebox-pop-2: #FFD700;
  --diner-jukebox-pop-3: #4169E1;
  --diner-jukebox-pop-4: #FFFFFF;
  --diner-jukebox-pop-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "diner-jukebox-pop": {
        1: "#DC143C",
        2: "#FFD700",
        3: "#4169E1",
        4: "#FFFFFF",
        5: "#808080",
      }
    }
  }
}

Hex values

Color 1#DC143C

Color 2#FFD700

Color 3#4169E1

Color 4#FFFFFF

Color 5#808080

Accessibility

Contrast checker

3.6:1AA18

1:1Fail

5:1AA

1.3:1Fail

3.6:1AA18

3.5:1AA18

1.4:1Fail

2.8:1Fail

1:1Fail

3.5:1AA18

4.8:1AA

1.2:1Fail

5:1AA

1.4:1Fail

4.8:1AA

3.9:1AA18

1.3:1Fail

2.8:1Fail

1.2:1Fail

3.9:1AA18

Similar palettes

More like Diner Jukebox Pop