Groovy 70s color palette
Shag carpet and a wood-paneled den: harvest gold #C17817, rust #8B2500, olive #556B2F, sage and a peachy tan. Everything is warm or earthy, with the saturation of an old photograph. The mix is cozy and a little kitsch, and it works best with chunky rounded type. A vinyl shop or a retro cafe could build a whole identity around it.
Groovy 70s palette in use
On a cream page, use #8B2500 for headings and text and #C17817 for buttons. #556B2F works for footers or dark bands, while #8FBC8F and #F4A460 add soft fills and illustrations.
This pair measures 10.32:1, so it works for body text too. The button uses #8B2500 with white text.
ButtonGood for
- Vinyl record shop
- Vintage furniture store
- Retro cafe menu
- Craft beer label
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#8B2500 | #F4A460 | 4.37:1 | AA large |
#8B2500 | #8FBC8F | 4.13:1 | AA large |
Groovy 70s palette as code
CSS variables
:root {
--groovy-70s-1: #C17817;
--groovy-70s-2: #8B2500;
--groovy-70s-3: #556B2F;
--groovy-70s-4: #8FBC8F;
--groovy-70s-5: #F4A460;
}Tailwind v4
@theme {
--color-groovy-70s-1: #C17817;
--color-groovy-70s-2: #8B2500;
--color-groovy-70s-3: #556B2F;
--color-groovy-70s-4: #8FBC8F;
--color-groovy-70s-5: #F4A460;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'groovy-70s': {
100: '#C17817',
200: '#8B2500',
300: '#556B2F',
400: '#8FBC8F',
500: '#F4A460',
},SCSS
$groovy-70s-1: #C17817;
$groovy-70s-2: #8B2500;
$groovy-70s-3: #556B2F;
$groovy-70s-4: #8FBC8F;
$groovy-70s-5: #F4A460;JSON
["#C17817","#8B2500","#556B2F","#8FBC8F","#F4A460"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.