aestheticcolours

Colour pairings

Slate and Amber

Slate (#64748B) paired with amber (#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.

Slate #64748B
Amber #F59E0B
50#F3F6FA
100#E2E8F1
200#CCD6E6
300#ADBCD2
400#92A4BE
500#7789A2
600#64748B
700#526071
800#404B58
900#353E47
950#161B20
slate — Tailwind v4@theme
@theme {
  --color-slate-50: #f3f6fa;
  --color-slate-100: #e2e8f1;
  --color-slate-200: #ccd6e6;
  --color-slate-300: #adbcd2;
  --color-slate-400: #92a4be;
  --color-slate-500: #7789a2;
  --color-slate-600: #64748b;
  --color-slate-700: #526071;
  --color-slate-800: #404b58;
  --color-slate-900: #353e47;
  --color-slate-950: #161b20;
}
50#FFF4E5
100#FFE2C0
200#FFCA8B
300#F59E0B
400#DE8E00
500#BA7600
600#9C6100
700#865000
800#6B3E00
900#593200
950#2A1400
amber — Tailwind v4@theme
@theme {
  --color-amber-50: #fff4e5;
  --color-amber-100: #ffe2c0;
  --color-amber-200: #ffca8b;
  --color-amber-300: #f59e0b;
  --color-amber-400: #de8e00;
  --color-amber-500: #ba7600;
  --color-amber-600: #9c6100;
  --color-amber-700: #865000;
  --color-amber-800: #6b3e00;
  --color-amber-900: #593200;
  --color-amber-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