Sparky Blue to Gingerbread Color Palette

About this palette

Sparky Blue to Gingerbread is a 5-color cool palette: #3AE6FC (Sparky Blue), #B385D0 (Wisteria), #871B00 (Minotaurus Brown), #719E43 (Kiwi), #8F4A30 (Gingerbread). It mixes turquoise, purple, red, green, brown tones and feels cool overall. The strongest text pairing is #3AE6FC on #871B00 with a contrast ratio of 6.36:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sparky Blue	rgb(58, 230, 252)	hsl(187, 97%, 61%)
Wisteria	rgb(179, 133, 208)	hsl(277, 44%, 67%)
Minotaurus Brown	rgb(135, 27, 0)	hsl(12, 100%, 26%)
Kiwi	rgb(113, 158, 67)	hsl(90, 40%, 44%)
Gingerbread	rgb(143, 74, 48)	hsl(16, 50%, 37%)

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.

Aa6.36:1 Good#3AE6FC on #871B00
Aa6.36:1 Good#871B00 on #3AE6FC
Aa4.36:1 Poor#3AE6FC on #8F4A30
Aa4.36:1 Poor#8F4A30 on #3AE6FC
Aa3.28:1 Poor#B385D0 on #871B00
Aa3.28:1 Poor#871B00 on #B385D0
Aa3.05:1 Poor#871B00 on #719E43
Aa3.05:1 Poor#719E43 on #871B00

Color blindness preview

CSS variables

/* Sparky Blue to Gingerbread — https://swatchly.xyz/palette/3ae6fc-b385d0-871b00-719e43-8f4a30 */
:root {
  --sparky-blue: #3ae6fc;
  --wisteria: #b385d0;
  --minotaurus-brown: #871b00;
  --kiwi: #719e43;
  --gingerbread: #8f4a30;
}

Tailwind CSS v4

/* Sparky Blue to Gingerbread — https://swatchly.xyz/palette/3ae6fc-b385d0-871b00-719e43-8f4a30 */
@theme {
  --color-sparky-blue: #3ae6fc;
  --color-sparky-blue-50: #ccf8ff;
  --color-sparky-blue-100: #a2f3ff;
  --color-sparky-blue-200: #3ae6fc;
  --color-sparky-blue-300: #3fcee1;
  --color-sparky-blue-400: #00afc2;
  --color-sparky-blue-500: #0093a2;
  --color-sparky-blue-600: #007784;
  --color-sparky-blue-700: #005f6a;
  --color-sparky-blue-800: #004c55;
  --color-sparky-blue-900: #003a41;
  --color-sparky-blue-950: #00252a;
  --color-wisteria: #b385d0;
  --color-wisteria-50: #f8eeff;
  --color-wisteria-100: #f2dfff;
  --color-wisteria-200: #e7c2ff;
  --color-wisteria-300: #d1a8ec;
  --color-wisteria-400: #b385d0;
  --color-wisteria-500: #986bb4;
  --color-wisteria-600: #7d5297;
  --color-wisteria-700: #663f7d;
  --color-wisteria-800: #512f66;
  --color-wisteria-900: #402351;
  --color-wisteria-950: #2a1436;
  --color-minotaurus-brown: #871b00;
  --color-minotaurus-brown-50: #fff2ef;
  --color-minotaurus-brown-100: #ffe4de;
  --color-minotaurus-brown-200: #ffc9bc;
  --color-minotaurus-brown-300: #ffa995;
  --color-minotaurus-brown-400: #ee8168;
  --color-minotaurus-brown-500: #d3644b;
  --color-minotaurus-brown-600: #b64a32;
  --color-minotaurus-brown-700: #9a351f;
  --color-minotaurus-brown-800: #871b00;
  --color-minotaurus-brown-900: #671807;
  --color-minotaurus-brown-950: #450b01;
  --color-kiwi: #719e43;
  --color-kiwi-50: #eaffd8;
  --color-kiwi-100: #dcfac3;
  --color-kiwi-200: #c6e9a8;
  --color-kiwi-300: #aed58a;
  --color-kiwi-400: #8cb863;
  --color-kiwi-500: #719e43;
  --color-kiwi-600: #568125;
  --color-kiwi-700: #406709;
  --color-kiwi-800: #305100;
  --color-kiwi-900: #233e00;
  --color-kiwi-950: #142600;
  --color-gingerbread: #8f4a30;
  --color-gingerbread-50: #fff2ed;
  --color-gingerbread-100: #ffe5db;
  --color-gingerbread-200: #ffcdba;
  --color-gingerbread-300: #f5b39b;
  --color-gingerbread-400: #db9379;
  --color-gingerbread-500: #c2785d;
  --color-gingerbread-600: #a65f45;
  --color-gingerbread-700: #8f4a30;
  --color-gingerbread-800: #723822;
  --color-gingerbread-900: #5b2916;
  --color-gingerbread-950: #3c1809;
}