Back to palettes

Palette

Atomic Age

Bold and playful, a fusion of mid-century modern optimism and atomic age design influences.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EF5350#EC407A#AB47BC#7E57C2#5C6BC0

Palette guide

How to use Atomic Age

Overview

The Atomic Age palette is bold and playful, a fusion of mid-century modern optimism and atomic age design influences. It features a vibrant gradient from the bright coral red #EF5350 and energetic pink #EC407A, through the rich amethyst of #AB47BC and lavender purple of #7E57C2, to the cool periwinkle blue of #5C6BC0. This vibrant and futuristic collection is perfect for designers and developers creating pop art, retro-futuristic themes, or playful app interfaces. It offers dynamic contrasts and a cheerful mood, ideal for branding, interfaces, or print materials that demand immediate attention and a fun, modern vintage feel.

Best used for

  • Pop art and retro-futuristic designs
  • Vibrant event branding
  • Playful app interfaces
  • Creative marketing materials
  • Children's media and entertainment
  • Bold graphic design projects

Suggested color roles

primary

#7E57C2 serves as a bold, futuristic primary color, ideal for main headings and structural elements.

secondary

#EF5350 adds an energetic, warm contrast, excellent for call-to-actions or prominent features.

accent

#EC407A offers a vibrant, playful pop, perfect for icons, illustrations, or interactive elements.

background

#5C6BC0 creates a soft, cool base, ensuring readability for darker text. Alternatively, use a crisp white.

text

#AB47BC ensures optimal legibility for primary text on lighter backgrounds, or use a deep charcoal for general body copy.

Accessibility notes

  • Ensure sufficient contrast for text on vibrant backgrounds, especially #AB47BC on #5C6BC0.
  • Avoid using too many bright colors together to prevent visual clutter and maintain readability.
  • Test for color blindness compatibility, particularly with pink and purple shades.
  • Provide clear focus states for interactive elements, utilizing a distinct color from the palette.

Recommended combinations

Retro Pop

A vibrant combination for dynamic layouts, providing clear contrast and a playful feel.

#5C6BC0 · #EF5350 · #EC407A

Futuristic Flow

Highlights cool tones with a warm accent, suitable for distinctive sections or branding.

#AB47BC · #7E57C2 · #EF5350

Vibrant Blend

Creates a harmonious blend of warm and cool, perfect for layered designs or subtle branding.

#EC407A · #7E57C2 · #5C6BC0

CSS variables

:root {
  --atomic-age-1: #EF5350;
  --atomic-age-2: #EC407A;
  --atomic-age-3: #AB47BC;
  --atomic-age-4: #7E57C2;
  --atomic-age-5: #5C6BC0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-age": {
        1: "#EF5350",
        2: "#EC407A",
        3: "#AB47BC",
        4: "#7E57C2",
        5: "#5C6BC0",
      }
    }
  }
}

Related searches

atomic age retrobold pink purplefuturistic color schememid-century pop artvibrant creative palette

Palette colors

Hex values

Color 1#EF5350
·
Color 2#EC407A
·
Color 3#AB47BC
·
Color 4#7E57C2
·
Color 5#5C6BC0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.4:1Fail
1.5:1Fail
1.4:1Fail
2
1.1:1Fail
1.3:1Fail
1.4:1Fail
1.3:1Fail
3
1.4:1Fail
1.3:1Fail
1.1:1Fail
1:1Fail
4
1.5:1Fail
1.4:1Fail
1.1:1Fail
1.1:1Fail
5
1.4:1Fail
1.3:1Fail
1:1Fail
1.1:1Fail

Similar palettes

More like Atomic Age

View all vibrant
Synthwave Pink Dream
Synthwave Sundown Grid
Vaporwave Ocean Drive
Diner Booth Vinyl
Electric Grapevine
Jukebox Junction