Palette

Atomic Age Mod

A sophisticated and warm palette reminiscent of classic mid-century design and cool atomic-era aesthetics.

retroretro5 colors

More retro palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#6a7a78#c17a58#e3b15a#efe7dc#4d3f3f

Palette guide

How to use Atomic Age Mod

Overview

The Atomic Age Mod palette is a sophisticated and warm collection reminiscent of classic mid-century design and cool atomic-era aesthetics. It features muted yet rich tones like the teal-gray #6a7a78, the burnt orange #c17a58, and the inviting mustard yellow #e3b15a. Anchored by the deep brown #4d3f3f and softened by the off-white #efe7dc, this vintage-inspired palette is perfect for designers and developers creating elegant web experiences, retro branding, or sophisticated interior concepts. It offers a timeless appeal with its balanced blend of cool and warm, muted colors.

Best used for

Mid-century modern interiors
Vintage brand identities
Retro fashion editorials
Elegant product design
Sophisticated web themes
Coffee shop aesthetics

Suggested color roles

primary

#4d3f3f serves as a deep, grounding primary color, ideal for main headings and foundational elements.

secondary

#6a7a78 provides a muted, cool contrast, excellent for subheadings or secondary content blocks.

accent

#e3b15a offers a warm, inviting pop, perfect for subtle accents, interactive elements, or decorative details.

background

#efe7dc creates a soft, vintage cream background, ensuring excellent readability for darker text.

text

#4d3f3f ensures optimal legibility for primary text on lighter backgrounds, or use a dark charcoal for general body copy.

Accessibility notes

Ensure sufficient contrast for text, especially #4d3f3f on #efe7dc, to meet WCAG AA standards.
Avoid using lighter muted tones for small text on #efe7dc backgrounds due to potential low contrast.
Test legibility of all colors across various screen types, as muted tones can sometimes be challenging.
Provide clear visual cues for interactive elements, possibly using a brighter accent for hover states.

Recommended combinations

Mod Elegance

A sophisticated and balanced combination for clean layouts, providing clear contrast and vintage charm.

#EFE7DC · #6A7A78 · #4D3F3F

Warm Retro

Highlights warm, inviting tones, suitable for accentuating key features or adding a cozy feel.

#C17A58 · #E3B15A · #4D3F3F

Vintage Blend

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

#6A7A78 · #C17A58 · #EFE7DC

CSS variables

:root {
  --atomic-age-mod-1: #6a7a78;
  --atomic-age-mod-2: #c17a58;
  --atomic-age-mod-3: #e3b15a;
  --atomic-age-mod-4: #efe7dc;
  --atomic-age-mod-5: #4d3f3f;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "atomic-age-mod": {
        1: "#6a7a78",
        2: "#c17a58",
        3: "#e3b15a",
        4: "#efe7dc",
        5: "#4d3f3f",
      }
    }
  }
}

Hex values

Color 1#6a7a78

Color 2#c17a58

Color 3#e3b15a

Color 4#efe7dc

Color 5#4d3f3f

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

3.7:1AA18

2.2:1Fail

1.3:1Fail

1.7:1Fail

2.8:1Fail

3:1Fail

2.3:1Fail

1.7:1Fail

1.6:1Fail

5.1:1AA

3.7:1AA18

2.8:1Fail

1.6:1Fail

8.2:1AAA

2.2:1Fail

3:1Fail

5.1:1AA

8.2:1AAA

Similar palettes

More like Atomic Age Mod

View all retro

Mid-Century Fabric Pop

Mid-Century Mod Comfort

Mid-century Sunset

Midcentury Lounge Vibes

Retro Kitchen Tile

Vintage Film Grain