aestheticcolours

Colour pairings

Charcoal and Amber

Charcoal (#36454F) 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.

Charcoal #36454F
Amber #F59E0B
50#F3F6F8
100#E2E9ED
200#CBD7E0
300#ACBECA
400#91A6B4
500#768B99
600#607380
700#52616A
800#404C52
900#36454F
950#161B1E
charcoal — Tailwind v4@theme
@theme {
  --color-charcoal-50: #f3f6f8;
  --color-charcoal-100: #e2e9ed;
  --color-charcoal-200: #cbd7e0;
  --color-charcoal-300: #acbeca;
  --color-charcoal-400: #91a6b4;
  --color-charcoal-500: #768b99;
  --color-charcoal-600: #607380;
  --color-charcoal-700: #52616a;
  --color-charcoal-800: #404c52;
  --color-charcoal-900: #36454f;
  --color-charcoal-950: #161b1e;
}
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