aestheticcolours

Colour pairings

Lavender and Sage

Lavender (#B497BD) paired with sage (#9CAF88). 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.

Lavender #B497BD
Sage #9CAF88
50#F9F3F9
100#EEE4F0
200#E0CEE4
300#C9B1D1
400#B497BD
500#987BA1
600#7F6688
700#695671
800#514458
900#423848
950#1D1821
lavender — Tailwind v4@theme
@theme {
  --color-lavender-50: #f9f3f9;
  --color-lavender-100: #eee4f0;
  --color-lavender-200: #e0cee4;
  --color-lavender-300: #c9b1d1;
  --color-lavender-400: #b497bd;
  --color-lavender-500: #987ba1;
  --color-lavender-600: #7f6688;
  --color-lavender-700: #695671;
  --color-lavender-800: #514458;
  --color-lavender-900: #423848;
  --color-lavender-950: #1d1821;
}
50#F3F7F1
100#E3EADE
200#CEDAC3
300#B2C2A1
400#9CAF88
500#7C8F68
600#677754
700#586348
800#464D38
900#3A3F2F
950#191C12
sage — Tailwind v4@theme
@theme {
  --color-sage-50: #f3f7f1;
  --color-sage-100: #e3eade;
  --color-sage-200: #cedac3;
  --color-sage-300: #b2c2a1;
  --color-sage-400: #9caf88;
  --color-sage-500: #7c8f68;
  --color-sage-600: #677754;
  --color-sage-700: #586348;
  --color-sage-800: #464d38;
  --color-sage-900: #3a3f2f;
  --color-sage-950: #191c12;
}

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