aestheticcolours

Colour pairings

Sage and Cream

Sage (#9CAF88) paired with cream (#F5F0E6). 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.

Sage #9CAF88
Cream #F5F0E6
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;
}
50#F5F0E6
100#E9E7E3
200#D8D5CE
300#BFBBB1
400#A7A296
500#8C877B
600#757066
700#625E56
800#4D4944
900#3F3C38
950#1C1A18
cream — Tailwind v4@theme
@theme {
  --color-cream-50: #f5f0e6;
  --color-cream-100: #e9e7e3;
  --color-cream-200: #d8d5ce;
  --color-cream-300: #bfbbb1;
  --color-cream-400: #a7a296;
  --color-cream-500: #8c877b;
  --color-cream-600: #757066;
  --color-cream-700: #625e56;
  --color-cream-800: #4d4944;
  --color-cream-900: #3f3c38;
  --color-cream-950: #1c1a18;
}

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