Near Moon to Raging Thunderstorm color palette

68E3EENear Moon 00CCD6Sea Serpent 6291F2Polar Glow 006880Teal With It 004D68Raging Thunderstorm

About this palette

Near Moon to Raging Thunderstorm is a 5-color cool palette: #68E3EE (Near Moon), #00CCD6 (Sea Serpent), #6291F2 (Polar Glow), #006880 (Teal With It), #004D68 (Raging Thunderstorm). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #68E3EE on #004D68 with a contrast ratio of 6.11:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Near Moon	rgb(104, 227, 238)	hsl(185, 80%, 67%)
Sea Serpent	rgb(0, 204, 214)	hsl(183, 100%, 42%)
Polar Glow	rgb(98, 145, 242)	hsl(220, 85%, 67%)
Teal With It	rgb(0, 104, 128)	hsl(191, 100%, 25%)
Raging Thunderstorm	rgb(0, 77, 104)	hsl(196, 100%, 20%)

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.11:1 Good#68E3EE on #004D68
Aa6.11:1 Good#004D68 on #68E3EE
Aa4.69:1 Good#00CCD6 on #004D68
Aa4.69:1 Good#004D68 on #00CCD6
Aa4.20:1 Poor#68E3EE on #006880
Aa4.20:1 Poor#006880 on #68E3EE
Aa3.22:1 Poor#00CCD6 on #006880
Aa3.22:1 Poor#006880 on #00CCD6

Color blindness preview

CSS variables

/* Near Moon to Raging Thunderstorm — https://swatchly.xyz/palette/68e3ee-00ccd6-6291f2-006880-004d68 */
:root {
  --near-moon: #68e3ee;
  --sea-serpent: #00ccd6;
  --polar-glow: #6291f2;
  --teal-with-it: #006880;
  --raging-thunderstorm: #004d68;
}

Tailwind CSS v4

/* Near Moon to Raging Thunderstorm — https://swatchly.xyz/palette/68e3ee-00ccd6-6291f2-006880-004d68 */
@theme {
  --color-near-moon: #68e3ee;
  --color-near-moon-50: #c4faff;
  --color-near-moon-100: #a7f2f9;
  --color-near-moon-200: #68e3ee;
  --color-near-moon-300: #62ccd5;
  --color-near-moon-400: #2daeb9;
  --color-near-moon-500: #00939d;
  --color-near-moon-600: #007780;
  --color-near-moon-700: #006067;
  --color-near-moon-800: #004c52;
  --color-near-moon-900: #003b3f;
  --color-near-moon-950: #002528;
  --color-sea-serpent: #00ccd6;
  --color-sea-serpent-50: #bffbff;
  --color-sea-serpent-100: #98f4fa;
  --color-sea-serpent-200: #6ee1e8;
  --color-sea-serpent-300: #00ccd6;
  --color-sea-serpent-400: #00acb4;
  --color-sea-serpent-500: #008f97;
  --color-sea-serpent-600: #00747a;
  --color-sea-serpent-700: #005d62;
  --color-sea-serpent-800: #004a4e;
  --color-sea-serpent-900: #003b3e;
  --color-sea-serpent-950: #002527;
  --color-polar-glow: #6291f2;
  --color-polar-glow-50: #e9f1ff;
  --color-polar-glow-100: #d7e5ff;
  --color-polar-glow-200: #b6cfff;
  --color-polar-glow-300: #90b5ff;
  --color-polar-glow-400: #6291f2;
  --color-polar-glow-500: #4a77d6;
  --color-polar-glow-600: #355eb7;
  --color-polar-glow-700: #254a9a;
  --color-polar-glow-800: #193980;
  --color-polar-glow-900: #112c68;
  --color-polar-glow-950: #081b48;
  --color-teal-with-it: #006880;
  --color-teal-with-it-50: #e7f9ff;
  --color-teal-with-it-100: #cef2ff;
  --color-teal-with-it-200: #aae4f7;
  --color-teal-with-it-300: #8dd0e6;
  --color-teal-with-it-400: #66b2cb;
  --color-teal-with-it-500: #4698b1;
  --color-teal-with-it-600: #297e97;
  --color-teal-with-it-700: #006880;
  --color-teal-with-it-800: #005165;
  --color-teal-with-it-900: #003f4e;
  --color-teal-with-it-950: #002833;
  --color-raging-thunderstorm: #004d68;
  --color-raging-thunderstorm-50: #eaf8ff;
  --color-raging-thunderstorm-100: #d4f0ff;
  --color-raging-thunderstorm-200: #b1dff7;
  --color-raging-thunderstorm-300: #95cae5;
  --color-raging-thunderstorm-400: #70acc9;
  --color-raging-thunderstorm-500: #5391af;
  --color-raging-thunderstorm-600: #387793;
  --color-raging-thunderstorm-700: #24607a;
  --color-raging-thunderstorm-800: #004d68;
  --color-raging-thunderstorm-900: #0a3b4f;
  --color-raging-thunderstorm-950: #032533;
}