Palette

Atomic Age Diner

A playful explosion of primary colors reminiscent of classic 1950s diners, vibrant comic books, and kitschy advertisements.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Atomic Age 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 Atomic Age Diner.

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

Data visualization

#E20032#FFC300#00A5CF#C3F030#0A2463

Palette guide

How to use Atomic Age Diner

Overview

The Atomic Age Diner palette is a playful explosion of primary colors reminiscent of classic 1950s diners, vibrant comic books, and kitschy advertisements. Featuring the bright red #E20032, sunny yellow #FFC300, electric blue #00A5CF, and energetic lime green #C3F030, all anchored by the deep navy #0A2463. This vibrant and retro collection is perfect for designers and developers aiming to create bold, energetic, and nostalgic digital experiences. It offers strong contrasts and a cheerful mood, ideal for branding, interfaces, or print materials that demand immediate attention and a fun, vintage feel.

Best used for

Retro restaurant branding
Playful product packaging
Children's toy marketing
Dynamic event posters
Vintage-themed websites
Comic book art and designs

Suggested color roles

primary

#E20032 serves as a bold, energetic primary color, ideal for main headings and call-to-action buttons.

secondary

#00A5CF provides a bright, playful contrast, excellent for secondary information or navigation.

accent

#FFC300 offers a sunny, inviting pop, perfect for icons, illustrations, or interactive elements.

background

#0A2463 creates a deep, contrasting background, allowing brighter elements to truly stand out. Alternatively, a crisp white can be used.

text

#FFC300 works beautifully for bright text on dark backgrounds like #0A2463, while a dark charcoal ensures readability on lighter backgrounds.

Accessibility notes

Ensure high contrast for text on vibrant backgrounds, especially #FFC300 on #0A2463.
Avoid using too many bright colors together to prevent visual clutter and maintain readability.
Test for color blindness compatibility, particularly with red-green combinations like #E20032 and #C3F030.
Provide clear focus states for interactive elements, utilizing a distinct color from the palette.

Recommended combinations

Diner Pop

A classic retro combination, offering strong contrast for headers and key design elements.

#0A2463 · #E20032 · #FFC300

Playful Contrast

Creates a lively and cheerful mood, suitable for playful interfaces or children's branding.

#00A5CF · #C3F030 · #E20032

Retro Energy

A vibrant and energetic mix, ideal for marketing materials or dynamic digital displays.

#FFC300 · #E20032 · #00A5CF

CSS variables

:root {
  --atomic-age-diner-1: #E20032;
  --atomic-age-diner-2: #FFC300;
  --atomic-age-diner-3: #00A5CF;
  --atomic-age-diner-4: #C3F030;
  --atomic-age-diner-5: #0A2463;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-age-diner": {
        1: "#E20032",
        2: "#FFC300",
        3: "#00A5CF",
        4: "#C3F030",
        5: "#0A2463",
      }
    }
  }
}

Hex values

Color 1#E20032

Color 2#FFC300

Color 3#00A5CF

Color 4#C3F030

Color 5#0A2463

Accessibility

Contrast checker

3.1:1AA18

1.7:1Fail

3.7:1AA18

3:1Fail

3.1:1AA18

1.8:1Fail

1.2:1Fail

9:1AAA

1.7:1Fail

1.8:1Fail

2.2:1Fail

5:1AA

3.7:1AA18

1.2:1Fail

2.2:1Fail

10.9:1AAA

3:1Fail

9:1AAA

5:1AA

10.9:1AAA

Similar palettes

More like Atomic Age Diner

View all vibrant

Nostalgic Soda Fountain