Back to palettes

Palette

Retro Diner Booth

Punchy, classic colors that bring to mind a lively 1950s diner with vinyl booths and chrome accents.

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

#CF0A10#FBDC05#0A73AD#000000#FFFFFF

Palette guide

How to use Retro Diner Booth

Overview

The Retro Diner Booth palette offers a punchy, high-contrast take on classic 1950s Americana. With a vivid crimson (#CF0A10), bright sunny yellow (#FBDC05), and a deep, true blue (#0A73AD), this palette exudes energy and nostalgia. The inclusion of stark black (#000000) and crisp white (#FFFFFF) provides essential grounding and versatility, perfect for creating bold patterns, typography, and clean layouts. This combination is ideal for projects aiming to capture a lively, pop-art inspired retro aesthetic, suitable for branding, digital interfaces, or print media that needs to stand out with iconic flair.

Best used for

  • Vibrant retro branding
  • Pop art style graphics
  • Bold event posters
  • Fast food restaurant visuals
  • E-commerce sites with a playful vibe
  • Animated explainer videos

Suggested color roles

primary

Use #CF0A10 (Crimson) for dominant brand elements, calls to action, or headlines that demand immediate attention and recall.

secondary

Apply #FBDC05 (Yellow) for highlights, playful accents, or secondary interactive elements, bringing a cheerful, energetic feel.

accent

Leverage #0A73AD (Blue) for strategic contrast, important links, or as a strong background for specific sections, embodying classic cool.

background

Employ #FFFFFF (White) as a clean, bright canvas to make the vibrant colors pop, ensuring clarity and modern appeal.

text

Utilize #000000 (Black) for all primary text, ensuring maximum readability and a sharp, graphic quality against the bright backgrounds.

Accessibility notes

  • Ensure #000000 text on #FFFFFF background for optimal readability and WCAG AAA compliance.
  • All primary colors (#CF0A10, #FBDC05, #0A73AD) offer excellent contrast against #FFFFFF.
  • Avoid using #CF0A10 text on #FBDC05 backgrounds or vice-versa, as contrast may be insufficient for readability.
  • When using #0A73AD as a background, ensure text is #FFFFFF for good contrast.

Recommended combinations

Primary Pop

High-impact headlines, cheerful illustrations, and attention-grabbing banners.

#CF0A10 · #FBDC05 · #FFFFFF

Classic Contrast

Clean layouts with strong typography, navigation elements, and informational sections.

#0A73AD · #FFFFFF · #000000

Bold Statement

Graphic design elements, iconic logos, or striking visual accents with strong definition.

#CF0A10 · #0A73AD · #000000

CSS variables

:root {
  --retro-diner-booth-5-1: #CF0A10;
  --retro-diner-booth-5-2: #FBDC05;
  --retro-diner-booth-5-3: #0A73AD;
  --retro-diner-booth-5-4: #000000;
  --retro-diner-booth-5-5: #FFFFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-diner-booth-5": {
        1: "#CF0A10",
        2: "#FBDC05",
        3: "#0A73AD",
        4: "#000000",
        5: "#FFFFFF",
      }
    }
  }
}

Related searches

bold retro color scheme1950s diner pop colorshigh contrast vintage palettered yellow blue black white designretro graphic design colors

Palette colors

Hex values

Color 1#CF0A10
·
Color 2#FBDC05
·
Color 3#0A73AD
·
Color 4#000000
·
Color 5#FFFFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
4.1:1AA18
1.1:1Fail
3.7:1AA18
5.7:1AA
2
4.1:1AA18
3.8:1AA18
15.3:1AAA
1.4:1Fail
3
1.1:1Fail
3.8:1AA18
4.1:1AA18
5.2:1AA
4
3.7:1AA18
15.3:1AAA
4.1:1AA18
21:1AAA
5
5.7:1AA
1.4:1Fail
5.2:1AA
21:1AAA

Similar palettes

More like Retro Diner Booth

View all vibrant