Palette

Midcentury Eatery Glow

Bright, cheerful colors inspired by vintage diners, jukeboxes, and classic cars, evoking a bygone era.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Midcentury Eatery Glow 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 Midcentury Eatery Glow.

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

Data visualization

#E74C3C#F39C12#FDCB6E#3498DB#D35400

Palette guide

How to use Midcentury Eatery Glow

Overview

The Midcentury Eatery Glow palette is a vibrant, cheerful collection inspired by vintage diners and classic Americana. It features a bold red #E74C3C, a punchy orange #F39C12, and a bright yellow #FDCB6E, balanced by a cool blue #3498DB and a deeper burnt orange #D35400. This palette is perfect for designers looking to inject energy and a nostalgic, playful spirit into their projects. The high contrast and lively hues make it suitable for eye-catching branding, dynamic web interfaces, or illustrations that demand attention. It effortlessly evokes the fun and optimism of a bygone era, making it a powerful tool for engaging audiences.

Best used for

Diner or restaurant branding and menus
Event posters and promotional materials
Children's product design and packaging
Retro-themed web applications or games
Food truck branding and livery
Playful social media graphics

Suggested color roles

primary

Use #E74C3C as a high-impact primary for calls-to-action or key brand elements, demanding attention.

secondary

Apply #F39C12 for secondary buttons, subheadings, or important highlights, maintaining energy.

accent

Introduce #3498DB as a vibrant accent for interactive elements, links, or to provide visual relief.

background

Employ #FDCB6E for light background areas, offering a cheerful base, or a clean white for maximum contrast.

text

Utilize a deep charcoal or black for primary body text, ensuring legibility against the brighter colors.

Accessibility notes

Ensure sufficient contrast for text, especially when using lighter colors like #FDCB6E for backgrounds.
Avoid pairing #E74C3C with #D35400 for text, as their proximity in hue can make text hard to read.
Use #3498DB judiciously, as its coolness can clash if not balanced by the warmth of the other colors for accessibility.
For small text on #FDCB6E, consider a very dark color like #E74C3C or black to meet contrast standards.

Recommended combinations

Diner Pop

Ideal for eye-catching headers, banners, or playful illustrations that need high impact.

#E74C3C · #FDCB6E · #3498DB

Retro Energy

Excellent for vibrant call-to-action sections, product highlights, or energetic infographics.

#F39C12 · #D35400 · #FDCB6E

Balanced Play

Creates a dynamic yet balanced look for interactive elements, charts, or feature sections.

#3498DB · #FDCB6E · #E74C3C

CSS variables

:root {
  --midcentury-eatery-glow-1: #E74C3C;
  --midcentury-eatery-glow-2: #F39C12;
  --midcentury-eatery-glow-3: #FDCB6E;
  --midcentury-eatery-glow-4: #3498DB;
  --midcentury-eatery-glow-5: #D35400;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "midcentury-eatery-glow": {
        1: "#E74C3C",
        2: "#F39C12",
        3: "#FDCB6E",
        4: "#3498DB",
        5: "#D35400",
      }
    }
  }
}

Hex values

Color 1#E74C3C

Color 2#F39C12

Color 3#FDCB6E

Color 4#3498DB

Color 5#D35400

Accessibility

Contrast checker

1.7:1Fail

2.5:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

1.5:1Fail

1.4:1Fail

1.9:1Fail

2.5:1Fail

1.5:1Fail

2.1:1Fail

2.8:1Fail