Palette

Retro Diner Chic

A fun and bold palette inspired by the classic colors of a 1950s diner.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EF3054#F7BFB0#FED700#3A6EA5#000000

Palette guide

How to use Retro Diner Chic

Overview

The Retro Diner Chic palette offers a refined yet playful take on the classic 1950s diner aesthetic. It features a sophisticated Raspberry Red (#EF3054) and a soft Peach (#F7BFB0), creating a warm and inviting foundation. A vibrant Gold (#FED700) adds a cheerful, sunny accent, reminiscent of classic signage, while a deep Steel Blue (#3A6EA5) provides a grounding, cool contrast. The inclusion of stark Black (#000000) ensures graphic impact and versatility. This palette is ideal for designers seeking to combine vintage charm with a contemporary edge, perfect for upscale retro branding, modern web interfaces, or stylish print materials that demand attention.

Best used for

Upscale retro branding
Modern vintage e-commerce sites
Boutique cafe interior design
Stylish event invitations
Editorial design with a classic twist
Fashion and lifestyle blogs

Suggested color roles

primary

Use #EF3054 (Raspberry Red) for dominant brand elements, calls to action, or headlines to convey playful sophistication.

secondary

Apply #FED700 (Gold) for cheerful highlights, interactive elements, or accents that demand attention and evoke classic signage.

accent

Leverage #3A6EA5 (Steel Blue) for strategic contrast, important links, or as a strong background to add depth and a cool, grounding effect.

background

Employ #F7BFB0 (Peach) as a soft, inviting background, providing a warm and elegant canvas that complements the bolder hues.

text

Utilize #000000 (Black) for all primary body text, ensuring maximum readability and a crisp, modern feel against the lighter backgrounds.

Accessibility notes

Ensure #000000 text on #F7BFB0 background provides optimal readability (WCAG AAA compliant).
#EF3054, #FED700, and #3A6EA5 offer strong contrast against #F7BFB0 for headings and calls to action.
Avoid using #FED700 for small text on #F7BFB0 due to potential low contrast; it's best for larger accents.
Consider using white text on #EF3054 or #3A6EA5 for maximum legibility on darker elements.

Recommended combinations

Chic & Bold

Eye-catching headlines, cheerful illustrations, and warm, inviting content areas.

#EF3054 · #FED700 · #F7BFB0

Modern Contrast

Clean informational sections, strong typography, and structured layouts with a sophisticated edge.

#3A6EA5 · #000000 · #F7BFB0

Playful Pop

Dynamic graphic elements, vibrant icons, or attention-grabbing calls to action with strong visual appeal.

#EF3054 · #3A6EA5 · #FED700

CSS variables

:root {
  --retro-diner-chic-1: #EF3054;
  --retro-diner-chic-2: #F7BFB0;
  --retro-diner-chic-3: #FED700;
  --retro-diner-chic-4: #3A6EA5;
  --retro-diner-chic-5: #000000;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-chic": {
        1: "#EF3054",
        2: "#F7BFB0",
        3: "#FED700",
        4: "#3A6EA5",
        5: "#000000",
      }
    }
  }
}

Hex values

Color 1#EF3054

Color 2#F7BFB0

Color 3#FED700

Color 4#3A6EA5

Color 5#000000

Accessibility

Contrast checker

2.5:1Fail

2.9:1Fail

1.3:1Fail

5.2:1AA

2.5:1Fail

1.1:1Fail

3.3:1AA18

13:1AAA