Back to palettes

Palette

Mid-Century Atomic Pop

Bold, contrasting colors celebrating the energetic and stylish era of mid-century design.

vibrantretro5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mid-Century Atomic Pop 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 Mid-Century Atomic Pop.

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

Data visualization

#F15A24#FFC82F#00A8C6#EC008C#6E00B6

Palette guide

How to use Mid-Century Atomic Pop

Overview

The Mid-Century Atomic Pop palette explodes with bold, contrasting colors, celebrating the energetic and stylish era of mid-century design with a vibrant twist. Featuring standout hues like the fiery #F15A24, the sunny #FFC82F, and the electric #00A8C6, this palette is a designer's dream for high-impact projects. Developers can integrate these vivid tones to create dynamic user interfaces, playful branding, and engaging digital experiences. It’s perfect for capturing attention and conveying a sense of fun, creativity, and retro-futuristic flair, reminiscent of pop art and atomic-age aesthetics.

Best used for

  • Retro-themed branding and advertising campaigns
  • Playful websites and mobile applications
  • Children's product packaging and toy design
  • Event posters and promotional materials
  • Creative art installations and digital graphics
  • Fashion and apparel collections with a vintage edge

Suggested color roles

primary

#F15A24 - A bold, energetic orange, ideal for main calls to action, headers, or dominant brand accents that demand attention.

secondary

#00A8C6 - A vivid, contrasting blue, perfect for balancing the warmth of the orange, used in navigation or secondary interactive elements.

accent

#EC008C - A hot, striking pink, excellent for high-impact highlights, interactive states, or decorative patterns that pop.

background

White, a very light neutral grey, or even black to allow these vibrant colors to truly stand out and create maximum visual impact.

text

Black or a very dark charcoal for primary text on light backgrounds. For dark backgrounds, #FFC82F or pure white ensures readability.

Accessibility notes

  • Use these vibrant colors primarily for accents, graphics, and large headings, not for small body text.
  • Ensure high contrast between text and background, typically using black or white with these bright hues for readability.
  • Avoid placing vibrant colors directly adjacent to each other for text without sufficient contrast.
  • Consider color blindness compatibility, as some bright color combinations can be challenging for certain users.

Recommended combinations

Retro Blast

High-energy combination of orange, blue, and yellow for a dynamic, attention-grabbing design.

#F15A24 · #00A8C6 · #FFC82F

Atomic Glam

A bold and playful mix of pink, purple, and blue for a glamorous, retro-futuristic feel.

#EC008C · #6E00B6 · #00A8C6

Pop Art

Warm and energetic blend of yellow, orange, and pink, perfect for a vibrant, pop art aesthetic.

#FFC82F · #F15A24 · #EC008C

CSS variables

:root {
  --mid-century-atomic-pop-1: #F15A24;
  --mid-century-atomic-pop-2: #FFC82F;
  --mid-century-atomic-pop-3: #00A8C6;
  --mid-century-atomic-pop-4: #EC008C;
  --mid-century-atomic-pop-5: #6E00B6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mid-century-atomic-pop": {
        1: "#F15A24",
        2: "#FFC82F",
        3: "#00A8C6",
        4: "#EC008C",
        5: "#6E00B6",
      }
    }
  }
}

Related searches

mid-century vibrant colorsatomic retro palettepop art color schemebold 1950s designenergetic vintage palette

Palette colors

Hex values

Color 1#F15A24
·
Color 2#FFC82F
·
Color 3#00A8C6
·
Color 4#EC008C
·
Color 5#6E00B6
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
1.2:1Fail
1.3:1Fail
2.7:1Fail
2
2.2:1Fail
1.8:1Fail
2.7:1Fail
5.8:1AA
3
1.2:1Fail
1.8:1Fail
1.5:1Fail
3.2:1AA18
4
1.3:1Fail
2.7:1Fail
1.5:1Fail
2.1:1Fail
5
2.7:1Fail
5.8:1AA
3.2:1AA18
2.1:1Fail

Similar palettes

More like Mid-Century Atomic Pop

View all vibrant
Atomic Era Splash
Atomic Age Diner
Diner Jukebox Beat
Nostalgic Soda Fountain
Nostalgic Soda Pop
Retro Atomic Blast