Back to palettes

Palette

Retro Diner Pop

Fun and energetic colors recalling the bright aesthetics 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

#C63A48#E69C2F#F3D051#5C99B9#2A2E44

Palette guide

How to use Retro Diner Pop

Overview

The Retro Diner Pop palette offers a refined yet playful take on vintage aesthetics, perfectly capturing the nostalgic charm of a 1950s American diner with a sophisticated twist. Featuring a rich crimson red (#C63A48), a warm burnt orange (#E69C2F), a sunny golden yellow (#F3D051), a calming sky blue (#5C99B9), and a deep, grounding navy (#2A2E44), this collection provides a balanced blend of warmth and coolness. Designers and developers can utilize these colors to evoke a sense of inviting nostalgia in branding, web interfaces, or themed applications, creating a memorable and engaging visual experience.

Best used for

  • Vintage restaurant branding
  • Nostalgic packaging design
  • Mid-century modern interiors
  • Retro-themed web applications
  • Editorial design with a classic feel
  • Themed event marketing

Suggested color roles

primary

Utilize #C63A48 as a sophisticated primary color for brand identity, main headings, or key UI elements.

secondary

Employ #E69C2F or #5C99B9 for complementary sections, subheadings, or to add visual interest and balance.

accent

Apply #F3D051 for cheerful highlights, call-to-actions, or small decorative elements to draw attention.

background

A deep #2A2E44 provides a rich, grounding background, while a light cream or white can offer airy contrast for content areas.

text

For optimal readability, use #2A2E44 for dark text on light backgrounds, and a light cream or white on #2A2E44 or #C63A48.

Accessibility notes

  • Ensure sufficient contrast when using #F3D051; it often requires dark text for readability.
  • Test contrast ratios for #5C99B9 with both light and dark text, as its mid-tone can be tricky.
  • Dark text on #E69C2F might need careful checking for accessibility compliance.
  • Prioritize #2A2E44 for body text on lighter backgrounds for excellent legibility.

Recommended combinations

Bold Retro

Create a strong, rich vintage feel suitable for headers and prominent sections.

#C63A48 · #E69C2F · #2A2E44

Sunny Pop

Perfect for bright, energetic elements or illustrations that need to stand out.

#F3D051 · #5C99B9 · #C63A48

Deep Nostalgia

Use for sophisticated backgrounds with warm, inviting accents and text.

#2A2E44 · #C63A48 · #E69C2F

CSS variables

:root {
  --retro-diner-pop-5-1: #C63A48;
  --retro-diner-pop-5-2: #E69C2F;
  --retro-diner-pop-5-3: #F3D051;
  --retro-diner-pop-5-4: #5C99B9;
  --retro-diner-pop-5-5: #2A2E44;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-pop-5": {
        1: "#C63A48",
        2: "#E69C2F",
        3: "#F3D051",
        4: "#5C99B9",
        5: "#2A2E44",
      }
    }
  }
}

Related searches

vintage diner color paletteclassic retro brandingmid-century modern colorsnostalgic UI designwarm vintage aesthetic

Palette colors

Hex values

Color 1#C63A48
·
Color 2#E69C2F
·
Color 3#F3D051
·
Color 4#5C99B9
·
Color 5#2A2E44
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.4:1AA18
1.6:1Fail
2.6:1Fail
2
2.2:1Fail
1.5:1Fail
1.4:1Fail
5.8:1AA
3
3.4:1AA18
1.5:1Fail
2.1:1Fail
8.9:1AAA
4
1.6:1Fail
1.4:1Fail
2.1:1Fail
4.3:1AA18
5
2.6:1Fail
5.8:1AA
8.9:1AAA
4.3:1AA18

Similar palettes

More like Retro Diner Pop

View all vibrant
Chrome Jukebox Jive
Diner Jukebox Gleam
Retro Diner Booth
Retro Diner Pop
Retro Pop Dream
Atomic Diner Swirl