Palette

Retro Diner Jukebox

A bold, energetic tribute to classic 50s diners, with bright colors and chrome accents.

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

#D72323#F2D722#00BFFF#A9A9A9#FFFFFF

Palette guide

How to use Retro Diner Jukebox

Overview

The Retro Diner Jukebox palette offers a bold and energetic tribute to classic 1950s diners, infused with bright colors and chrome accents. It features a strong, vibrant red (#D72323), a cheerful bright yellow (#F2D722), and a striking deep sky blue (#00BFFF). These lively hues are grounded by a versatile medium grey (#A9A9A9) and a crisp pure white (#FFFFFF). This palette is perfect for designers and developers aiming to create dynamic, fun, and visually impactful experiences. Utilize #D72323 for high-priority calls to action, and #A9A9A9 to suggest metallic textures or provide a sophisticated neutral base for the vibrant colors.

Best used for

Energetic event branding and posters
Youth-oriented app and web interfaces
Fast-food restaurant marketing
Vintage toy packaging
Game design with a retro arcade feel
Social media campaigns for lively brands

Suggested color roles

primary

The strong red (#D72323) is ideal for primary calls to action, important headlines, and brand highlights that demand attention.

secondary

The bright yellow (#F2D722) works well for secondary accents, interactive elements, or cheerful decorative details.

accent

The deep sky blue (#00BFFF) provides a vibrant and cool accent, perfect for navigation, icons, or highlighting specific information.

background

Pure white (#FFFFFF) serves as a clean, expansive background, allowing the vibrant colors to pop and ensuring excellent readability.

text

For primary text, use a dark neutral like black. The medium grey (#A9A9A9) is excellent for secondary text, labels, or subtle UI elements, offering a softer alternative to black.

Accessibility notes

Black text on #FFFFFF background offers excellent readability. #A9A9A9 text on #FFFFFF provides good contrast for secondary information.
Avoid using #F2D722 on #FFFFFF for small text due to insufficient contrast; reserve for large headings or decorative elements.
Ensure interactive elements in #D72323 and #00BFFF have clear focus states and sufficient contrast with surrounding elements.
For critical information, use a combination of color and iconography or text to cater to color-blind users.

Recommended combinations

Jukebox Brights

Creates a powerful, eye-catching combination for hero images, banners, or playful illustrations.

#D72323 · #F2D722 · #00BFFF

Clean & Chrome

Ideal for main content areas, providing clear readability with a metallic accent and a bold highlight for key information.

#FFFFFF · #A9A9A9 · #D72323

Dynamic Pop

Great for charts, data visualization, or interactive elements where a vibrant and distinct visual hierarchy is needed.

#F2D722 · #00BFFF · #A9A9A9

CSS variables

:root {
  --retro-diner-jukebox-2-1: #D72323;
  --retro-diner-jukebox-2-2: #F2D722;
  --retro-diner-jukebox-2-3: #00BFFF;
  --retro-diner-jukebox-2-4: #A9A9A9;
  --retro-diner-jukebox-2-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox-2": {
        1: "#D72323",
        2: "#F2D722",
        3: "#00BFFF",
        4: "#A9A9A9",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#D72323

Color 2#F2D722

Color 3#00BFFF

Color 4#A9A9A9

Color 5#FFFFFF

Accessibility

Contrast checker

3.5:1AA18

2.4:1Fail

2.2:1Fail

5.1:1AA

3.5:1AA18

1.5:1Fail

1.6:1Fail

1.4:1Fail

2.4:1Fail

1.5:1Fail

1.1:1Fail

2.1:1Fail

2.2:1Fail

1.6:1Fail

1.1:1Fail

2.4:1Fail

5.1:1AA

1.4:1Fail

2.1:1Fail

2.4:1Fail

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

Jukebox Brights

Clean & Chrome

Dynamic Pop

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Diner Jukebox