aestheticcolours

Colour pairings

Emerald and Ivory

Emerald (#10B981) paired with ivory (#FFFFF0). 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.

Emerald #10B981
Ivory #FFFFF0
50#E8FBF2
100#CDF2E0
200#A2E7C6
300#69D4A4
400#10B981
500#00A06E
600#008559
700#007148
800#115836
900#18472D
950#052011
emerald — Tailwind v4@theme
@theme {
  --color-emerald-50: #e8fbf2;
  --color-emerald-100: #cdf2e0;
  --color-emerald-200: #a2e7c6;
  --color-emerald-300: #69d4a4;
  --color-emerald-400: #10b981;
  --color-emerald-500: #00a06e;
  --color-emerald-600: #008559;
  --color-emerald-700: #007148;
  --color-emerald-800: #115836;
  --color-emerald-900: #18472d;
  --color-emerald-950: #052011;
}
50#FFFFF0
100#E8E8E2
200#D6D6CC
300#BCBCAE
400#A4A493
500#898978
600#727162
700#605F53
800#4B4A41
900#3E3D36
950#1B1A17
ivory — Tailwind v4@theme
@theme {
  --color-ivory-50: #fffff0;
  --color-ivory-100: #e8e8e2;
  --color-ivory-200: #d6d6cc;
  --color-ivory-300: #bcbcae;
  --color-ivory-400: #a4a493;
  --color-ivory-500: #898978;
  --color-ivory-600: #727162;
  --color-ivory-700: #605f53;
  --color-ivory-800: #4b4a41;
  --color-ivory-900: #3e3d36;
  --color-ivory-950: #1b1a17;
}

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