Heart Potion to Cola Color Palette

About this palette

Heart Potion to Cola is a 5-color cool, earthy palette: #AB84AF (Heart Potion), #7ECFA3 (Crystal Gem), #356C4E (Toad King), #F2FAFF (Cotton Ball), #462E12 (Cola). It mixes pink, green, white, brown tones and feels cool overall. The strongest text pairing is #F2FAFF on #462E12 with a contrast ratio of 11.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heart Potion	rgb(171, 132, 175)	hsl(294, 21%, 60%)
Crystal Gem	rgb(126, 207, 163)	hsl(147, 46%, 65%)
Toad King	rgb(53, 108, 78)	hsl(147, 34%, 32%)
Cotton Ball	rgb(242, 250, 255)	hsl(203, 100%, 97%)
Cola	rgb(70, 46, 18)	hsl(32, 59%, 17%)

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.98:1 Very good#F2FAFF on #462E12
Aa11.98:1 Very good#462E12 on #F2FAFF
Aa6.83:1 Good#7ECFA3 on #462E12
Aa6.83:1 Good#462E12 on #7ECFA3
Aa5.84:1 Good#356C4E on #F2FAFF
Aa5.84:1 Good#F2FAFF on #356C4E
Aa4.01:1 Poor#AB84AF on #462E12
Aa4.01:1 Poor#462E12 on #AB84AF

Color blindness preview

CSS variables

/* Heart Potion to Cola — https://swatchly.xyz/palette/ab84af-7ecfa3-356c4e-f2faff-462e12 */
:root {
  --heart-potion: #ab84af;
  --crystal-gem: #7ecfa3;
  --toad-king: #356c4e;
  --cotton-ball: #f2faff;
  --cola: #462e12;
}

Tailwind CSS v4

/* Heart Potion to Cola — https://swatchly.xyz/palette/ab84af-7ecfa3-356c4e-f2faff-462e12 */
@theme {
  --color-heart-potion: #ab84af;
  --color-heart-potion-50: #fde8ff;
  --color-heart-potion-100: #f5d9f8;
  --color-heart-potion-200: #e2c1e5;
  --color-heart-potion-300: #cba7cf;
  --color-heart-potion-400: #ab84af;
  --color-heart-potion-500: #916c95;
  --color-heart-potion-600: #78557c;
  --color-heart-potion-700: #614265;
  --color-heart-potion-800: #4e3351;
  --color-heart-potion-900: #3f2741;
  --color-heart-potion-950: #29182b;
  --color-crystal-gem: #7ecfa3;
  --color-crystal-gem-50: #d1ffe4;
  --color-crystal-gem-100: #c2f5d7;
  --color-crystal-gem-200: #a6e3c0;
  --color-crystal-gem-300: #7ecfa3;
  --color-crystal-gem-400: #62af86;
  --color-crystal-gem-500: #44956c;
  --color-crystal-gem-600: #297a54;
  --color-crystal-gem-700: #136340;
  --color-crystal-gem-800: #024f30;
  --color-crystal-gem-900: #003e25;
  --color-crystal-gem-950: #002715;
  --color-toad-king: #356c4e;
  --color-toad-king-50: #dffeea;
  --color-toad-king-100: #d2f5df;
  --color-toad-king-200: #bce5cb;
  --color-toad-king-300: #a2d2b5;
  --color-toad-king-400: #80b596;
  --color-toad-king-500: #649b7b;
  --color-toad-king-600: #4b8263;
  --color-toad-king-700: #356c4e;
  --color-toad-king-800: #26553c;
  --color-toad-king-900: #19422d;
  --color-toad-king-950: #0c2a1a;
  --color-cotton-ball: #f2faff;
  --color-cotton-ball-50: #f2faff;
  --color-cotton-ball-100: #eaeff2;
  --color-cotton-ball-200: #d5dbde;
  --color-cotton-ball-300: #bdc4c8;
  --color-cotton-ball-400: #9da4a8;
  --color-cotton-ball-500: #81888c;
  --color-cotton-ball-600: #666d71;
  --color-cotton-ball-700: #50565a;
  --color-cotton-ball-800: #3e4347;
  --color-cotton-ball-900: #2f3436;
  --color-cotton-ball-950: #1d2022;
  --color-cola: #462e12;
  --color-cola-50: #fff3e7;
  --color-cola-100: #fbe8d4;
  --color-cola-200: #ead3bc;
  --color-cola-300: #d6bca1;
  --color-cola-400: #b89c7f;
  --color-cola-500: #9d8163;
  --color-cola-600: #81674a;
  --color-cola-700: #695137;
  --color-cola-800: #543f28;
  --color-cola-900: #462e12;
  --color-cola-950: #2a1d0f;
}