Widowmaker to A State of Mint Color Palette

About this palette

Widowmaker to A State of Mint is a 5-color cool palette: #B2A5FF (Widowmaker), #4C2000 (Evil Cigar), #008677 (Go Go Green), #5A269D (Wild Violet), #7EFED2 (A State of Mint). It mixes purple, brown, turquoise tones and feels cool overall. The strongest text pairing is #4C2000 on #7EFED2 with a contrast ratio of 11.23:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Widowmaker	rgb(178, 165, 255)	hsl(249, 100%, 82%)
Evil Cigar	rgb(76, 32, 0)	hsl(25, 100%, 15%)
Go Go Green	rgb(0, 134, 119)	hsl(173, 100%, 26%)
Wild Violet	rgb(90, 38, 157)	hsl(266, 61%, 38%)
A State of Mint	rgb(126, 254, 210)	hsl(159, 98%, 75%)

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.

Aa11.23:1 Very good#4C2000 on #7EFED2
Aa11.23:1 Very good#7EFED2 on #4C2000
Aa7.73:1 Very good#5A269D on #7EFED2
Aa7.73:1 Very good#7EFED2 on #5A269D
Aa6.42:1 Good#B2A5FF on #4C2000
Aa6.42:1 Good#4C2000 on #B2A5FF
Aa4.42:1 Poor#B2A5FF on #5A269D
Aa4.42:1 Poor#5A269D on #B2A5FF

Color blindness preview

CSS variables

/* Widowmaker to A State of Mint — https://swatchly.xyz/palette/b2a5ff-4c2000-008677-5a269d-7efed2 */
:root {
  --widowmaker: #b2a5ff;
  --evil-cigar: #4c2000;
  --go-go-green: #008677;
  --wild-violet: #5a269d;
  --a-state-of-mint: #7efed2;
}

Tailwind CSS v4

/* Widowmaker to A State of Mint — https://swatchly.xyz/palette/b2a5ff-4c2000-008677-5a269d-7efed2 */
@theme {
  --color-widowmaker: #b2a5ff;
  --color-widowmaker-50: #edecff;
  --color-widowmaker-100: #e1ddff;
  --color-widowmaker-200: #cac4ff;
  --color-widowmaker-300: #b2a5ff;
  --color-widowmaker-400: #9688de;
  --color-widowmaker-500: #7d6fc4;
  --color-widowmaker-600: #6657a7;
  --color-widowmaker-700: #52438c;
  --color-widowmaker-800: #413474;
  --color-widowmaker-900: #33285f;
  --color-widowmaker-950: #20173f;
  --color-evil-cigar: #4c2000;
  --color-evil-cigar-50: #fff2eb;
  --color-evil-cigar-100: #ffe5d7;
  --color-evil-cigar-200: #f8cdb5;
  --color-evil-cigar-300: #e5b59a;
  --color-evil-cigar-400: #c79375;
  --color-evil-cigar-500: #ab7758;
  --color-evil-cigar-600: #8d5c3f;
  --color-evil-cigar-700: #71462b;
  --color-evil-cigar-800: #59341d;
  --color-evil-cigar-900: #4c2000;
  --color-evil-cigar-950: #2b1508;
  --color-go-go-green: #008677;
  --color-go-go-green-50: #d8fff7;
  --color-go-go-green-100: #c0fbef;
  --color-go-go-green-200: #a4ebdd;
  --color-go-go-green-300: #85d7c8;
  --color-go-go-green-400: #5abaab;
  --color-go-go-green-500: #34a090;
  --color-go-go-green-600: #008677;
  --color-go-go-green-700: #006b5e;
  --color-go-go-green-800: #005349;
  --color-go-go-green-900: #004038;
  --color-go-go-green-950: #002823;
  --color-wild-violet: #5a269d;
  --color-wild-violet-50: #f6f3ff;
  --color-wild-violet-100: #ede7ff;
  --color-wild-violet-200: #dccfff;
  --color-wild-violet-300: #cbb4ff;
  --color-wild-violet-400: #b28bff;
  --color-wild-violet-500: #9a6ee7;
  --color-wild-violet-600: #8153ca;
  --color-wild-violet-700: #6b3eae;
  --color-wild-violet-800: #5a269d;
  --color-wild-violet-900: #452078;
  --color-wild-violet-950: #2d1052;
  --color-a-state-of-mint: #7efed2;
  --color-a-state-of-mint-50: #b9ffe4;
  --color-a-state-of-mint-100: #7efed2;
  --color-a-state-of-mint-200: #88e6c4;
  --color-a-state-of-mint-300: #66d3ad;
  --color-a-state-of-mint-400: #30b68f;
  --color-a-state-of-mint-500: #009a76;
  --color-a-state-of-mint-600: #007d5f;
  --color-a-state-of-mint-700: #00654c;
  --color-a-state-of-mint-800: #004f3b;
  --color-a-state-of-mint-900: #003d2d;
  --color-a-state-of-mint-950: #00261b;
}