Palette

Vintage Diner Jukebox

Captures the nostalgic charm of a 1950s diner with faded yet inviting classic colors.

VibrantRetro5 colors

More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C43B5C#F4D03F#6AAB6A#4C72B0#EAEAE4

Palette guide

How to use Vintage Diner Jukebox

Overview

The "Vintage Diner Jukebox" palette captures the vibrant, nostalgic charm of a 1950s American diner. It features a cheerful cherry red (#C43B5C), a bright, inviting yellow (#F4D03F), a friendly mint green (#6AAB6A), a cool, classic blue (#4C72B0), and a soft, creamy off-white (#EAEAE4). This collection is perfect for designers and developers aiming to evoke a playful, retro atmosphere with a touch of warmth. Its balanced mix of muted primaries and a versatile neutral makes it ideal for branding, web design, or editorial content that needs to feel welcoming, energetic, and authentically vintage.

Best used for

Retro restaurant branding and menu design
Event invitations for themed parties
Mobile app designs with a fun, vintage feel
Social media graphics for nostalgic campaigns
Children's product packaging and toy design
Website design for cafes or entertainment venues

Suggested color roles

primary

Use #C43B5C for impactful calls-to-action or key navigational elements, drawing attention.

secondary

Employ #4C72B0 for main content blocks or supporting information, providing a cool, stable presence.

accent

#F4D03F is perfect for highlights, warnings, or small interactive elements, adding a sunny pop. #6AAB6A offers a refreshing secondary accent.

background

#EAEAE4 serves as a clean, soft background, allowing the vibrant colors to shine without harshness.

text

For #EAEAE4 or #F4D03F, a dark charcoal or #4C72B0 provides excellent readability. For #C43B5C or #4C72B0, white text is recommended.

Accessibility notes

Ensure #F4D03F (yellow) text has sufficient contrast, generally best on dark backgrounds like #4C72B0 or charcoal.
#EAEAE4 (off-white) provides good contrast for darker text colors within the palette.
Avoid using #6AAB6A (green) for small text elements on #F4D03F (yellow) due to potential low contrast.
Always verify contrast ratios for all text and interactive elements, especially for critical information.

Recommended combinations

Diner Classic

For vibrant headlines and hero sections, capturing the quintessential diner look.

#C43B5C · #F4D03F · #EAEAE4

Jukebox Glow

Ideal for content blocks or background patterns, offering a cool, inviting feel.

#4C72B0 · #6AAB6A · #EAEAE4

Playful Accents

Perfect for clean designs where the bright colors serve as playful highlights and interactive elements.

#EAEAE4 · #C43B5C · #F4D03F

CSS variables

:root {
  --vintage-diner-jukebox-1: #C43B5C;
  --vintage-diner-jukebox-2: #F4D03F;
  --vintage-diner-jukebox-3: #6AAB6A;
  --vintage-diner-jukebox-4: #4C72B0;
  --vintage-diner-jukebox-5: #EAEAE4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vintage-diner-jukebox": {
        1: "#C43B5C",
        2: "#F4D03F",
        3: "#6AAB6A",
        4: "#4C72B0",
        5: "#EAEAE4",
      }
    }
  }
}

Hex values

Color 1#C43B5C

Color 2#F4D03F

Color 3#6AAB6A

Color 4#4C72B0

Color 5#EAEAE4

Accessibility

Contrast checker

3.4:1AA18

1.9:1Fail

1.1:1Fail

4.2:1AA18

3.4:1AA18

1.8:1Fail

3.2:1AA18

1.2:1Fail

1.9:1Fail

1.8:1Fail

2.3:1Fail

1.1:1Fail

3.2:1AA18

1.8:1Fail

4:1AA18

4.2:1AA18

1.2:1Fail

2.3:1Fail

4:1AA18

Similar palettes

More like Vintage Diner Jukebox

Vintage Diner Jukebox

See it in context.

Ready when you are.

Built with Vintage Diner Jukebox.

How to use Vintage Diner Jukebox

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Diner Classic

Jukebox Glow

Playful Accents

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vintage Diner Jukebox