Back to palettes

Palette

Atomic Era Pulse

Cool blues and teals evoke the optimistic, clean lines of mid-century atomic-era sci-fi.

coolretro5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#D4F6FF#8EDEEB#4DB7C2#2E909B#1C6B71

Palette guide

How to use Atomic Era Pulse

Overview

The Atomic Era Pulse palette features cool blues and teals that evoke the optimistic, clean lines of mid-century atomic-era sci-fi. Ranging from the lightest blue of #D4F6FF, through vibrant #8EDEEB and #4DB7C2, to the deeper teals of #2E909B and #1C6B71. This cool and futuristic collection is perfect for designers and developers crafting sci-fi interfaces, tech branding, or minimalist web designs. It offers a sense of calm, precision, and forward-thinking elegance, ideal for projects requiring a sleek, modern, and optimistic aesthetic.

Best used for

  • Sci-fi user interfaces
  • Tech brand identities
  • Minimalist web design
  • Mid-century modern interiors
  • Clean product design
  • Futuristic digital illustrations

Suggested color roles

primary

#1C6B71 serves as a deep, foundational teal, ideal for main headings and structural elements.

secondary

#2E909B provides supportive, cool blue, excellent for subheadings or secondary content blocks.

accent

#8EDEEB offers a bright, refreshing highlight, perfect for icons, interactive elements, or decorative details.

background

#D4F6FF creates an airy, clean, and light background, ensuring excellent readability for darker text.

text

#1C6B71 ensures optimal legibility for primary text on lighter backgrounds, or a dark charcoal for general body copy.

Accessibility notes

  • Ensure sufficient contrast for text, especially #1C6B71 on #D4F6FF, to meet WCAG AA standards.
  • Avoid using lighter shades like #8EDEEB for small text on #D4F6FF backgrounds due to potential low contrast.
  • Test legibility of lighter shades for secondary text, ensuring they remain readable.
  • Provide clear visual cues for interactive elements, possibly using a slightly darker shade for hover states.

Recommended combinations

Sci-Fi Clean

A balanced combination for clean, modern layouts, providing clear contrast and visual structure.

#D4F6FF · #4DB7C2 · #1C6B71

Cool Pulse

Highlights cool, vibrant tones, suitable for accentuating key features or adding a dynamic touch.

#8EDEEB · #2E909B · #1C6B71

Modern Teal

Creates a harmonious blend of teals, perfect for layered designs or subtle branding.

#4DB7C2 · #8EDEEB · #2E909B

CSS variables

:root {
  --atomic-era-pulse-1: #D4F6FF;
  --atomic-era-pulse-2: #8EDEEB;
  --atomic-era-pulse-3: #4DB7C2;
  --atomic-era-pulse-4: #2E909B;
  --atomic-era-pulse-5: #1C6B71;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-era-pulse": {
        1: "#D4F6FF",
        2: "#8EDEEB",
        3: "#4DB7C2",
        4: "#2E909B",
        5: "#1C6B71",
      }
    }
  }
}

Related searches

atomic era bluesci-fi teal palettemid-century cool colorsclean futuristic designoptimistic tech UI

Palette colors

Hex values

Color 1#D4F6FF
·
Color 2#8EDEEB
·
Color 3#4DB7C2
·
Color 4#2E909B
·
Color 5#1C6B71
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.1:1Fail
3.3:1AA18
5.4:1AA
2
1.3:1Fail
1.6:1Fail
2.5:1Fail
4.1:1AA18
3
2.1:1Fail
1.6:1Fail
1.6:1Fail
2.6:1Fail
4
3.3:1AA18
2.5:1Fail
1.6:1Fail
1.6:1Fail
5
5.4:1AA
4.1:1AA18
2.6:1Fail
1.6:1Fail

Similar palettes

More like Atomic Era Pulse

View all cool
Faded Denim Blues
Faded Denim Days
Faded Denim Patina
Mid-Century Aqua Teal
Retro Architect Palette
Retro Diner Blues