Back to palettes

Palette

Atomic Age Vibe

A nostalgic nod to mid-century aesthetics, with a cool yet optimistic vintage feel.

retroretro5 colors
More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3F888F#F7B32B#6F7E50#E396A6#EFE8D8

Palette guide

How to use Atomic Age Vibe

Overview

The Atomic Age Vibe palette is a nostalgic nod to mid-century aesthetics, with a cool yet optimistic vintage feel. It features the grounding teal of #3F888F, vibrant golden yellow #F7B32B, subtle olive green #6F7E50, and a muted pink #E396A6, all softened by the warm cream of #EFE8D8. This palette is perfect for designers and developers crafting vintage-inspired illustrations, mid-century branding, or stylish web backgrounds. It offers a balanced blend of cool and warm tones, evoking a sense of nostalgia while remaining fresh and modern, ideal for graphic and web projects.

Best used for

  • Vintage illustration and art
  • Mid-century branding projects
  • Retro fashion and apparel
  • Graphic design layouts
  • Stylish web backgrounds
  • Nostalgic product packaging

Suggested color roles

primary

#3F888F serves as a cool, grounding primary color, ideal for main headings and foundational elements.

secondary

#F7B32B provides a bright, optimistic accent, excellent for call-to-actions or prominent features.

accent

#E396A6 offers a soft, playful highlight, perfect for subtle accents, icons, or decorative details.

background

#EFE8D8 creates a warm, vintage cream background, ensuring excellent readability for darker text.

text

#3F888F 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 #3F888F on #EFE8D8, to meet WCAG AA standards.
  • Avoid using #E396A6 for small text on #EFE8D8 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

Vintage Harmony

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

#EFE8D8 · #3F888F · #F7B32B

Retro Pop

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

#F7B32B · #E396A6 · #3F888F

Mid-century Modern

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

#6F7E50 · #3F888F · #EFE8D8

CSS variables

:root {
  --atomic-age-vibe-1: #3F888F;
  --atomic-age-vibe-2: #F7B32B;
  --atomic-age-vibe-3: #6F7E50;
  --atomic-age-vibe-4: #E396A6;
  --atomic-age-vibe-5: #EFE8D8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-age-vibe": {
        1: "#3F888F",
        2: "#F7B32B",
        3: "#6F7E50",
        4: "#E396A6",
        5: "#EFE8D8",
      }
    }
  }
}

Related searches

atomic age colorsmid-century vibe paletteretro graphic designnostalgic brand identityvintage modern scheme

Palette colors

Hex values

Color 1#3F888F
·
Color 2#F7B32B
·
Color 3#6F7E50
·
Color 4#E396A6
·
Color 5#EFE8D8
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.1:1Fail
1.8:1Fail
3.4:1AA18
2
2.2:1Fail
2.4:1Fail
1.2:1Fail
1.5:1Fail
3
1.1:1Fail
2.4:1Fail
1.9:1Fail
3.6:1AA18
4
1.8:1Fail
1.2:1Fail
1.9:1Fail
1.9:1Fail
5
3.4:1AA18
1.5:1Fail
3.6:1AA18
1.9:1Fail

Similar palettes

More like Atomic Age Vibe

View all retro
Atomic Age Mod
Diner Booth Nostalgia
Mid-Century Fabric Pop
Mid-Century Mod Comfort
Mid-century Sunset
Midcentury Lounge Vibes