Palette

Retro Atomic Era

Inspired by the bold, contrasting colors and futuristic flair of 1950s atomic age design.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Retro Atomic Era 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 Atomic Era.

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

Data visualization

#CC3300#FFCC00#009999#E6E6FA#666666

Palette guide

How to use Retro Atomic Era

Overview

The "Retro Atomic Era" palette channels the bold, contrasting, and optimistic spirit of 1950s atomic age design. It features a striking #CC3300 (dark red-orange) paired with a sunny #FFCC00 (amber yellow), creating an immediate sense of warmth and energy. The cool, sophisticated #009999 (teal) introduces a refreshing contrast, while #E6E6FA (lavender blush) provides a soft, airy counterbalance. The grounding #666666 (dark gray) offers a modern anchor. Designers can utilize this palette for projects that demand a vintage flair with a touch of futuristic optimism. Developers will find these hex codes perfect for designing distinctive UIs, nostalgic branding, and content that resonates with mid-century charm.

Best used for

Vintage product packaging
Diner or cafe branding
Retro-themed event decor
Home goods and textile design
Educational materials on history
Website headers with a classic feel

Suggested color roles

primary

#CC3300 (A rich, warm red-orange, commanding attention for main headings, calls to action, or key brand elements.)

secondary

#009999 (A cool, calming teal, excellent for supporting content, navigation, or secondary interactive elements.)

accent

#FFCC00 (A cheerful amber yellow, perfect for highlights, icons, or small details that need a sunny pop.)

background

#E6E6FA (A very light lavender blush, providing a soft, spacious, and inviting canvas for the bolder colors.)

text

#666666 (A versatile dark gray, offering excellent readability for body text on light backgrounds, or use white on dark colors.)

Accessibility notes

#CC3300 (dark red-orange) and #009999 (teal) offer strong contrast for text on #E6E6FA (lavender blush) backgrounds.
Ensure that #FFCC00 (amber yellow) text has sufficient contrast when used on light backgrounds; it's best for accents.
#666666 (dark gray) is an excellent choice for body text on light backgrounds, ensuring high readability.
Avoid pairing #CC3300 (dark red-orange) directly with #FFCC00 (amber yellow) for critical text due to potential issues for some color vision deficiencies.

Recommended combinations

Atomic Energy

Ideal for bold headlines, playful illustrations, or elements that need to convey dynamism and warmth.

#CC3300 · #FFCC00 · #009999

Mid-Century Modern

Excellent for clean layouts, professional branding, or designs aiming for a sophisticated yet retro feel.

#E6E6FA · #009999 · #666666

Vintage Pop

Use for product packaging, nostalgic advertisements, or any design requiring a friendly, inviting, and classic aesthetic.

#CC3300 · #E6E6FA · #FFCC00

CSS variables

:root {
  --retro-atomic-era-1: #CC3300;
  --retro-atomic-era-2: #FFCC00;
  --retro-atomic-era-3: #009999;
  --retro-atomic-era-4: #E6E6FA;
  --retro-atomic-era-5: #666666;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "retro-atomic-era": {
        1: "#CC3300",
        2: "#FFCC00",
        3: "#009999",
        4: "#E6E6FA",
        5: "#666666",
      }
    }
  }
}

Hex values

Color 1#CC3300

Color 2#FFCC00

Color 3#009999

Color 4#E6E6FA

Color 5#666666

Accessibility

Contrast checker

3.4:1AA18

1.5:1Fail

4.2:1AA18

1.1:1Fail

3.4:1AA18

2.3:1Fail

1.2:1Fail

3.8:1AA18

1.5:1Fail

2.3:1Fail

2.8:1Fail

1.6:1Fail