Palette

Neon Chrome Diner

A lively palette reflecting the bright lights, chrome, and bold colors of a classic 50s diner.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Neon Chrome Diner 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 Neon Chrome Diner.

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

Data visualization

#E03616#FCBB1D#2B7A7A#3AAFB9#EBEBEB

Palette guide

How to use Neon Chrome Diner

Overview

The Neon Chrome Diner palette is a vibrant homage to classic 1950s American diners, blending lively energy with a touch of vintage cool. Featuring a bold retro red, #E03616, alongside a cheerful golden yellow, #FCBB1D, this palette immediately evokes images of jukeboxes and chrome accents. Two distinct teals, the deeper #2B7A7A and the brighter #3AAFB9, add a refreshing, almost neon glow, reminiscent of diner lighting. A clean, near-white gray, #EBEBEB, provides a neutral backdrop, allowing the more energetic hues to pop. Designers and developers can leverage this palette to create engaging, nostalgic, and energetic digital or physical experiences. It’s perfect for projects requiring a playful yet sophisticated retro aesthetic.

Best used for

Retro branding and logos
Restaurant and cafe interior design
Event posters and flyers with a vintage theme
Arcade game user interfaces and assets
Vintage-inspired apparel and merchandise
Fun and energetic mobile application themes

Suggested color roles

primary

Use #E03616 as the dominant energetic force, ideal for main headings, bold buttons, or large branding elements that demand attention.

secondary

Employ #FCBB1D for cheerful accents, highlights, or secondary branding elements that complement the primary red without overpowering it.

accent

Apply #3AAFB9 as a vibrant, almost neon highlight for interactive elements, hover states, or graphic details that require a modern retro pop.

background

Utilize #EBEBEB as a clean, neutral canvas, providing excellent contrast for all other colors and keeping the design airy and bright.

text

For body text and readability, #2B7A7A offers strong contrast against light backgrounds like #EBEBEB, providing a sophisticated alternative to black. For darker backgrounds, use a crisp white.

Accessibility notes

Ensure sufficient contrast when pairing #E03616 or #FCBB1D as text colors on light backgrounds; they are better suited for larger display text or accents.
The combination of #2B7A7A text on #EBEBEB background provides excellent readability for body copy.
Be mindful of contrast when using #3AAFB9 for small text; it may require a darker background or larger font size to meet accessibility standards.
Avoid using #FCBB1D for critical information or small text on a white or light gray background due to potential low contrast issues.

Recommended combinations

Classic Diner

Ideal for main branding, menu designs, and bold headlines that capture a traditional 50s feel.

#E03616 · #FCBB1D · #EBEBEB

Neon Glow

Perfect for UI elements, interactive states, or modern retro designs where a cool, luminous effect is desired.

#3AAFB9 · #2B7A7A · #EBEBEB

Vibrant Accent

Use for call-to-action buttons, vibrant illustrations, or sections that need to pop with energetic, contrasting colors.

#E03616 · #3AAFB9 · #FCBB1D

CSS variables

:root {
  --neon-chrome-diner-1: #E03616;
  --neon-chrome-diner-2: #FCBB1D;
  --neon-chrome-diner-3: #2B7A7A;
  --neon-chrome-diner-4: #3AAFB9;
  --neon-chrome-diner-5: #EBEBEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "neon-chrome-diner": {
        1: "#E03616",
        2: "#FCBB1D",
        3: "#2B7A7A",
        4: "#3AAFB9",
        5: "#EBEBEB",
      }
    }
  }
}

Hex values

Color 1#E03616

Color 2#FCBB1D

Color 3#2B7A7A

Color 4#3AAFB9

Color 5#EBEBEB

Accessibility

Contrast checker

2.6:1Fail

1.1:1Fail

1.7:1Fail

3.7:1AA18

2.6:1Fail

2.9:1Fail

1.5:1Fail

1.4:1Fail

1.1:1Fail

2.9:1Fail

1.9:1Fail

4.2:1AA18

1.7:1Fail

1.5:1Fail

1.9:1Fail

2.2:1Fail

3.7:1AA18

1.4:1Fail

4.2:1AA18

2.2:1Fail

Similar palettes

More like Neon Chrome Diner