Palette

Retro Diner Booth

Bold, clashing colors that transport you back to a lively 1950s American diner experience.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0055#00FFCC#FFD300#3E5F8A#282828

Palette guide

How to use Retro Diner Booth

Overview

The Retro Diner Booth palette is a bold and clashing collection that transports you back to a lively 1950s American diner. Featuring electric #FF0055 (bright pink/red), vibrant #00FFCC (teal), sunny #FFD300 (gold), a grounding #3E5F8A (dark blue), and deep #282828 (charcoal), this palette is designed for energetic, pop-art inspired designs. Designers and developers can leverage these striking colors to create dynamic, playful, and unforgettable visual experiences with a distinct vintage flair, ensuring high engagement and a memorable aesthetic.

Best used for

Pop culture branding and merchandise
Dynamic game interfaces
Retro apparel design
Lively event promotions
Creative digital art
Unique website headers

Suggested color roles

primary

#FF0055 is excellent for high-impact branding, calls-to-action, or hero elements that demand attention.

secondary

#3E5F8A provides a solid structural element, offering subtle contrast and depth to the vibrant tones.

accent

#00FFCC is a vibrant highlight, perfect for interactive states, energetic bursts, or unique decorative elements.

background

#282828 creates a dramatic, dark backdrop, while #FFD300 can be used for a bright, energetic base.

text

Use #FFD300 or white for optimal readability on dark backgrounds; use #282828 on light backgrounds.

Accessibility notes

#FF0055 and #00FFCC provide good contrast on #282828 or #3E5F8A for text readability.
#FFD300 is a bright color and needs dark text (like #282828) for optimal readability when used as a background.
Be mindful of using #00FFCC for small text as its high vibrancy can be visually intense; prefer larger sizes or bolding.
Ensure sufficient contrast for all text and interactive elements to meet WCAG accessibility standards.

Recommended combinations

Electric Pop

Ideal for bold headlines, striking illustrations, or creating an energetic, modern retro look.

#FF0055 · #00FFCC · #282828

Energetic Contrast

Excellent for UI elements, playful sections, or designs requiring a vibrant yet grounded feel.

#FFD300 · #3E5F8A · #FF0055

Dark & Vibrant

Perfect for dramatic backgrounds, featured content, or creating a high-impact visual experience.

#282828 · #FF0055 · #00FFCC

CSS variables

:root {
  --retro-diner-booth-2-1: #FF0055;
  --retro-diner-booth-2-2: #00FFCC;
  --retro-diner-booth-2-3: #FFD300;
  --retro-diner-booth-2-4: #3E5F8A;
  --retro-diner-booth-2-5: #282828;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-booth-2": {
        1: "#FF0055",
        2: "#00FFCC",
        3: "#FFD300",
        4: "#3E5F8A",
        5: "#282828",
      }
    }
  }
}

Hex values

Color 1#FF0055

Color 2#00FFCC

Color 3#FFD300

Color 4#3E5F8A

Color 5#282828

Accessibility

Contrast checker

3:1AA18

2.7:1Fail

1.7:1Fail

3.8:1AA18

3:1AA18

1.1:1Fail

5:1AA

11.4:1AAA

2.7:1Fail

1.1:1Fail

4.5:1AA

10.2:1AAA

1.7:1Fail

5:1AA

4.5:1AA

2.3:1Fail

3.8:1AA18

11.4:1AAA

10.2:1AAA

2.3:1Fail

Similar palettes

More like Retro Diner Booth

Mid-Century Atomic Pop

Nostalgic Diner Glow

Nostalgic Soda Fountain