Palette

Retro Diner Pop

Bright, contrasting colors that capture the iconic and cheerful aesthetic of a 1950s American diner.

vibrantplayful5 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

#FF0000#00BFFF#FFD700#F8F8FF#36454F

Palette guide

How to use Retro Diner Pop

Overview

The "Retro Diner Pop" palette is a crisp, playful collection that perfectly captures the iconic aesthetic of a 1950s American diner. It features a bold red (#FF0000), a bright sky blue (#00BFFF), a cheerful golden yellow (#FFD700), a very light off-white (#F8F8FF), and a grounding dark charcoal (#36454F). This scheme is designed for designers and developers seeking to create projects that are clean, energetic, and infused with the optimistic, graphic appeal of mid-century pop art. Utilize these colors to evoke a sense of nostalgic fun and vibrant simplicity.

Best used for

Brand identity for modern retro businesses
Clean UI/UX design for apps and websites
Children's book illustrations and toy design
Retro advertising and marketing campaigns
Event invitations with a playful theme
Digital graphics with a pop art feel

Suggested color roles

primary

Designate #FF0000 (Red) for high-impact calls-to-action, prominent headlines, or dynamic brand elements that demand attention.

secondary

Utilize #00BFFF (Sky Blue) for refreshing contrast, navigation, or to introduce a playful, airy feel.

accent

Incorporate #FFD700 (Golden Yellow) for cheerful highlights, interactive states, or small decorative elements that need to pop.

background

Apply #F8F8FF (Off-White) as a clean, expansive background, allowing the vibrant primary colors to truly stand out.

text

Employ #36454F (Dark Charcoal) for all body text and critical information to ensure maximum readability and a sophisticated, modern contrast.

Accessibility notes

Ensure #FFD700 (Golden Yellow) text has sufficient contrast against its background, especially if used on #F8F8FF (Off-White).
The dark #36454F (Dark Charcoal) provides excellent contrast for text on #F8F8FF (Off-White), ensuring high readability.
Pair #FF0000 (Red) and #00BFFF (Sky Blue) with #F8F8FF (Off-White) for optimal contrast in text and key elements.
Avoid using #FFD700 (Golden Yellow) as body text on light backgrounds; reserve it for accents or large headings.

Recommended combinations

Pop Art Trio

Excellent for creating energetic, eye-catching graphics, headers, or interactive elements with a classic pop art feel.

#FF0000 · #00BFFF · #FFD700

Clean Contrast

Ideal for main content areas, providing clear hierarchy and a sophisticated yet playful retro aesthetic.

#F8F8FF · #36454F · #FF0000

Golden Accents

Perfect for highlights, calls-to-action, or graphical details that need to stand out against a contrasting background.

#FFD700 · #00BFFF · #36454F

CSS variables

:root {
  --retro-diner-pop-2-1: #FF0000;
  --retro-diner-pop-2-2: #00BFFF;
  --retro-diner-pop-2-3: #FFD700;
  --retro-diner-pop-2-4: #F8F8FF;
  --retro-diner-pop-2-5: #36454F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-pop-2": {
        1: "#FF0000",
        2: "#00BFFF",
        3: "#FFD700",
        4: "#F8F8FF",
        5: "#36454F",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#00BFFF

Color 3#FFD700

Color 4#F8F8FF

Color 5#36454F

Accessibility

Contrast checker

1.9:1Fail

2.9:1Fail

3.8:1AA18

2.5:1Fail

1.9:1Fail

1.5:1Fail

2:1Fail

4.7:1AA

2.9:1Fail

1.5:1Fail

1.3:1Fail

7.1:1AAA

3.8:1AA18

2:1Fail

1.3:1Fail

9.4:1AAA

2.5:1Fail

4.7:1AA

7.1:1AAA

9.4:1AAA

Similar palettes

More like Retro Diner Pop