Palette

Atomic Soda Pop

Bold and eye-catching hues that harken back to the electric energy and playful kitsch of 50s diners.

vibrantretro5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF0000#00FF00#0000FF#FFFF00#FF1493

Palette guide

How to use Atomic Soda Pop

Overview

The Atomic Soda Pop palette features bold and eye-catching hues that harken back to the electric energy and playful kitsch of 50s diners. With pure primary colors like #FF0000 (red), #00FF00 (green), #0000FF (blue), and #FFFF00 (yellow), complemented by the vibrant #FF1493 (deep pink). This energetic and pop-art inspired 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

Pop art and comic book styles
Retro brand identities
Children's toy marketing
Vibrant event promotions
Energetic digital interfaces
Playful product packaging

Suggested color roles

primary

#FF0000 serves as a bold, attention-grabbing primary color, ideal for main headings and call-to-action buttons.

secondary

#0000FF provides a classic, strong contrast, excellent for secondary information or navigation.

accent

#FFFF00 offers a bright, energetic pop, perfect for icons, illustrations, or interactive elements.

background

A crisp white provides the best backdrop for these vibrant colors to truly pop, or a dark charcoal for a more dramatic effect.

text

Black ensures optimal legibility for primary text on white backgrounds, or a contrasting primary color like #FF0000 for emphasis.

Accessibility notes

Extreme care is needed for contrast with pure primary colors; avoid using them for large blocks of text.
Test for color blindness extensively, as pure red, green, and blue can be challenging for many users.
Ensure sufficient contrast for text on vibrant backgrounds, possibly using black or white text predominantly.
Provide clear interactive states using distinct, high-contrast colors to guide users effectively.

Recommended combinations

Primary Pop

A fundamental combination for high-impact, energetic layouts, providing clear contrast.

#FF0000 · #0000FF · #FFFF00

Diner Brights

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

#FFFF00 · #00FF00 · #FF1493

Kitsch Contrast

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

#0000FF · #FF1493 · #FF0000

CSS variables

:root {
  --atomic-soda-pop-1: #FF0000;
  --atomic-soda-pop-2: #00FF00;
  --atomic-soda-pop-3: #0000FF;
  --atomic-soda-pop-4: #FFFF00;
  --atomic-soda-pop-5: #FF1493;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-soda-pop": {
        1: "#FF0000",
        2: "#00FF00",
        3: "#0000FF",
        4: "#FFFF00",
        5: "#FF1493",
      }
    }
  }
}

Hex values

Color 1#FF0000

Color 2#00FF00

Color 3#0000FF

Color 4#FFFF00

Color 5#FF1493

Accessibility

Contrast checker

2.9:1Fail

2.1:1Fail

3.7:1AA18

1.1:1Fail

2.9:1Fail

6.3:1AA

1.3:1Fail

2.7:1Fail

2.1:1Fail

6.3:1AA

8:1AAA

2.4:1Fail

3.7:1AA18

1.3:1Fail

8:1AAA

3.4:1AA18

1.1:1Fail

2.7:1Fail

2.4:1Fail

3.4:1AA18

Similar palettes

More like Atomic Soda Pop