Snarky Mint to Purple Color Palette

About this palette

Snarky Mint to Purple is a 4-color vibrant, cool palette: #90ED96 (Snarky Mint), #E273E6 (Pink Orchid), #20823A (Lush Paradise), #700C6E (Purple). It mixes green, pink, purple tones and feels cool overall. The strongest text pairing is #90ED96 on #700C6E with a contrast ratio of 7.49:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Snarky Mint	rgb(144, 237, 150)	hsl(124, 72%, 75%)
Pink Orchid	rgb(226, 115, 230)	hsl(298, 70%, 68%)
Lush Paradise	rgb(32, 130, 58)	hsl(136, 60%, 32%)
Purple	rgb(112, 12, 110)	hsl(301, 81%, 24%)

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.49:1 Very good#90ED96 on #700C6E
Aa7.49:1 Very good#700C6E on #90ED96
Aa3.98:1 Poor#E273E6 on #700C6E
Aa3.98:1 Poor#700C6E on #E273E6
Aa3.42:1 Poor#90ED96 on #20823A
Aa3.42:1 Poor#20823A on #90ED96

Color blindness preview

CSS variables

/* Snarky Mint to Purple — https://swatchly.xyz/palette/90ed96-e273e6-20823a-700c6e */
:root {
  --snarky-mint: #90ed96;
  --pink-orchid: #e273e6;
  --lush-paradise: #20823a;
  --purple: #700c6e;
}

Tailwind CSS v4

/* Snarky Mint to Purple — https://swatchly.xyz/palette/90ed96-e273e6-20823a-700c6e */
@theme {
  --color-snarky-mint: #90ed96;
  --color-snarky-mint-50: #d7ffd7;
  --color-snarky-mint-100: #bff9c1;
  --color-snarky-mint-200: #90ed96;
  --color-snarky-mint-300: #85d48a;
  --color-snarky-mint-400: #5eb665;
  --color-snarky-mint-500: #3d9b48;
  --color-snarky-mint-600: #1f7f2f;
  --color-snarky-mint-700: #03671c;
  --color-snarky-mint-800: #005214;
  --color-snarky-mint-900: #003f0d;
  --color-snarky-mint-950: #002805;
  --color-pink-orchid: #e273e6;
  --color-pink-orchid-50: #fff2ff;
  --color-pink-orchid-100: #ffe3ff;
  --color-pink-orchid-200: #fec3ff;
  --color-pink-orchid-300: #fa9dfd;
  --color-pink-orchid-400: #e273e6;
  --color-pink-orchid-500: #c356c7;
  --color-pink-orchid-600: #a438a9;
  --color-pink-orchid-700: #87218c;
  --color-pink-orchid-800: #6d0f71;
  --color-pink-orchid-900: #56045a;
  --color-pink-orchid-950: #38003a;
  --color-lush-paradise: #20823a;
  --color-lush-paradise-50: #e0ffe3;
  --color-lush-paradise-100: #c5fccb;
  --color-lush-paradise-200: #a9ebb2;
  --color-lush-paradise-300: #8bd796;
  --color-lush-paradise-400: #62b971;
  --color-lush-paradise-500: #419d54;
  --color-lush-paradise-600: #20823a;
  --color-lush-paradise-700: #046927;
  --color-lush-paradise-800: #00521c;
  --color-lush-paradise-900: #004014;
  --color-lush-paradise-950: #00280a;
  --color-purple: #700c6e;
  --color-purple-50: #fff0fd;
  --color-purple-100: #ffe0fc;
  --color-purple-200: #ffbffa;
  --color-purple-300: #f49fee;
  --color-purple-400: #d87ad2;
  --color-purple-500: #bc5cb7;
  --color-purple-600: #9e429b;
  --color-purple-700: #832d80;
  --color-purple-800: #700c6e;
  --color-purple-900: #541253;
  --color-purple-950: #370736;
}