aestheticcolours

Colour pairings

Black and Gold

Black (#0A0A0A) paired with gold (#D4AF37). 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.

Black #0A0A0A
Gold #D4AF37
50#F5F5F5
100#E7E7E7
200#D5D5D5
300#BBBBBB
400#A2A2A2
500#878787
600#707070
700#5E5E5E
800#4A4A4A
900#3C3C3C
950#0A0A0A
black — Tailwind v4@theme
@theme {
  --color-black-50: #f5f5f5;
  --color-black-100: #e7e7e7;
  --color-black-200: #d5d5d5;
  --color-black-300: #bbbbbb;
  --color-black-400: #a2a2a2;
  --color-black-500: #878787;
  --color-black-600: #707070;
  --color-black-700: #5e5e5e;
  --color-black-800: #4a4a4a;
  --color-black-900: #3c3c3c;
  --color-black-950: #0a0a0a;
}
50#FBF6E2
100#F3E7C1
200#ECD48B
300#D4AF37
400#C49E00
500#A48300
600#8A6C00
700#765A00
800#5E4600
900#4E3900
950#241800
gold — Tailwind v4@theme
@theme {
  --color-gold-50: #fbf6e2;
  --color-gold-100: #f3e7c1;
  --color-gold-200: #ecd48b;
  --color-gold-300: #d4af37;
  --color-gold-400: #c49e00;
  --color-gold-500: #a48300;
  --color-gold-600: #8a6c00;
  --color-gold-700: #765a00;
  --color-gold-800: #5e4600;
  --color-gold-900: #4e3900;
  --color-gold-950: #241800;
}

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