aestheticcolours

Colour pairings

Emerald and Gold

Emerald (#10B981) 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.

Emerald #10B981
Gold #F59E0B
50#E8FBF2
100#CDF2E0
200#A2E7C6
300#69D4A4
400#10B981
500#00A06E
600#008559
700#007148
800#115836
900#18472D
950#052011
emerald — Tailwind v4@theme
@theme {
  --color-emerald-50: #e8fbf2;
  --color-emerald-100: #cdf2e0;
  --color-emerald-200: #a2e7c6;
  --color-emerald-300: #69d4a4;
  --color-emerald-400: #10b981;
  --color-emerald-500: #00a06e;
  --color-emerald-600: #008559;
  --color-emerald-700: #007148;
  --color-emerald-800: #115836;
  --color-emerald-900: #18472d;
  --color-emerald-950: #052011;
}
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