Sparky Blue to Turkish Jade Color Palette

About this palette

Sparky Blue to Turkish Jade is a 5-color cool, monochromatic palette: #48ECFE (Sparky Blue), #32ADB5 (Verdigris), #002B30 (Black Box), #006367 (Beau Vert), #008A96 (Turkish Jade). It mixes turquoise tones and feels cool overall. The strongest text pairing is #48ECFE on #002B30 with a contrast ratio of 10.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sparky Blue	rgb(72, 236, 254)	hsl(186, 99%, 64%)
Verdigris	rgb(50, 173, 181)	hsl(184, 57%, 45%)
Black Box	rgb(0, 43, 48)	hsl(186, 100%, 9%)
Beau Vert	rgb(0, 99, 103)	hsl(182, 100%, 20%)
Turkish Jade	rgb(0, 138, 150)	hsl(185, 100%, 29%)

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.

Aa10.59:1 Very good#48ECFE on #002B30
Aa10.59:1 Very good#002B30 on #48ECFE
Aa5.60:1 Good#32ADB5 on #002B30
Aa5.60:1 Good#002B30 on #32ADB5
Aa4.93:1 Good#48ECFE on #006367
Aa4.93:1 Good#006367 on #48ECFE
Aa3.66:1 Poor#002B30 on #008A96
Aa3.66:1 Poor#008A96 on #002B30

Color blindness preview

CSS variables

/* Sparky Blue to Turkish Jade — https://swatchly.xyz/palette/48ecfe-32adb5-002b30-006367-008a96 */
:root {
  --sparky-blue: #48ecfe;
  --verdigris: #32adb5;
  --black-box: #002b30;
  --beau-vert: #006367;
  --turkish-jade: #008a96;
}

Tailwind CSS v4

/* Sparky Blue to Turkish Jade — https://swatchly.xyz/palette/48ecfe-32adb5-002b30-006367-008a96 */
@theme {
  --color-sparky-blue: #48ecfe;
  --color-sparky-blue-50: #d6faff;
  --color-sparky-blue-100: #b0f6ff;
  --color-sparky-blue-200: #48ecfe;
  --color-sparky-blue-300: #4ed3e2;
  --color-sparky-blue-400: #00b4c3;
  --color-sparky-blue-500: #0096a3;
  --color-sparky-blue-600: #007984;
  --color-sparky-blue-700: #006069;
  --color-sparky-blue-800: #004c53;
  --color-sparky-blue-900: #003b40;
  --color-sparky-blue-950: #002529;
  --color-verdigris: #32adb5;
  --color-verdigris-50: #d1fcff;
  --color-verdigris-100: #b2f5fa;
  --color-verdigris-200: #91e3e8;
  --color-verdigris-300: #6bccd3;
  --color-verdigris-400: #32adb5;
  --color-verdigris-500: #00929a;
  --color-verdigris-600: #00767c;
  --color-verdigris-700: #005e63;
  --color-verdigris-800: #004a4e;
  --color-verdigris-900: #003a3d;
  --color-verdigris-950: #002527;
  --color-black-box: #002b30;
  --color-black-box-50: #e3fafe;
  --color-black-box-100: #d7f1f5;
  --color-black-box-200: #bfdee3;
  --color-black-box-300: #a5c9cd;
  --color-black-box-400: #82aaaf;
  --color-black-box-500: #679095;
  --color-black-box-600: #4f767b;
  --color-black-box-700: #3b6065;
  --color-black-box-800: #2c4d51;
  --color-black-box-900: #213d41;
  --color-black-box-950: #002b30;
  --color-beau-vert: #006367;
  --color-beau-vert-50: #d9fdff;
  --color-beau-vert-100: #c7f6f8;
  --color-beau-vert-200: #ace4e6;
  --color-beau-vert-300: #8ecfd2;
  --color-beau-vert-400: #67b0b4;
  --color-beau-vert-500: #479599;
  --color-beau-vert-600: #2a7a7e;
  --color-beau-vert-700: #006367;
  --color-beau-vert-800: #004d51;
  --color-beau-vert-900: #003c3e;
  --color-beau-vert-950: #002527;
  --color-turkish-jade: #008a96;
  --color-turkish-jade-50: #d7fbff;
  --color-turkish-jade-100: #b4f4fb;
  --color-turkish-jade-200: #93e0e9;
  --color-turkish-jade-300: #6ec9d3;
  --color-turkish-jade-400: #3da8b4;
  --color-turkish-jade-500: #008a96;
  --color-turkish-jade-600: #006f79;
  --color-turkish-jade-700: #005961;
  --color-turkish-jade-800: #00464c;
  --color-turkish-jade-900: #00373c;
  --color-turkish-jade-950: #002327;
}