Colour pairings

Lilac and Mint

Lilac (#C8A2C8) paired with mint (#98FF98). 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.

Lilac #C8A2C8
Mint #98FF98
50#FBF2FA
100#F2E2F0
200#E7CBE5
300#C8A2C8
400#BE90BE
500#A275A3
600#88608A
700#705273
800#56415A
900#463649
950#201722
lilac — Tailwind v4@theme
@theme {
  --color-lilac-50: #fbf2fa;
  --color-lilac-100: #f2e2f0;
  --color-lilac-200: #e7cbe5;
  --color-lilac-300: #c8a2c8;
  --color-lilac-400: #be90be;
  --color-lilac-500: #a275a3;
  --color-lilac-600: #88608a;
  --color-lilac-700: #705273;
  --color-lilac-800: #56415a;
  --color-lilac-900: #463649;
  --color-lilac-950: #201722;
}
50#E8FCEA
100#98FF98
200#A4EAA6
300#70D672
400#36C141
500#00A421
600#00890C
700#1A7206
800#205809
900#204810
950#0A2101
mint — Tailwind v4@theme
@theme {
  --color-mint-50: #e8fcea;
  --color-mint-100: #98ff98;
  --color-mint-200: #a4eaa6;
  --color-mint-300: #70d672;
  --color-mint-400: #36c141;
  --color-mint-500: #00a421;
  --color-mint-600: #00890c;
  --color-mint-700: #1a7206;
  --color-mint-800: #205809;
  --color-mint-900: #204810;
  --color-mint-950: #0a2101;
}

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