Widowmaker to Dark Olive Color Palette

About this palette

Widowmaker to Dark Olive is a 5-color cool, earthy palette: #ACA0FF (Widowmaker), #CDE78C (Sassy Lime), #9B9700 (Papyrus), #5E469E (Ultrapurple Merge), #2F3C16 (Dark Olive). It mixes purple, green, yellow tones and feels cool overall. The strongest text pairing is #CDE78C on #2F3C16 with a contrast ratio of 8.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Widowmaker	rgb(172, 160, 255)	hsl(248, 100%, 81%)
Sassy Lime	rgb(205, 231, 140)	hsl(77, 65%, 73%)
Papyrus	rgb(155, 151, 0)	hsl(58, 100%, 30%)
Ultrapurple Merge	rgb(94, 70, 158)	hsl(256, 39%, 45%)
Dark Olive	rgb(47, 60, 22)	hsl(81, 46%, 16%)

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.

Aa8.66:1 Very good#CDE78C on #2F3C16
Aa8.66:1 Very good#2F3C16 on #CDE78C
Aa5.41:1 Good#CDE78C on #5E469E
Aa5.41:1 Good#5E469E on #CDE78C
Aa5.19:1 Good#ACA0FF on #2F3C16
Aa5.19:1 Good#2F3C16 on #ACA0FF
Aa3.83:1 Poor#9B9700 on #2F3C16
Aa3.83:1 Poor#2F3C16 on #9B9700

Color blindness preview

CSS variables

/* Widowmaker to Dark Olive — https://swatchly.xyz/palette/aca0ff-cde78c-9b9700-5e469e-2f3c16 */
:root {
  --widowmaker: #aca0ff;
  --sassy-lime: #cde78c;
  --papyrus: #9b9700;
  --ultrapurple-merge: #5e469e;
  --dark-olive: #2f3c16;
}

Tailwind CSS v4

/* Widowmaker to Dark Olive — https://swatchly.xyz/palette/aca0ff-cde78c-9b9700-5e469e-2f3c16 */
@theme {
  --color-widowmaker: #aca0ff;
  --color-widowmaker-50: #f9f9ff;
  --color-widowmaker-100: #f1f1ff;
  --color-widowmaker-200: #dfddff;
  --color-widowmaker-300: #cac5ff;
  --color-widowmaker-400: #aca0ff;
  --color-widowmaker-500: #8f82dd;
  --color-widowmaker-600: #7264bd;
  --color-widowmaker-700: #5a4c9d;
  --color-widowmaker-800: #453880;
  --color-widowmaker-900: #342865;
  --color-widowmaker-950: #1f1641;
  --color-sassy-lime: #cde78c;
  --color-sassy-lime-50: #efffcf;
  --color-sassy-lime-100: #e5f6c0;
  --color-sassy-lime-200: #cde78c;
  --color-sassy-lime-300: #b8ce83;
  --color-sassy-lime-400: #97ae5a;
  --color-sassy-lime-500: #7c9238;
  --color-sassy-lime-600: #627719;
  --color-sassy-lime-700: #4c5e00;
  --color-sassy-lime-800: #3b4900;
  --color-sassy-lime-900: #2c3800;
  --color-sassy-lime-950: #1b2300;
  --color-papyrus: #9b9700;
  --color-papyrus-50: #fcfcc1;
  --color-papyrus-100: #f4f4b3;
  --color-papyrus-200: #e4e394;
  --color-papyrus-300: #d0cf72;
  --color-papyrus-400: #b4b141;
  --color-papyrus-500: #9b9700;
  --color-papyrus-600: #7d7900;
  --color-papyrus-700: #636000;
  --color-papyrus-800: #4c4a00;
  --color-papyrus-900: #3a3800;
  --color-papyrus-950: #232200;
  --color-ultrapurple-merge: #5e469e;
  --color-ultrapurple-merge-50: #f5f3ff;
  --color-ultrapurple-merge-100: #ebe8ff;
  --color-ultrapurple-merge-200: #d9d1ff;
  --color-ultrapurple-merge-300: #c4b6ff;
  --color-ultrapurple-merge-400: #a793ee;
  --color-ultrapurple-merge-500: #8d77d4;
  --color-ultrapurple-merge-600: #735db6;
  --color-ultrapurple-merge-700: #5e469e;
  --color-ultrapurple-merge-800: #49367e;
  --color-ultrapurple-merge-900: #392765;
  --color-ultrapurple-merge-950: #241743;
  --color-dark-olive: #2f3c16;
  --color-dark-olive-50: #f0fae1;
  --color-dark-olive-100: #e5f0d5;
  --color-dark-olive-200: #d0ddbd;
  --color-dark-olive-300: #b9c7a3;
  --color-dark-olive-400: #99a981;
  --color-dark-olive-500: #7f8f66;
  --color-dark-olive-600: #65744d;
  --color-dark-olive-700: #505e3a;
  --color-dark-olive-800: #3f4b2b;
  --color-dark-olive-900: #2f3c16;
  --color-dark-olive-950: #1e2511;
}