aestheticcolours

Colour pairings

Mauve and Gold

Mauve (#8E7F8F) paired with gold (#F59E0B). Below are both colours expanded into full 11-step ramps, generated in OKLCH for even lightness steps and gamut-mapped to sRGB. Copy the Tailwind v4 config for either, or open them in the generator to fine-tune.

Mauve #8E7F8F
Gold #F59E0B
50#F7F4F7
100#EBE6EB
200#DBD2DB
300#C3B6C4
400#AC9DAD
500#8E7F8F
600#786B7A
700#645B66
800#4E4750
900#403A41
950#1C191D
mauve — Tailwind v4@theme
@theme {
  --color-mauve-50: #f7f4f7;
  --color-mauve-100: #ebe6eb;
  --color-mauve-200: #dbd2db;
  --color-mauve-300: #c3b6c4;
  --color-mauve-400: #ac9dad;
  --color-mauve-500: #8e7f8f;
  --color-mauve-600: #786b7a;
  --color-mauve-700: #645b66;
  --color-mauve-800: #4e4750;
  --color-mauve-900: #403a41;
  --color-mauve-950: #1c191d;
}
50#FFF4E5
100#FFE2C0
200#FFCA8B
300#F59E0B
400#DE8E00
500#BA7600
600#9C6100
700#865000
800#6B3E00
900#593200
950#2A1400
gold — Tailwind v4@theme
@theme {
  --color-gold-50: #fff4e5;
  --color-gold-100: #ffe2c0;
  --color-gold-200: #ffca8b;
  --color-gold-300: #f59e0b;
  --color-gold-400: #de8e00;
  --color-gold-500: #ba7600;
  --color-gold-600: #9c6100;
  --color-gold-700: #865000;
  --color-gold-800: #6b3e00;
  --color-gold-900: #593200;
  --color-gold-950: #2a1400;
}

Aesthetic

Want this palette built into your site?

You bring the colours. You'll get a site that uses them properly, designed and built by the team at Aesthetic.

More combinations