Palette

Retro Diner Glow

Inspired by classic American diners with their vibrant neon lights and cheerful interior design.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EF476F#FFD166#06D6A0#118AB2#073B4C

Palette guide

How to use Retro Diner Glow

Overview

The Retro Diner Glow palette draws inspiration from classic American diners, featuring vibrant neon lights and cheerful interior design. This modern retro collection includes a lively #EF476F (coral pink), a sunny #FFD166 (golden yellow), a fresh #06D6A0 (bright teal), a cool #118AB2 (medium blue), and a deep #073B4C (dark teal). It's a dynamic and sophisticated palette for designers and developers aiming to blend vintage charm with a contemporary edge. The balanced mix of warm and cool, bright and deep tones provides immense flexibility for creating engaging and visually striking digital and print experiences.

Best used for

Modern retro branding for tech startups or creative agencies
Vibrant UI/UX design for apps and websites
Fashion and lifestyle product packaging
Event marketing for music festivals or design conferences
Digital art and illustration with a contemporary vintage feel
Interior design accents for cafes or workspaces

Suggested color roles

primary

Utilize #EF476F (coral pink) or #118AB2 (medium blue) as the dominant color for headlines, primary calls to action, or key brand elements, offering a fresh yet classic feel.

secondary

Incorporate #FFD166 (golden yellow) or #06D6A0 (bright teal) to provide energetic contrast, ideal for secondary information, interactive states, or graphical patterns.

accent

Employ #FFD166 (golden yellow) to add bright, cheerful pops, perfect for highlighting important features, small details, or decorative motifs that need to stand out.

background

The deep #073B4C (dark teal) can serve as a rich, sophisticated background for hero sections or darker themes. For lighter areas, a crisp white or very light grey is recommended.

text

On lighter backgrounds, use #073B4C (dark teal) for optimal readability. On darker backgrounds like #073B4C, crisp white or #FFD166 offers excellent contrast.

Accessibility notes

Ensure sufficient contrast for text, especially when pairing #FFD166 (yellow) with lighter backgrounds; dark text is essential.
The #073B4C (dark teal) provides robust contrast with the brighter colors, making it excellent for text or UI elements.
Be mindful of using #EF476F (coral pink) for small text on complex backgrounds, as its vibrancy can sometimes reduce legibility.
For interactive elements, clearly differentiate states using a combination of color, size, or iconography to enhance usability within this vibrant palette.

Recommended combinations

Modern Retro

A sophisticated yet playful combination, perfect for bold branding, hero sections, and UI elements that blend vintage with modern aesthetics.

#073B4C · #EF476F · #FFD166

Vibrant Energy

Creates an energetic and fresh feel, ideal for illustrations, interactive elements, or sections emphasizing innovation and creativity.

#06D6A0 · #FFD166 · #118AB2

Balanced Contrast

Offers a strong visual hierarchy and excellent readability, suitable for informational layouts, clear navigation, or professional yet vibrant designs.

#118AB2 · #EF476F · #073B4C

CSS variables

:root {
  --retro-diner-glow-1: #EF476F;
  --retro-diner-glow-2: #FFD166;
  --retro-diner-glow-3: #06D6A0;
  --retro-diner-glow-4: #118AB2;
  --retro-diner-glow-5: #073B4C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-glow": {
        1: "#EF476F",
        2: "#FFD166",
        3: "#06D6A0",
        4: "#118AB2",
        5: "#073B4C",
      }
    }
  }
}

Hex values

Color 1#EF476F

Color 2#FFD166

Color 3#06D6A0

Color 4#118AB2

Color 5#073B4C

Accessibility

Contrast checker

2.5:1Fail

1.9:1Fail

1.1:1Fail

3.3:1AA18

2.5:1Fail

1.3:1Fail

2.7:1Fail

8.4:1AAA

1.9:1Fail

1.3:1Fail

2.1:1Fail

6.4:1AA

1.1:1Fail

2.7:1Fail

2.1:1Fail

3:1AA18

3.3:1AA18

8.4:1AAA

6.4:1AA

3:1AA18

Similar palettes

More like Retro Diner Glow