Maniac Green to Illicit Purple Color Palette

About this palette

Maniac Green to Illicit Purple is a 4-color vibrant, cool palette: #289300 (Maniac Green), #F9D25B (Rubber Ducky), #522981 (Night Fever), #AA83FF (Illicit Purple). It mixes green, yellow, purple tones and feels cool overall. The strongest text pairing is #F9D25B on #522981 with a contrast ratio of 7.22:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Maniac Green	rgb(40, 147, 0)	hsl(104, 100%, 29%)
Rubber Ducky	rgb(249, 210, 91)	hsl(45, 93%, 67%)
Night Fever	rgb(82, 41, 129)	hsl(268, 52%, 33%)
Illicit Purple	rgb(170, 131, 255)	hsl(259, 100%, 76%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa7.22:1 Very good#F9D25B on #522981
Aa7.22:1 Very good#522981 on #F9D25B
Aa3.71:1 Poor#522981 on #AA83FF
Aa3.71:1 Poor#AA83FF on #522981

Color blindness preview

CSS variables

/* Maniac Green to Illicit Purple — https://swatchly.xyz/palette/289300-f9d25b-522981-aa83ff */
:root {
  --maniac-green: #289300;
  --rubber-ducky: #f9d25b;
  --night-fever: #522981;
  --illicit-purple: #aa83ff;
}

Tailwind CSS v4

/* Maniac Green to Illicit Purple — https://swatchly.xyz/palette/289300-f9d25b-522981-aa83ff */
@theme {
  --color-maniac-green: #289300;
  --color-maniac-green-50: #dbffd4;
  --color-maniac-green-100: #bbfbae;
  --color-maniac-green-200: #9be88c;
  --color-maniac-green-300: #79d267;
  --color-maniac-green-400: #4db137;
  --color-maniac-green-500: #289300;
  --color-maniac-green-600: #1e7700;
  --color-maniac-green-700: #165f00;
  --color-maniac-green-800: #0f4b00;
  --color-maniac-green-900: #0a3b00;
  --color-maniac-green-950: #042600;
  --color-rubber-ducky: #f9d25b;
  --color-rubber-ducky-50: #fff4d3;
  --color-rubber-ducky-100: #ffe9a9;
  --color-rubber-ducky-200: #f9d25b;
  --color-rubber-ducky-300: #ddbd5b;
  --color-rubber-ducky-400: #c09c1f;
  --color-rubber-ducky-500: #a28100;
  --color-rubber-ducky-600: #836800;
  --color-rubber-ducky-700: #685200;
  --color-rubber-ducky-800: #524000;
  --color-rubber-ducky-900: #3f3100;
  --color-rubber-ducky-950: #281e00;
  --color-night-fever: #522981;
  --color-night-fever-50: #f7f3ff;
  --color-night-fever-100: #efe6ff;
  --color-night-fever-200: #dfcdff;
  --color-night-fever-300: #ceb0ff;
  --color-night-fever-400: #b18ce9;
  --color-night-fever-500: #9670ce;
  --color-night-fever-600: #7b55af;
  --color-night-fever-700: #644092;
  --color-night-fever-800: #522981;
  --color-night-fever-900: #3e2260;
  --color-night-fever-950: #271340;
  --color-illicit-purple: #aa83ff;
  --color-illicit-purple-50: #f5f2ff;
  --color-illicit-purple-100: #ebe5ff;
  --color-illicit-purple-200: #d9cdff;
  --color-illicit-purple-300: #c5afff;
  --color-illicit-purple-400: #aa83ff;
  --color-illicit-purple-500: #8f67e0;
  --color-illicit-purple-600: #754dc1;
  --color-illicit-purple-700: #5f38a2;
  --color-illicit-purple-800: #4b2785;
  --color-illicit-purple-900: #3b1b6c;
  --color-illicit-purple-950: #250e49;
}