Palette

Retro Diner Pop

Fun and spirited, reminiscent of classic 1950s diners with their bold colors and lively atmosphere.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF4500#FADA5E#4682B4#50C878#8B0000

Palette guide

How to use Retro Diner Pop

Overview

The Retro Diner Pop palette is fun and spirited, drawing inspiration from classic 1950s diners with their bold colors and lively atmosphere. This collection features a vibrant red-orange (#FF4500), a warm mustard yellow (#FADA5E), a calming steel blue (#4682B4), an energetic emerald green (#50C878), and a deep maroon (#8B0000). It's a versatile palette for designers and developers looking to inject a sense of vintage playfulness and boldness into their projects. The balance of warm and cool tones, along with deep anchors, makes it suitable for a wide range of applications from digital interfaces to physical products, ensuring a memorable and engaging user experience.

Best used for

Vintage-themed websites
Retro apparel designs
Indie game art and UI
Restaurant and cafe branding
Book covers with a nostalgic feel
Digital marketing campaigns

Suggested color roles

primary

Use #FF4500 as a striking primary color for headers, calls-to-action, or key graphical elements to grab attention.

secondary

Employ #4682B4 or #50C878 for complementary sections, subheadings, or to provide a cool, balanced contrast.

accent

Apply #FADA5E for bright highlights, interactive elements, or small decorative details, adding warmth and cheer.

background

A light cream or white provides a clean base. Alternatively, #8B0000 can serve as a dramatic, deep background for specific sections.

text

For readability, use #8B0000 for dark text on lighter backgrounds, or a crisp white for text on #FF4500, #4682B4, or #8B0000.

Accessibility notes

Ensure #FADA5E (mustard yellow) is always paired with dark text for optimal contrast and readability.
Test the contrast of text on #4682B4 carefully, especially if using a light font color.
Avoid using #50C878 as a primary text color on light backgrounds due to potential low contrast.
Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Recommended combinations

Bold Contrast

Creates a strong, impactful design with vibrant focal points and a deep anchor.

#FF4500 · #4682B4 · #8B0000

Earthy Vintage

Perfect for a more subdued, natural retro feel, reminiscent of vintage advertising.

#FADA5E · #50C878 · #8B0000

Lively Pop

Ideal for energetic and inviting elements, capturing the cheerful aspect of the palette.

#FF4500 · #FADA5E · #50C878

CSS variables

:root {
  --retro-diner-pop-1: #FF4500;
  --retro-diner-pop-2: #FADA5E;
  --retro-diner-pop-3: #4682B4;
  --retro-diner-pop-4: #50C878;
  --retro-diner-pop-5: #8B0000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-pop": {
        1: "#FF4500",
        2: "#FADA5E",
        3: "#4682B4",
        4: "#50C878",
        5: "#8B0000",
      }
    }
  }
}

Hex values

Color 1#FF4500

Color 2#FADA5E

Color 3#4682B4

Color 4#50C878

Color 5#8B0000

Accessibility

Contrast checker

2.5:1Fail

1.2:1Fail

1.6:1Fail

2.9:1Fail

2.5:1Fail

3:1Fail

1.5:1Fail

7.3:1AAA

1.2:1Fail

3:1Fail

1.9:1Fail

2.4:1Fail

1.6:1Fail

1.5:1Fail

1.9:1Fail

4.7:1AA

2.9:1Fail

7.3:1AAA

2.4:1Fail

4.7:1AA

Similar palettes

More like Retro Diner Pop