Palette

Retro Diner Jukebox

Bold and nostalgic colors reminiscent of a classic 1950s diner, vibrant and full of character.

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

#FF5733#FFC300#C70039#900C3F#581845

Palette guide

How to use Retro Diner Jukebox

Overview

The "Retro Diner Jukebox" palette offers a warm, inviting, and playfully nostalgic take on the classic 1950s diner. It features a range of rich, slightly muted yet vibrant hues: a cheerful orange-red (#FF5733), a sunny golden yellow (#FFC300), a deep berry red (#C70039), a rich plum (#900C3F), and a sophisticated dark purple (#581845). This scheme moves beyond typical primaries, providing a more refined yet still energetic retro feel. Designers and developers can use these colors to create cozy, engaging, and distinctly vintage projects with a warm, inviting character.

Best used for

Vintage brand identity for cafes or restaurants
Nostalgic illustration and graphic design
Cozy UI/UX for lifestyle or food apps
Retro-themed invitations and event materials
Product packaging with a warm, classic feel
Editorial layouts with a vintage touch

Suggested color roles

primary

Designate #FF5733 (Orange-Red) for key interactive elements, calls-to-action, or headings to convey warmth and energy.

secondary

Utilize #FFC300 (Golden Yellow) for cheerful accents, highlights, or to bring a sunny, optimistic glow to designs.

accent

Incorporate #C70039 (Berry Red) for rich, impactful details, sub-headings, or to add depth and sophistication.

background

Apply #581845 (Dark Purple) for deep, luxurious backgrounds, or use #FFC300 (Golden Yellow) for lighter, more airy sections.

text

Pair #FFC300 (Golden Yellow) or #FF5733 (Orange-Red) for legible text on dark backgrounds like #581845 (Dark Purple), or use a deep charcoal for light backgrounds.

Accessibility notes

Ensure sufficient contrast when using lighter colors like #FF5733 (Orange-Red) and #FFC300 (Golden Yellow) as text on medium-dark backgrounds.
The darker hues like #900C3F (Plum) and #581845 (Dark Purple) provide excellent contrast for lighter text.
Avoid using #C70039 (Berry Red) as text on #900C3F (Plum) without thorough contrast checking due to similar value.
For readability, use high-contrast pairings, such as #FFC300 text on #581845 background.

Recommended combinations

Warm Retro

Excellent for creating inviting, harmonious sections, banners, or illustrations with a cheerful vibe.

#FF5733 · #FFC300 · #C70039

Deep & Rich

Ideal for sophisticated backgrounds, footers, or to provide a strong, elegant contrast with bright accents.

#900C3F · #581845 · #FFC300

Playful Pop

Perfect for highlights, calls-to-action, and playful elements that need to stand out against a darker base.

#FFC300 · #FF5733 · #581845

CSS variables

:root {
  --retro-diner-jukebox-9-1: #FF5733;
  --retro-diner-jukebox-9-2: #FFC300;
  --retro-diner-jukebox-9-3: #C70039;
  --retro-diner-jukebox-9-4: #900C3F;
  --retro-diner-jukebox-9-5: #581845;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox-9": {
        1: "#FF5733",
        2: "#FFC300",
        3: "#C70039",
        4: "#900C3F",
        5: "#581845",
      }
    }
  }
}

Hex values

Color 1#FF5733

Color 2#FFC300

Color 3#C70039

Color 4#900C3F

Color 5#581845

Accessibility

Contrast checker

2:1Fail

1.9:1Fail

2.9:1Fail

4.1:1AA18

2:1Fail

3.7:1AA18

5.7:1AA

8:1AAA

1.9:1Fail

3.7:1AA18

1.5:1Fail

2.1:1Fail

2.9:1Fail

5.7:1AA

1.5:1Fail

1.4:1Fail

4.1:1AA18

8:1AAA

2.1:1Fail

1.4:1Fail

Similar palettes

More like Retro Diner Jukebox