Heart Potion to Close but No Cigar color palette

9E84AAHeart Potion 4B6C13Over the Hills E2F7FFCalm Waters ACBD90Nile 351D12Close but No Cigar

About this palette

Heart Potion to Close but No Cigar is a 5-color cool, earthy palette: #9E84AA (Heart Potion), #4B6C13 (Over the Hills), #E2F7FF (Calm Waters), #ACBD90 (Nile), #351D12 (Close but No Cigar). It mixes purple, green, white, brown tones and feels cool overall. The strongest text pairing is #E2F7FF on #351D12 with a contrast ratio of 14.21:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heart Potion	rgb(158, 132, 170)	hsl(281, 18%, 59%)
Over the Hills	rgb(75, 108, 19)	hsl(82, 70%, 25%)
Calm Waters	rgb(226, 247, 255)	hsl(197, 100%, 94%)
Nile	rgb(172, 189, 144)	hsl(83, 25%, 65%)
Close but No Cigar	rgb(53, 29, 18)	hsl(19, 49%, 14%)

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.

Aa14.21:1 Super#E2F7FF on #351D12
Aa14.21:1 Super#351D12 on #E2F7FF
Aa7.81:1 Very good#ACBD90 on #351D12
Aa7.81:1 Very good#351D12 on #ACBD90
Aa5.50:1 Good#4B6C13 on #E2F7FF
Aa5.50:1 Good#E2F7FF on #4B6C13
Aa4.74:1 Good#9E84AA on #351D12
Aa4.74:1 Good#351D12 on #9E84AA

Color blindness preview

CSS variables

/* Heart Potion to Close but No Cigar — https://swatchly.xyz/palette/9e84aa-4b6c13-e2f7ff-acbd90-351d12 */
:root {
  --heart-potion: #9e84aa;
  --over-the-hills: #4b6c13;
  --calm-waters: #e2f7ff;
  --nile: #acbd90;
  --close-but-no-cigar: #351d12;
}

Tailwind CSS v4

/* Heart Potion to Close but No Cigar — https://swatchly.xyz/palette/9e84aa-4b6c13-e2f7ff-acbd90-351d12 */
@theme {
  --color-heart-potion: #9e84aa;
  --color-heart-potion-50: #fbf4ff;
  --color-heart-potion-100: #f8e8ff;
  --color-heart-potion-200: #e8d4f1;
  --color-heart-potion-300: #d4bedf;
  --color-heart-potion-400: #b89fc3;
  --color-heart-potion-500: #9e84aa;
  --color-heart-potion-600: #81688d;
  --color-heart-potion-700: #685172;
  --color-heart-potion-800: #513d5a;
  --color-heart-potion-900: #3f2e46;
  --color-heart-potion-950: #271b2c;
  --color-over-the-hills: #4b6c13;
  --color-over-the-hills-50: #e8fed0;
  --color-over-the-hills-100: #dcf5c1;
  --color-over-the-hills-200: #c8e5a8;
  --color-over-the-hills-300: #b2d28c;
  --color-over-the-hills-400: #92b567;
  --color-over-the-hills-500: #789b49;
  --color-over-the-hills-600: #60822e;
  --color-over-the-hills-700: #4b6c13;
  --color-over-the-hills-800: #395505;
  --color-over-the-hills-900: #2b4200;
  --color-over-the-hills-950: #192a00;
  --color-calm-waters: #e2f7ff;
  --color-calm-waters-50: #e2f7ff;
  --color-calm-waters-100: #dfecf1;
  --color-calm-waters-200: #cad9df;
  --color-calm-waters-300: #b2c3ca;
  --color-calm-waters-400: #92a4ac;
  --color-calm-waters-500: #768991;
  --color-calm-waters-600: #5d6f76;
  --color-calm-waters-700: #48585f;
  --color-calm-waters-800: #37454a;
  --color-calm-waters-900: #29353a;
  --color-calm-waters-950: #182124;
  --color-nile: #acbd90;
  --color-nile-50: #e9f4d8;
  --color-nile-100: #dde9ca;
  --color-nile-200: #c6d4b0;
  --color-nile-300: #acbd90;
  --color-nile-400: #8f9f74;
  --color-nile-500: #76865b;
  --color-nile-600: #5e6d45;
  --color-nile-700: #4b5833;
  --color-nile-800: #3a4625;
  --color-nile-900: #2d371b;
  --color-nile-950: #1b220e;
  --color-close-but-no-cigar: #351d12;
  --color-close-but-no-cigar-50: #fff2ec;
  --color-close-but-no-cigar-100: #fbe6dd;
  --color-close-but-no-cigar-200: #ead2c7;
  --color-close-but-no-cigar-300: #d6baae;
  --color-close-but-no-cigar-400: #b89a8d;
  --color-close-but-no-cigar-500: #9e8072;
  --color-close-but-no-cigar-600: #83665a;
  --color-close-but-no-cigar-700: #6b5146;
  --color-close-but-no-cigar-800: #574036;
  --color-close-but-no-cigar-900: #463229;
  --color-close-but-no-cigar-950: #351d12;
}