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
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