Back to palettes

Palette

Atomic Era Splash

Bold and playful colors inspired by the vibrant, optimistic aesthetic of the Atomic Age.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF4500#32CD32#FFD700#BA55D3#87CEEB

Palette guide

How to use Atomic Era Splash

Overview

The Atomic Era Splash palette features bold and playful colors inspired by the vibrant, optimistic aesthetic of the Atomic Age. It includes the energetic orange-red #FF4500, cheerful lime green #32CD32, sunny golden yellow #FFD700, and unique medium orchid #BA55D3, all balanced by the soft sky blue #87CEEB. This dynamic and retro collection is perfect for designers and developers aiming to create lively, imaginative, and memorable digital experiences. It offers strong contrasts and a joyful mood, ideal for branding, interfaces, or print materials that demand immediate attention and a fun, vintage feel.

Best used for

  • Playful branding and identity
  • Retro advertisements and posters
  • Children's products and media
  • Event marketing materials
  • Creative art and illustration
  • Pop culture designs

Suggested color roles

primary

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

secondary

#BA55D3 provides a playful, unique contrast, excellent for secondary information or navigation.

accent

#FFD700 offers a bright, inviting pop, perfect for icons, illustrations, or interactive elements.

background

#87CEEB creates a light, cool base, ensuring readability for darker text. Alternatively, a crisp white can be used.

text

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

Accessibility notes

  • Ensure high contrast for text on vibrant backgrounds, especially #FF4500 on #87CEEB.
  • Avoid using too many bright colors next to each other to prevent visual clutter and maintain readability.
  • Test for color blindness compatibility, particularly with red-green combinations like #FF4500 and #32CD32.
  • Provide clear focus states for interactive elements, utilizing a distinct color from the palette.

Recommended combinations

Vibrant Splash

A dynamic combination for energetic layouts, providing clear contrast and a cheerful feel.

#87CEEB · #FF4500 · #FFD700

Playful Mix

Highlights vibrant and playful tones, suitable for accentuating key features or adding a lively touch.

#32CD32 · #BA55D3 · #FF4500

Atomic Pop

Creates a bold, high-contrast look, perfect for headlines or impactful design blocks.

#FFD700 · #BA55D3 · #32CD32

CSS variables

:root {
  --atomic-era-splash-1: #FF4500;
  --atomic-era-splash-2: #32CD32;
  --atomic-era-splash-3: #FFD700;
  --atomic-era-splash-4: #BA55D3;
  --atomic-era-splash-5: #87CEEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-era-splash": {
        1: "#FF4500",
        2: "#32CD32",
        3: "#FFD700",
        4: "#BA55D3",
        5: "#87CEEB",
      }
    }
  }
}

Related searches

atomic age vibrantretro pop colorsplayful bright palettedynamic mid-centuryenergetic design scheme

Palette colors

Hex values

Color 1#FF4500
·
Color 2#32CD32
·
Color 3#FFD700
·
Color 4#BA55D3
·
Color 5#87CEEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
1.1:1Fail
2:1Fail
2
1.6:1Fail
1.5:1Fail
1.9:1Fail
1.2:1Fail
3
2.5:1Fail
1.5:1Fail
2.8:1Fail
1.2:1Fail
4
1.1:1Fail
1.9:1Fail
2.8:1Fail
2.3:1Fail
5
2:1Fail
1.2:1Fail
1.2:1Fail
2.3:1Fail

Similar palettes

More like Atomic Era Splash

View all vibrant