Blue Funk to Heart Potion Color Palette

About this palette

Blue Funk to Heart Potion is a 5-color cool palette: #2F436C (Blue Funk), #7D7707 (Olive), #A7B9E2 (Blue Lips), #E2F2BA (Sour), #A583AC (Heart Potion). It mixes blue, yellow, green, purple tones and feels cool overall. The strongest text pairing is #2F436C on #E2F2BA with a contrast ratio of 8.24:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Funk	rgb(47, 67, 108)	hsl(220, 39%, 30%)
Olive	rgb(125, 119, 7)	hsl(57, 89%, 26%)
Blue Lips	rgb(167, 185, 226)	hsl(222, 50%, 77%)
Sour	rgb(226, 242, 186)	hsl(77, 68%, 84%)
Heart Potion	rgb(165, 131, 172)	hsl(290, 20%, 59%)

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.24:1 Very good#2F436C on #E2F2BA
Aa8.24:1 Very good#E2F2BA on #2F436C
Aa4.99:1 Good#2F436C on #A7B9E2
Aa4.99:1 Good#A7B9E2 on #2F436C
Aa3.91:1 Poor#7D7707 on #E2F2BA
Aa3.91:1 Poor#E2F2BA on #7D7707
Aa3.01:1 Poor#2F436C on #A583AC
Aa3.01:1 Poor#A583AC on #2F436C

Color blindness preview

CSS variables

/* Blue Funk to Heart Potion — https://swatchly.xyz/palette/2f436c-7d7707-a7b9e2-e2f2ba-a583ac */
:root {
  --blue-funk: #2f436c;
  --olive: #7d7707;
  --blue-lips: #a7b9e2;
  --sour: #e2f2ba;
  --heart-potion: #a583ac;
}

Tailwind CSS v4

/* Blue Funk to Heart Potion — https://swatchly.xyz/palette/2f436c-7d7707-a7b9e2-e2f2ba-a583ac */
@theme {
  --color-blue-funk: #2f436c;
  --color-blue-funk-50: #f0f5ff;
  --color-blue-funk-100: #e1ecff;
  --color-blue-funk-200: #c5d8fd;
  --color-blue-funk-300: #acc2eb;
  --color-blue-funk-400: #8ba2d0;
  --color-blue-funk-500: #7087b5;
  --color-blue-funk-600: #576d98;
  --color-blue-funk-700: #43567e;
  --color-blue-funk-800: #2f436c;
  --color-blue-funk-900: #253451;
  --color-blue-funk-950: #152035;
  --color-olive: #7d7707;
  --color-olive-50: #faf9c7;
  --color-olive-100: #f2f0b9;
  --color-olive-200: #e1df9d;
  --color-olive-300: #cdca7e;
  --color-olive-400: #b0ab54;
  --color-olive-500: #969131;
  --color-olive-600: #7d7707;
  --color-olive-700: #635e00;
  --color-olive-800: #4d4900;
  --color-olive-900: #3b3800;
  --color-olive-950: #252300;
  --color-blue-lips: #a7b9e2;
  --color-blue-lips-50: #ebf1ff;
  --color-blue-lips-100: #dbe6ff;
  --color-blue-lips-200: #c2d1f2;
  --color-blue-lips-300: #a7b9e2;
  --color-blue-lips-400: #8a9bc2;
  --color-blue-lips-500: #7081a7;
  --color-blue-lips-600: #58688c;
  --color-blue-lips-700: #445273;
  --color-blue-lips-800: #35415d;
  --color-blue-lips-900: #28324a;
  --color-blue-lips-950: #171f30;
  --color-sour: #e2f2ba;
  --color-sour-50: #eff9da;
  --color-sour-100: #e2f2ba;
  --color-sour-200: #d0dcb4;
  --color-sour-300: #bac798;
  --color-sour-400: #9aa875;
  --color-sour-500: #7f8d59;
  --color-sour-600: #657240;
  --color-sour-700: #505b2d;
  --color-sour-800: #3d471f;
  --color-sour-900: #2f3714;
  --color-sour-950: #1c2209;
  --color-heart-potion: #a583ac;
  --color-heart-potion-50: #fdf3ff;
  --color-heart-potion-100: #fbe8ff;
  --color-heart-potion-200: #edd3f2;
  --color-heart-potion-300: #dabde0;
  --color-heart-potion-400: #be9ec5;
  --color-heart-potion-500: #a583ac;
  --color-heart-potion-600: #87678e;
  --color-heart-potion-700: #6d4f73;
  --color-heart-potion-800: #563c5c;
  --color-heart-potion-900: #422c47;
  --color-heart-potion-950: #2a1a2d;
}