Back to palettes

Palette

Atomic Age Retro Cool

Bold, balanced tones inspired by the iconic aesthetics of mid-century design and atomic age optimism.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F2CC8F#E07A5F#3D405B#81B29A#F2CC8F

Palette guide

How to use Atomic Age Retro Cool

Overview

The Atomic Age Retro Cool palette features bold, balanced tones inspired by the iconic aesthetics of mid-century design and atomic age optimism. With a deep blue-gray #3D405B as its anchor, it's complemented by the energetic burnt orange #E07A5F, refreshing sage green #81B29A, and a light peach/yellow #F2CC8F. This nostalgic collection is perfect for designers and developers looking to evoke a sense of the 1960s. It offers a harmonious yet vibrant feel, ideal for retro posters, vintage branding, or modern interfaces with a classic twist, blending coolness with a touch of warmth.

Best used for

  • Retro poster and print design
  • Vintage product branding
  • Mid-century inspired interiors
  • Nostalgic app interfaces
  • Graphic design projects
  • Art prints and illustrations

Suggested color roles

primary

#3D405B serves as a deep, foundational blue, ideal for main headings and structural elements.

secondary

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

accent

#F2CC8F offers a light, inviting highlight, perfect for subtle accents, icons, or interactive elements.

background

#F2CC8F creates a soft, retro base, ensuring readability for darker text. Alternatively, use a crisp off-white.

text

#3D405B 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, especially #3D405B on #F2CC8F, to meet WCAG AA standards.
  • Avoid using #F2CC8F for small text on similarly light backgrounds due to potential low contrast.
  • Test legibility of muted tones across various screen types and lighting conditions.
  • Provide clear visual cues for interactive elements, possibly using a brighter accent for hover states.

Recommended combinations

Retro Balance

A balanced combination for classic layouts, providing clear contrast and a nostalgic feel.

#F2CC8F · #E07A5F · #3D405B

Cool Contrast

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

#81B29A · #3D405B · #E07A5F

Nostalgic Blend

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

#E07A5F · #F2CC8F · #81B29A

CSS variables

:root {
  --atomic-age-retro-cool-1: #F2CC8F;
  --atomic-age-retro-cool-2: #E07A5F;
  --atomic-age-retro-cool-3: #3D405B;
  --atomic-age-retro-cool-4: #81B29A;
  --atomic-age-retro-cool-5: #F2CC8F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-age-retro-cool": {
        1: "#F2CC8F",
        2: "#E07A5F",
        3: "#3D405B",
        4: "#81B29A",
        5: "#F2CC8F",
      }
    }
  }
}

Related searches

atomic age paletteretro cool colorsmid-century modern aestheticnostalgic design scheme60s inspired colors

Palette colors

Hex values

Color 1#F2CC8F
·
Color 2#E07A5F
·
Color 3#3D405B
·
Color 4#81B29A
·
Color 5#F2CC8F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
6.6:1AA
1.6:1Fail
1:1Fail
2
1.9:1Fail
3.4:1AA18
1.2:1Fail
1.9:1Fail
3
6.6:1AA
3.4:1AA18
4.2:1AA18
6.6:1AA
4
1.6:1Fail
1.2:1Fail
4.2:1AA18
1.6:1Fail
5
1:1Fail
1.9:1Fail
6.6:1AA
1.6:1Fail

Similar palettes

More like Atomic Age Retro Cool

View all vibrant
Atomic Era Splash
Diner Jukebox Pop
Mid-Century Atomic Pop
Retro Atomic Blast
Retro Atomic Era
Retro Drive-In