aestheticcolours

Colour pairings

Olive and Cream

Olive (#808000) 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.

Olive #808000
Cream #F5F0E6
50#F5F7E8
100#E8EBCC
200#D7DAA1
300#C0C16B
400#A8A935
500#8D8D00
600#808000
700#666204
800#514C0C
900#423E13
950#1E1B03
olive — Tailwind v4@theme
@theme {
  --color-olive-50: #f5f7e8;
  --color-olive-100: #e8ebcc;
  --color-olive-200: #d7daa1;
  --color-olive-300: #c0c16b;
  --color-olive-400: #a8a935;
  --color-olive-500: #8d8d00;
  --color-olive-600: #808000;
  --color-olive-700: #666204;
  --color-olive-800: #514c0c;
  --color-olive-900: #423e13;
  --color-olive-950: #1e1b03;
}
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