Atomic Age Color Palette

Eames-era cool: peacock teal, mustard, burnt orange, and avocado olive over a bone-cream base. More composed and design-forward than full-tilt seventies, balancing warm and cool for that atomic-age, Palm-Springs-living-room feel. For retro-modern branding, furniture and decor, and clean vintage posters.

Get Paintrix free on the App Store.

Download

Hex codes

Color theory

Base
Complement
Analogous −30°
Analogous +30°
Triadic

Use it for

retro-modern brandingdecorvintage posterspackaging

Code formats

CSS
:root {
  --mid-century-modern-1: #EDE4CF;
  --mid-century-modern-2: #E1D5B8;
  --mid-century-modern-3: #D3C49E;
  --mid-century-modern-4: #C2AF80;
  --mid-century-modern-5: #AF9A66;
  --mid-century-modern-6: #9A8550;
  --mid-century-modern-7: #2E8C8A;
  --mid-century-modern-8: #287D7C;
  --mid-century-modern-9: #226E6E;
  --mid-century-modern-10: #1C5F60;
  --mid-century-modern-11: #175152;
  --mid-century-modern-12: #124344;
  --mid-century-modern-13: #D2A33E;
  --mid-century-modern-14: #C19234;
  --mid-century-modern-15: #B0812B;
  --mid-century-modern-16: #9C7023;
  --mid-century-modern-17: #88601C;
  --mid-century-modern-18: #745015;
  --mid-century-modern-19: #C46036;
  --mid-century-modern-20: #B2542F;
  --mid-century-modern-21: #A04828;
  --mid-century-modern-22: #8C3D22;
  --mid-century-modern-23: #78321C;
  --mid-century-modern-24: #642816;
  --mid-century-modern-25: #7E7E3E;
  --mid-century-modern-26: #717235;
  --mid-century-modern-27: #64652D;
  --mid-century-modern-28: #575926;
  --mid-century-modern-29: #4A4D1F;
  --mid-century-modern-30: #3D4018;
}
SCSS
$mid-century-modern-1: #EDE4CF;
$mid-century-modern-2: #E1D5B8;
$mid-century-modern-3: #D3C49E;
$mid-century-modern-4: #C2AF80;
$mid-century-modern-5: #AF9A66;
$mid-century-modern-6: #9A8550;
$mid-century-modern-7: #2E8C8A;
$mid-century-modern-8: #287D7C;
$mid-century-modern-9: #226E6E;
$mid-century-modern-10: #1C5F60;
$mid-century-modern-11: #175152;
$mid-century-modern-12: #124344;
$mid-century-modern-13: #D2A33E;
$mid-century-modern-14: #C19234;
$mid-century-modern-15: #B0812B;
$mid-century-modern-16: #9C7023;
$mid-century-modern-17: #88601C;
$mid-century-modern-18: #745015;
$mid-century-modern-19: #C46036;
$mid-century-modern-20: #B2542F;
$mid-century-modern-21: #A04828;
$mid-century-modern-22: #8C3D22;
$mid-century-modern-23: #78321C;
$mid-century-modern-24: #642816;
$mid-century-modern-25: #7E7E3E;
$mid-century-modern-26: #717235;
$mid-century-modern-27: #64652D;
$mid-century-modern-28: #575926;
$mid-century-modern-29: #4A4D1F;
$mid-century-modern-30: #3D4018;
Tailwind
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'mid-century-modern': {
          '1': '#EDE4CF',
          '2': '#E1D5B8',
          '3': '#D3C49E',
          '4': '#C2AF80',
          '5': '#AF9A66',
          '6': '#9A8550',
          '7': '#2E8C8A',
          '8': '#287D7C',
          '9': '#226E6E',
          '10': '#1C5F60',
          '11': '#175152',
          '12': '#124344',
          '13': '#D2A33E',
          '14': '#C19234',
          '15': '#B0812B',
          '16': '#9C7023',
          '17': '#88601C',
          '18': '#745015',
          '19': '#C46036',
          '20': '#B2542F',
          '21': '#A04828',
          '22': '#8C3D22',
          '23': '#78321C',
          '24': '#642816',
          '25': '#7E7E3E',
          '26': '#717235',
          '27': '#64652D',
          '28': '#575926',
          '29': '#4A4D1F',
          '30': '#3D4018',
        },
      },
    },
  },
};
JSON
{
  "name": "Atomic Age",
  "colors": [
    "#EDE4CF",
    "#E1D5B8",
    "#D3C49E",
    "#C2AF80",
    "#AF9A66",
    "#9A8550",
    "#2E8C8A",
    "#287D7C",
    "#226E6E",
    "#1C5F60",
    "#175152",
    "#124344",
    "#D2A33E",
    "#C19234",
    "#B0812B",
    "#9C7023",
    "#88601C",
    "#745015",
    "#C46036",
    "#B2542F",
    "#A04828",
    "#8C3D22",
    "#78321C",
    "#642816",
    "#7E7E3E",
    "#717235",
    "#64652D",
    "#575926",
    "#4A4D1F",
    "#3D4018"
  ]
}
Hex list
#EDE4CF
#E1D5B8
#D3C49E
#C2AF80
#AF9A66
#9A8550
#2E8C8A
#287D7C
#226E6E
#1C5F60
#175152
#124344
#D2A33E
#C19234
#B0812B
#9C7023
#88601C
#745015
#C46036
#B2542F
#A04828
#8C3D22
#78321C
#642816
#7E7E3E
#717235
#64652D
#575926
#4A4D1F
#3D4018

Related palettes

Copied