Sea Serpent to Black Stallion color palette

00CCDASea Serpent 009095Dark Cyan 005962Abyssal Waters 91F1F9Permafrost 001E1EBlack Stallion

About this palette

Sea Serpent to Black Stallion is a 5-color cool, monochromatic palette: #00CCDA (Sea Serpent), #009095 (Dark Cyan), #005962 (Abyssal Waters), #91F1F9 (Permafrost), #001E1E (Black Stallion). It mixes turquoise tones and feels cool overall. The strongest text pairing is #91F1F9 on #001E1E with a contrast ratio of 13.41:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Serpent	rgb(0, 204, 218)	hsl(184, 100%, 43%)
Dark Cyan	rgb(0, 144, 149)	hsl(182, 100%, 29%)
Abyssal Waters	rgb(0, 89, 98)	hsl(186, 100%, 19%)
Permafrost	rgb(145, 241, 249)	hsl(185, 90%, 77%)
Black Stallion	rgb(0, 30, 30)	hsl(180, 100%, 6%)

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.

Aa13.41:1 Super#91F1F9 on #001E1E
Aa13.41:1 Super#001E1E on #91F1F9
Aa8.84:1 Very good#00CCDA on #001E1E
Aa8.84:1 Very good#001E1E on #00CCDA
Aa6.20:1 Good#005962 on #91F1F9
Aa6.20:1 Good#91F1F9 on #005962
Aa4.50:1 Good#009095 on #001E1E
Aa4.50:1 Good#001E1E on #009095

Color blindness preview

CSS variables

/* Sea Serpent to Black Stallion — https://swatchly.xyz/palette/00ccda-009095-005962-91f1f9-001e1e */
:root {
  --sea-serpent: #00ccda;
  --dark-cyan: #009095;
  --abyssal-waters: #005962;
  --permafrost: #91f1f9;
  --black-stallion: #001e1e;
}

Tailwind CSS v4

/* Sea Serpent to Black Stallion — https://swatchly.xyz/palette/00ccda-009095-005962-91f1f9-001e1e */
@theme {
  --color-sea-serpent: #00ccda;
  --color-sea-serpent-50: #c5faff;
  --color-sea-serpent-100: #98f4fd;
  --color-sea-serpent-200: #6fe1ec;
  --color-sea-serpent-300: #00ccda;
  --color-sea-serpent-400: #00abb7;
  --color-sea-serpent-500: #008f99;
  --color-sea-serpent-600: #00747d;
  --color-sea-serpent-700: #005d64;
  --color-sea-serpent-800: #004a50;
  --color-sea-serpent-900: #003b3f;
  --color-sea-serpent-950: #002528;
  --color-dark-cyan: #009095;
  --color-dark-cyan-50: #d2fdff;
  --color-dark-cyan-100: #b6f6f9;
  --color-dark-cyan-200: #95e3e6;
  --color-dark-cyan-300: #70cdd1;
  --color-dark-cyan-400: #3eadb2;
  --color-dark-cyan-500: #009095;
  --color-dark-cyan-600: #007478;
  --color-dark-cyan-700: #005c60;
  --color-dark-cyan-800: #00494b;
  --color-dark-cyan-900: #00393b;
  --color-dark-cyan-950: #002425;
  --color-abyssal-waters: #005962;
  --color-abyssal-waters-50: #e0fbff;
  --color-abyssal-waters-100: #c9f4fa;
  --color-abyssal-waters-200: #ade1e8;
  --color-abyssal-waters-300: #8ecad3;
  --color-abyssal-waters-400: #66aab3;
  --color-abyssal-waters-500: #468d97;
  --color-abyssal-waters-600: #2a717a;
  --color-abyssal-waters-700: #005962;
  --color-abyssal-waters-800: #06454c;
  --color-abyssal-waters-900: #01363b;
  --color-abyssal-waters-950: #002125;
  --color-permafrost: #91f1f9;
  --color-permafrost-50: #edfeff;
  --color-permafrost-100: #cdfbff;
  --color-permafrost-200: #91f1f9;
  --color-permafrost-300: #8ad6dc;
  --color-permafrost-400: #5cb6be;
  --color-permafrost-500: #359aa1;
  --color-permafrost-600: #067d85;
  --color-permafrost-700: #006369;
  --color-permafrost-800: #004c51;
  --color-permafrost-900: #003b3f;
  --color-permafrost-950: #002528;
  --color-black-stallion: #001e1e;
  --color-black-stallion-50: #e7faf9;
  --color-black-stallion-100: #dbf0f0;
  --color-black-stallion-200: #c4dddd;
  --color-black-stallion-300: #abc8c7;
  --color-black-stallion-400: #89a9a8;
  --color-black-stallion-500: #6c8c8b;
  --color-black-stallion-600: #51706f;
  --color-black-stallion-700: #3c5757;
  --color-black-stallion-800: #2b4342;
  --color-black-stallion-900: #1e3131;
  --color-black-stallion-950: #001e1e;
}