aestheticcolours

Colour pairings

Violet and Lime

Violet (#8B5CF6) paired with lime (#84CC16). 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.

Violet #8B5CF6
Lime #84CC16
50#F6F3FF
100#E9E3FF
200#D7CDFF
300#BDADFF
400#A78CFF
500#8B5CF6
600#774FD9
700#6047B2
800#483A89
900#3A326D
950#191437
violet — Tailwind v4@theme
@theme {
  --color-violet-50: #f6f3ff;
  --color-violet-100: #e9e3ff;
  --color-violet-200: #d7cdff;
  --color-violet-300: #bdadff;
  --color-violet-400: #a78cff;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #774fd9;
  --color-violet-700: #6047b2;
  --color-violet-800: #483a89;
  --color-violet-900: #3a326d;
  --color-violet-950: #191437;
}
50#EBFCE2
100#D4F3BF
200#B3E985
300#84CC16
400#76B900
500#629A00
600#538000
700#4A6B00
800#3C5300
900#324400
950#151E00
lime — Tailwind v4@theme
@theme {
  --color-lime-50: #ebfce2;
  --color-lime-100: #d4f3bf;
  --color-lime-200: #b3e985;
  --color-lime-300: #84cc16;
  --color-lime-400: #76b900;
  --color-lime-500: #629a00;
  --color-lime-600: #538000;
  --color-lime-700: #4a6b00;
  --color-lime-800: #3c5300;
  --color-lime-900: #324400;
  --color-lime-950: #151e00;
}

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