Palette

Retro Diner Jukebox

Bold primaries and stark contrasts capture the iconic, playful energy of a 1950s American diner.

retroretro5 colors

More retro 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#00BFFF#FFFF00#D3D3D3#000000

Palette guide

How to use Retro Diner Jukebox

Overview

The "Retro Diner Jukebox" palette delivers a punchy, vibrant take on the classic 1950s diner aesthetic. It combines the unmistakable energy of bright red (#FF0000) and sunny yellow (#FFFF00) with a refreshing sky blue (#00BFFF). Grounding these lively tones are a subtle light grey (#D3D3D3) and a strong black (#000000), offering crucial contrast and versatility. This palette is designed for creators seeking to infuse projects with playful nostalgia, bold simplicity, and the iconic visual language of vintage American diners and their glowing jukeboxes.

Best used for

Bold brand identities and logos
Retro-themed website and app interfaces
Event posters and promotional materials
Product packaging with a vintage twist
Children's entertainment and educational design
Digital illustrations with a pop art feel

Suggested color roles

primary

Designate #FF0000 (Red) for high-impact elements like calls-to-action, headlines, or brand focal points that demand attention.

secondary

Use #00BFFF (Sky Blue) to introduce a playful, refreshing contrast, ideal for secondary buttons, illustrations, or background accents.

accent

Leverage #FFFF00 (Yellow) for cheerful highlights, warnings, or small decorative elements that need to pop with optimism.

background

Apply #D3D3D3 (Light Grey) as a clean, versatile background, mimicking chrome or a neutral wall, allowing other colors to stand out.

text

Utilize #000000 (Black) for all body text and critical information to ensure maximum readability and a crisp, graphic aesthetic against lighter tones.

Accessibility notes

Ensure #FFFF00 (Yellow) text has sufficient contrast against its background, especially if used on #D3D3D3 (Light Grey).
Always test contrast for #00BFFF (Sky Blue) on #D3D3D3 (Light Grey) to ensure readability for all users.
Pair #FF0000 (Red) and #000000 (Black) with #D3D3D3 (Light Grey) for optimal contrast in text and key elements.
For large blocks of text, #000000 (Black) on #D3D3D3 (Light Grey) is recommended for legibility.

Recommended combinations

Primary Punch

Excellent for creating energetic, eye-catching graphics, headers, or interactive elements.

#FF0000 · #00BFFF · #FFFF00

Clean Contrast

Effective for main content areas, providing clear hierarchy and a sophisticated retro feel.

#D3D3D3 · #000000 · #FF0000

Sunny Pop

Perfect for playful illustrations, highlighting special offers, or adding a cheerful touch to UI components.

#FFFF00 · #00BFFF · #000000

CSS variables

:root {
  --retro-diner-jukebox-7-1: #FF0000;
  --retro-diner-jukebox-7-2: #00BFFF;
  --retro-diner-jukebox-7-3: #FFFF00;
  --retro-diner-jukebox-7-4: #D3D3D3;
  --retro-diner-jukebox-7-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox-7": {
        1: "#FF0000",
        2: "#00BFFF",
        3: "#FFFF00",
        4: "#D3D3D3",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#00BFFF

Color 3#FFFF00

Color 4#D3D3D3

Color 5#000000

Accessibility

Contrast checker

1.9:1Fail

3.7:1AA18

2.7:1Fail

5.3:1AA

1.9:1Fail

2:1Fail

1.4:1Fail

9.9:1AAA

3.7:1AA18

2:1Fail

1.4:1Fail

19.6:1AAA

2.7:1Fail

1.4:1Fail

14:1AAA

5.3:1AA

9.9:1AAA

19.6:1AAA

14:1AAA

Similar palettes

More like Retro Diner Jukebox

Retro Diner Jukebox

See it in context.

Ready when you are.

Built with Retro Diner Jukebox.

How to use Retro Diner Jukebox

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Primary Punch

Clean Contrast

Sunny Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Diner Jukebox