Sparky Blue to Glassmith Color Palette

About this palette

Sparky Blue to Glassmith is a 5-color cool, monochromatic palette: #4AEEFF (Sparky Blue), #007376 (Prismarine), #00494A (Tropical Forest), #0099A2 (Java), #00BBC8 (Glassmith). It mixes turquoise tones and feels cool overall. The strongest text pairing is #4AEEFF on #00494A with a contrast ratio of 7.29:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sparky Blue	rgb(74, 238, 255)	hsl(186, 100%, 65%)
Prismarine	rgb(0, 115, 118)	hsl(182, 100%, 23%)
Tropical Forest	rgb(0, 73, 74)	hsl(181, 100%, 15%)
Java	rgb(0, 153, 162)	hsl(183, 100%, 32%)
Glassmith	rgb(0, 187, 200)	hsl(184, 100%, 39%)

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.

Aa7.29:1 Very good#4AEEFF on #00494A
Aa7.29:1 Very good#00494A on #4AEEFF
Aa4.36:1 Poor#00494A on #00BBC8
Aa4.36:1 Poor#00BBC8 on #00494A
Aa4.03:1 Poor#4AEEFF on #007376
Aa4.03:1 Poor#007376 on #4AEEFF

Color blindness preview

CSS variables

/* Sparky Blue to Glassmith — https://swatchly.xyz/palette/4aeeff-007376-00494a-0099a2-00bbc8 */
:root {
  --sparky-blue: #4aeeff;
  --prismarine: #007376;
  --tropical-forest: #00494a;
  --java: #0099a2;
  --glassmith: #00bbc8;
}

Tailwind CSS v4

/* Sparky Blue to Glassmith — https://swatchly.xyz/palette/4aeeff-007376-00494a-0099a2-00bbc8 */
@theme {
  --color-sparky-blue: #4aeeff;
  --color-sparky-blue-50: #d9fbff;
  --color-sparky-blue-100: #b4f7ff;
  --color-sparky-blue-200: #4aeeff;
  --color-sparky-blue-300: #51d4e2;
  --color-sparky-blue-400: #00b5c4;
  --color-sparky-blue-500: #0097a3;
  --color-sparky-blue-600: #007a84;
  --color-sparky-blue-700: #006169;
  --color-sparky-blue-800: #004c53;
  --color-sparky-blue-900: #003b40;
  --color-sparky-blue-950: #002529;
  --color-prismarine: #007376;
  --color-prismarine-50: #d6feff;
  --color-prismarine-100: #c0f6f7;
  --color-prismarine-200: #a2e2e4;
  --color-prismarine-300: #81ccce;
  --color-prismarine-400: #56acaf;
  --color-prismarine-500: #328f92;
  --color-prismarine-600: #007376;
  --color-prismarine-700: #005b5e;
  --color-prismarine-800: #004849;
  --color-prismarine-900: #003739;
  --color-prismarine-950: #002324;
  --color-tropical-forest: #00494a;
  --color-tropical-forest-50: #dcfdfd;
  --color-tropical-forest-100: #cef4f4;
  --color-tropical-forest-200: #b5e2e2;
  --color-tropical-forest-300: #98cccc;
  --color-tropical-forest-400: #72acad;
  --color-tropical-forest-500: #549091;
  --color-tropical-forest-600: #3a7475;
  --color-tropical-forest-700: #265c5d;
  --color-tropical-forest-800: #00494a;
  --color-tropical-forest-900: #0d3738;
  --color-tropical-forest-950: #052223;
  --color-java: #0099a2;
  --color-java-50: #dcfdff;
  --color-java-100: #b8f9fe;
  --color-java-200: #98e8ee;
  --color-java-300: #75d3da;
  --color-java-400: #42b5bd;
  --color-java-500: #0099a2;
  --color-java-600: #007b83;
  --color-java-700: #006268;
  --color-java-800: #004d51;
  --color-java-900: #003b3f;
  --color-java-950: #002528;
  --color-glassmith: #00bbc8;
  --color-glassmith-50: #e2fcff;
  --color-glassmith-100: #c0f9ff;
  --color-glassmith-200: #8fecf5;
  --color-glassmith-300: #67d8e2;
  --color-glassmith-400: #00bbc8;
  --color-glassmith-500: #009ca6;
  --color-glassmith-600: #007d86;
  --color-glassmith-700: #00636b;
  --color-glassmith-800: #004d53;
  --color-glassmith-900: #003b40;
  --color-glassmith-950: #002528;
}