Back to palettes

Palette

Retro Diner Jukebox

Bold primary colors and classic grey capture the nostalgic charm and vibrant energy of a 1950s diner jukebox.

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#0000FF#FFFF00#F5F5DC#808080

Palette guide

How to use Retro Diner Jukebox

Overview

The Retro Diner Jukebox palette captures the nostalgic charm and vibrant energy of a 1950s diner jukebox using a classic primary color scheme. It features a bold pure red (#FF0000), a strong pure blue (#0000FF), and a bright pure yellow (#FFFF00). These iconic hues are balanced by a soft, warm beige (#F5F5DC) and a versatile medium grey (#808080). This palette is excellent for designers and developers aiming to create highly recognizable, playful, and energetic designs. Utilize #FF0000 for impactful calls to action, and #F5F5DC as a warm, inviting backdrop, while #808080 provides a subtle, metallic touch.

Best used for

  • Children's book illustrations and media
  • Educational apps and websites
  • Retro toy branding and packaging
  • Classic arcade game interfaces
  • Event promotions for family-friendly themes
  • Pop art and comic book aesthetics

Suggested color roles

primary

The pure red (#FF0000) is perfect for primary calls to action, important headings, and elements requiring high visibility.

secondary

The strong pure blue (#0000FF) serves well for secondary interactive elements, navigation, or to provide a cool contrast.

accent

The bright pure yellow (#FFFF00) is ideal for cheerful accents, highlights, or decorative elements that need to stand out.

background

The soft beige (#F5F5DC) offers a warm, neutral background that allows the vibrant primary colors to truly pop.

text

The medium grey (#808080) can be used for secondary text or subtle labels. For primary body text, pure black offers superior readability against #F5F5DC.

Accessibility notes

  • Black text on #F5F5DC background ensures excellent readability for body content.
  • Avoid using #FFFF00 on #F5F5DC for text due to extremely low contrast; reserve for large, decorative shapes.
  • The medium grey text (#808080) on #F5F5DC may require larger font sizes or bolding to meet WCAG AA standards.
  • Ensure sufficient contrast when pairing #FF0000, #0000FF, and #FFFF00, especially for interactive elements.

Recommended combinations

Primary Pop

Creates an instantly recognizable and highly energetic visual for hero sections, banners, or playful branding.

#FF0000 · #0000FF · #FFFF00

Retro Base

Ideal for main content areas, providing a warm, legible foundation with a bold red accent for key information.

#F5F5DC · #808080 · #FF0000

Dynamic Duo

Great for charts, infographics, or interactive elements where clear distinction and a classic feel are desired.

#0000FF · #FFFF00 · #808080

CSS variables

:root {
  --retro-diner-jukebox-4-1: #FF0000;
  --retro-diner-jukebox-4-2: #0000FF;
  --retro-diner-jukebox-4-3: #FFFF00;
  --retro-diner-jukebox-4-4: #F5F5DC;
  --retro-diner-jukebox-4-5: #808080;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox-4": {
        1: "#FF0000",
        2: "#0000FF",
        3: "#FFFF00",
        4: "#F5F5DC",
        5: "#808080",
      }
    }
  }
}

Related searches

primary colors retrodiner jukebox color schemevintage playful palettered blue yellow grey beigeclassic children's design colors

Palette colors

Hex values

Color 1#FF0000
·
Color 2#0000FF
·
Color 3#FFFF00
·
Color 4#F5F5DC
·
Color 5#808080
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.7:1AA18
3.6:1AA18
1:1Fail
2
2.1:1Fail
8:1AAA
7.8:1AAA
2.2:1Fail
3
3.7:1AA18
8:1AAA
1:1Fail
3.7:1AA18
4
3.6:1AA18
7.8:1AAA
1:1Fail
3.6:1AA18
5
1:1Fail
2.2:1Fail
3.7:1AA18
3.6:1AA18

Similar palettes

More like Retro Diner Jukebox

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