Retro Color Palette: 6 Vintage Schemes (70s & 80s) with Hex Codes

A retro color palette instantly evokes nostalgia — whether it is the warm, earthy oranges and browns of the 1970s or the electric pinks and purples of 1980s synthwave. Retro is one of the most popular design directions because it feels familiar and full of personality. This guide covers both major retro eras with ready-to-use palettes and hex codes.

Pick your decade below, grab the hex codes, and drop them into your project with the copy-paste CSS. For more vintage-leaning tones, see our fall color palette and aesthetic color palettes, or browse the full PaletteCSS library.

The two faces of retro

"Retro" usually points to one of two distinct moods:

• 70s retro — warm and earthy: mustard yellow, burnt orange, avocado green, and chocolate brown. Cosy, organic, and analogue.
• 80s retro — bold and electric: hot pink, purple, teal, and chrome. This is the synthwave and Memphis-design look.

Knowing which era you are channelling keeps your palette coherent. Mixing 70s earth tones with 80s neon rarely works — pick a lane.

6 retro color palettes (with hex codes)

1. 70s Earth

The definitive warm, organic seventies look.

#D9A05B · #C1654E · #8E4B2E · #6B7A3A · #2E2A20

2. 80s Synthwave

Electric sunset gradient — pure retro-future.

#F72585 · #B5179E · #7209B7 · #3A0CA3 · #4361EE

3. Vintage Pastel

Faded, sun-bleached tones for a soft retro feel.

#E8D6A0 · #DDA15E · #BC6C25 · #606C38 · #283618

4. Retro Diner

Classic mid-century red, cream, and teal.

#E63946 · #F1FAEE · #A8DADC · #457B9D · #1D3557

5. Mid-Century Modern

Warm ochres and muted greens, very 1960s.

#E3B23C · #D1603D · #9C964A · #4E6151 · #2B2D2A

6. Groovy 70s

A funkier, brighter take on seventies warmth.

#F4A259 · #E76F51 · #BC4B51 · #5B8E7D · #3A3238

How to use retro colors in CSS

Save your chosen era as CSS variables:

:root {
  --retro-gold:   #D9A05B;
  --retro-orange: #C1654E;
  --retro-brown:  #8E4B2E;
  --retro-olive:  #6B7A3A;
}

For an 80s synthwave background, a diagonal gradient is perfect:

.hero {
  background: linear-gradient(135deg, #F72585 0%, #7209B7 50%, #3A0CA3 100%);
}

Tips for designing with retro colors

• Commit to an era. Decide between 70s earth and 80s neon, and keep the whole palette consistent.
• Use period typography. Retro colour plus a vintage typeface sells the look far more than colour alone.
• Desaturate for authenticity. 70s palettes especially should feel slightly faded, like an old photograph.
• Add a cream or off-white. A warm neutral keeps retro palettes from feeling muddy.

Frequently asked questions

What colors are retro?

It depends on the era. 70s retro uses warm earth tones — mustard, burnt orange, avocado, brown. 80s retro uses electric pink, purple, teal, and chrome.

What are good 80s retro hex codes?

For an 80s synthwave look, try hot pink #F72585, purple #7209B7, and deep blue #3A0CA3 on a dark background.

What is the most popular retro color?

Burnt orange and mustard yellow are the signature 70s colours, while hot pink and electric purple define the 80s.

Feeling nostalgic? Browse more color palettes, explore aesthetic palettes, or build a synthwave gradient and copy the CSS.