Palette

Retro Diner Jukebox

Bold reds, classic teal, and creamy off-whites, reminiscent of a nostalgic 1950s American diner aesthetic.

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

#C12A0A#FF4500#2C7D70#FFDAB9#282828

Palette guide

How to use Retro Diner Jukebox

Overview

The "Retro Diner Jukebox" palette offers a sophisticated take on vintage Americana, blending classic diner elements with a modern edge. It features a deep, earthy red (#C12A0A), a vibrant orange-red (#FF4500), a unique teal (#2C7D70), a creamy peach (#FFDAB9), and a versatile dark grey (#282828). This scheme moves beyond typical primaries, providing depth and an unexpected twist. Designers and developers can use these colors to create projects that are nostalgic yet refined, perfect for evoking a sense of curated vintage charm and playful energy.

Best used for

Modern retro branding and logos
Sophisticated cafe or restaurant design
Vintage-inspired web and app interfaces
Product packaging with a unique aesthetic
Editorial design with a classic twist
Event materials for themed gatherings

Suggested color roles

primary

Designate #FF4500 (Orange-Red) for energetic calls-to-action, prominent headings, or key brand elements to capture attention.

secondary

Utilize #C12A0A (Earthy Red) for depth, subheadings, or to provide a grounded, warm presence in your design.

accent

Incorporate #2C7D70 (Teal) for an unexpected, refreshing pop, ideal for interactive elements, icons, or decorative details.

background

Apply #FFDAB9 (Creamy Peach) as a soft, inviting background, allowing the bolder colors to stand out beautifully.

text

Employ #282828 (Dark Grey) for all body text and critical information to ensure excellent readability and a polished, contemporary feel.

Accessibility notes

Ensure #282828 (Dark Grey) text on #FFDAB9 (Creamy Peach) has sufficient contrast for optimal readability.
Avoid using #2C7D70 (Teal) as text on #282828 (Dark Grey) without careful contrast testing due to potential low contrast.
Pair #FF4500 (Orange-Red) and #C12A0A (Earthy Red) with #FFDAB9 (Creamy Peach) for strong visual impact.
For body text, #282828 (Dark Grey) is a versatile and legible choice on light backgrounds.

Recommended combinations

Warm & Cool Retro

Excellent for creating dynamic, balanced sections that blend warmth with a refreshing contrast.

#FF4500 · #2C7D70 · #FFDAB9

Grounded Vintage

Ideal for main content areas, providing clear hierarchy and a sophisticated, inviting aesthetic.

#C12A0A · #282828 · #FFDAB9

Playful Accents

Perfect for interactive elements, highlights, or graphical details that need to pop with a modern retro charm.

#2C7D70 · #FF4500 · #282828

CSS variables

:root {
  --retro-diner-jukebox-1: #C12A0A;
  --retro-diner-jukebox-2: #FF4500;
  --retro-diner-jukebox-3: #2C7D70;
  --retro-diner-jukebox-4: #FFDAB9;
  --retro-diner-jukebox-5: #282828;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-jukebox": {
        1: "#C12A0A",
        2: "#FF4500",
        3: "#2C7D70",
        4: "#FFDAB9",
        5: "#282828",
      }
    }
  }
}

Hex values

Color 1#C12A0A

Color 2#FF4500

Color 3#2C7D70

Color 4#FFDAB9

Color 5#282828

Accessibility

Contrast checker

1.7:1Fail

1.2:1Fail

4.4:1AA18

2.5:1Fail

1.7:1Fail

1.4:1Fail

2.6:1Fail

4.3:1AA18

1.2:1Fail

1.4:1Fail

3.7:1AA18

3:1AA18

4.4:1AA18

2.6:1Fail

3.7:1AA18

11.2:1AAA

2.5:1Fail

4.3:1AA18

3:1AA18

11.2:1AAA

Similar palettes

More like Retro Diner Jukebox