aestheticcolours

Colour pairings

Forest and Cream

Forest (#228B22) 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.

Forest #228B22
Cream #F5F0E6
50#EAFBEB
100#D2F2D1
200#ADE7AB
300#7FD37A
400#52BE4F
500#2FA12E
600#228B22
700#2D701B
800#295716
900#264617
950#0E2004
forest — Tailwind v4@theme
@theme {
  --color-forest-50: #eafbeb;
  --color-forest-100: #d2f2d1;
  --color-forest-200: #ade7ab;
  --color-forest-300: #7fd37a;
  --color-forest-400: #52be4f;
  --color-forest-500: #2fa12e;
  --color-forest-600: #228b22;
  --color-forest-700: #2d701b;
  --color-forest-800: #295716;
  --color-forest-900: #264617;
  --color-forest-950: #0e2004;
}
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