Palette

Retro Diner Juke

Iconic, high-contrast primary colors reminiscent of a lively 1950s diner and classic jukeboxes.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Diner Juke 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 Juke.

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

Data visualization

#E40303#FFED00#0081C9#000000#FFFFFF

Palette guide

How to use Retro Diner Juke

Overview

The Retro Diner Juke palette is a high-contrast, iconic collection of primary colors that immediately conjures the lively spirit of a 1950s diner and classic jukeboxes. Featuring a powerful red (#E40303), a sunny yellow (#FFED00), and a vibrant blue (#0081C9), this palette leverages pure black (#000000) and crisp white (#FFFFFF) for maximum impact and clarity. Designers and developers can use these bold hues to create energetic, playful, and visually striking interfaces or branding. The strong contrast ensures excellent legibility and a dynamic user experience, making it ideal for designs that aim to be both nostalgic and modern.

Best used for

Bold branding and logos
Dynamic web and app interfaces
Event posters and promotional materials
Children's entertainment products
Retro gaming interfaces
Pop art style illustrations

Suggested color roles

primary

The bold red (#E40303) is perfect for high-impact elements like primary calls to action, alerts, and key branding.

secondary

The bright yellow (#FFED00) serves well for secondary highlights, interactive elements, and cheerful accents.

accent

The vibrant blue (#0081C9) provides a strong contrasting accent, ideal for navigation, icons, or informational graphics.

background

Pure white (#FFFFFF) offers a clean, expansive canvas, ensuring maximum contrast and readability for all content.

text

Pure black (#000000) is the definitive choice for all text, guaranteeing excellent legibility against the white background and making a strong statement.

Accessibility notes

The contrast of #000000 text on #FFFFFF background is excellent and highly accessible.
Be cautious when using #FFED00 on #FFFFFF for text; it may not meet WCAG AA standards for small text. Reserve for large headings.
Ensure interactive elements using #E40303, #FFED00, or #0081C9 have sufficient contrast with surrounding elements.
For color-blind users, rely on more than just color distinction for critical information, especially between red and yellow.

Recommended combinations

Jukebox Flash

Excellent for creating energetic hero images, striking headers, or playful infographics that pop.

#E40303 · #FFED00 · #0081C9

High Contrast Base

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

#FFFFFF · #000000 · #E40303

Dynamic Duo

Great for interactive elements, charts, or illustrations where a vibrant and clear distinction is needed.

#0081C9 · #FFED00 · #000000

CSS variables

:root {
  --retro-diner-juke-1: #E40303;
  --retro-diner-juke-2: #FFED00;
  --retro-diner-juke-3: #0081C9;
  --retro-diner-juke-4: #000000;
  --retro-diner-juke-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-juke": {
        1: "#E40303",
        2: "#FFED00",
        3: "#0081C9",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Hex values

Color 1#E40303

Color 2#FFED00

Color 3#0081C9

Color 4#000000

Color 5#FFFFFF

Accessibility

Contrast checker

4:1AA18

1.2:1Fail

4.3:1AA18

4.9:1AA

4:1AA18

3.5:1AA18

17.4:1AAA

1.2:1Fail

3.5:1AA18

5:1AA

4.2:1AA18

4.3:1AA18

17.4:1AAA

5:1AA

21:1AAA

4.9:1AA

1.2:1Fail

4.2:1AA18

21:1AAA

Similar palettes

More like Retro Diner Juke

Retro Diner Juke

See it in context.

Ready when you are.

Built with Retro Diner Juke.

How to use Retro Diner Juke

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Jukebox Flash

High Contrast Base

Dynamic Duo

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Retro Diner Juke