Vintage Nostalgia, Mustard Ochre & Avocado Green Category: Aesthetic 14,800/mo searches

Retro 70s Color Palette — HEX Codes, Swatches & UI Palette

Channeling groovy mid-century design, analog vinyl records, and velvet furniture. A warm, earth-saturated array of mustard yellow, burnt sienna, avocado green, and cream linen.

Iconic Retro Yellow

Mustard Ochre

#E3A857

Warm Rust Accent

Burnt Sienna

#B85D36

Muted Vintage Green

Avocado Green

#6B7B4C

Solid Grounding Dark

Warm Teak Brown

#4D3627

Cozy Retro Canvas

Linen Cream

#FAF3E0

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Retro 70s Color Palette.

Mustard Ochre

Iconic Retro Yellow

HEX #E3A857

RGB rgb(227, 168, 87)

HSL hsl(35deg, 71%, 62%)

vs White: 2.1:1 (Fail) vs Black: 10.0:1 (AAA)

Burnt Sienna

Warm Rust Accent

HEX #B85D36

RGB rgb(184, 93, 54)

HSL hsl(18deg, 55%, 47%)

vs White: 4.51:1 (AA) vs Black: 4.66:1 (AA)

Avocado Green

Muted Vintage Green

HEX #6B7B4C

RGB rgb(107, 123, 76)

HSL hsl(80deg, 24%, 39%)

vs White: 4.6:1 (AA) vs Black: 4.56:1 (AA)

Warm Teak Brown

Solid Grounding Dark

HEX #4D3627

RGB rgb(77, 54, 39)

HSL hsl(24deg, 33%, 23%)

vs White: 11.22:1 (AAA) vs Black: 1.87:1 (Fail)

Linen Cream

Cozy Retro Canvas

HEX #FAF3E0

RGB rgb(250, 243, 224)

HSL hsl(44deg, 72%, 93%)

vs White: 1.11:1 (Fail) vs Black: 18.96:1 (AAA)

UI Design & Color Hierarchy Guide

Combine with heavy serif typography, badge iconography, and analog grain overlays. Avoid sterile grays; rely on warm cream (#FAF3E0) for all neutral surfaces.

60% Dominant Base

Use the primary neutral/light swatch (Linen Cream) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Linen Cream | Darkest: Warm Teak Brown):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Mustard Ochre (#E3A857)	1.9:1 Fail	5.34:1 AA
Burnt Sienna (#B85D36)	4.07:1 AA Large	2.49:1 Fail
Avocado Green (#6B7B4C)	4.16:1 AA Large	2.44:1 Fail
Warm Teak Brown (#4D3627)	10.13:1 AAA	1.0:1 Fail
Linen Cream (#FAF3E0)	1.0:1 Fail	10.13:1 AAA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #E3A857; /* Mustard Ochre - Iconic Retro Yellow */
  --color-2: #B85D36; /* Burnt Sienna - Warm Rust Accent */
  --color-3: #6B7B4C; /* Avocado Green - Muted Vintage Green */
  --color-4: #4D3627; /* Warm Teak Brown - Solid Grounding Dark */
  --color-5: #FAF3E0; /* Linen Cream - Cozy Retro Canvas */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#E3A857',
    'palette-2': '#B85D36',
    'palette-3': '#6B7B4C',
    'palette-4': '#4D3627',
    'palette-5': '#FAF3E0'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel