Sea Serpent to Nightmare Color Palette

About this palette

Sea Serpent to Nightmare is a 5-color cool, earthy palette: #4BC3C6 (Sea Serpent), #F1C2FF (Purple’s Baby Sister), #22911E (Emerald), #76272E (Wine and Unwind), #102010 (Nightmare). It mixes turquoise, purple, green, brown tones and feels cool overall. The strongest text pairing is #F1C2FF on #102010 with a contrast ratio of 11.25:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Serpent	rgb(75, 195, 198)	hsl(181, 52%, 54%)
Purple’s Baby Sister	rgb(241, 194, 255)	hsl(286, 100%, 88%)
Emerald	rgb(34, 145, 30)	hsl(118, 66%, 34%)
Wine and Unwind	rgb(118, 39, 46)	hsl(355, 50%, 31%)
Nightmare	rgb(16, 32, 16)	hsl(120, 33%, 9%)

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.

Aa11.25:1 Very good#F1C2FF on #102010
Aa11.25:1 Very good#102010 on #F1C2FF
Aa8.03:1 Very good#4BC3C6 on #102010
Aa8.03:1 Very good#102010 on #4BC3C6
Aa6.62:1 Good#F1C2FF on #76272E
Aa6.62:1 Good#76272E on #F1C2FF
Aa4.72:1 Good#4BC3C6 on #76272E
Aa4.72:1 Good#76272E on #4BC3C6

Color blindness preview

CSS variables

/* Sea Serpent to Nightmare — https://swatchly.xyz/palette/4bc3c6-f1c2ff-22911e-76272e-102010 */
:root {
  --sea-serpent: #4bc3c6;
  --purple-s-baby-sister: #f1c2ff;
  --emerald: #22911e;
  --wine-and-unwind: #76272e;
  --nightmare: #102010;
}

Tailwind CSS v4

/* Sea Serpent to Nightmare — https://swatchly.xyz/palette/4bc3c6-f1c2ff-22911e-76272e-102010 */
@theme {
  --color-sea-serpent: #4bc3c6;
  --color-sea-serpent-50: #eaffff;
  --color-sea-serpent-100: #c8feff;
  --color-sea-serpent-200: #a7f0f2;
  --color-sea-serpent-300: #86dee0;
  --color-sea-serpent-400: #4bc3c6;
  --color-sea-serpent-500: #23a4a7;
  --color-sea-serpent-600: #008587;
  --color-sea-serpent-700: #00696b;
  --color-sea-serpent-800: #005153;
  --color-sea-serpent-900: #003d3f;
  --color-sea-serpent-950: #002526;
  --color-purple-s-baby-sister: #f1c2ff;
  --color-purple-s-baby-sister-50: #fbefff;
  --color-purple-s-baby-sister-100: #f8e0ff;
  --color-purple-s-baby-sister-200: #f1c2ff;
  --color-purple-s-baby-sister-300: #d7afe2;
  --color-purple-s-baby-sister-400: #b98ec6;
  --color-purple-s-baby-sister-500: #9e72ab;
  --color-purple-s-baby-sister-600: #82598e;
  --color-purple-s-baby-sister-700: #6a4475;
  --color-purple-s-baby-sister-800: #54335e;
  --color-purple-s-baby-sister-900: #42264a;
  --color-purple-s-baby-sister-950: #2a1630;
  --color-emerald: #22911e;
  --color-emerald-50: #e1ffde;
  --color-emerald-100: #c8ffc3;
  --color-emerald-200: #aaf2a4;
  --color-emerald-300: #8de087;
  --color-emerald-400: #65c45e;
  --color-emerald-500: #43ab3e;
  --color-emerald-600: #22911e;
  --color-emerald-700: #007500;
  --color-emerald-800: #005b00;
  --color-emerald-900: #004600;
  --color-emerald-950: #002c00;
  --color-wine-and-unwind: #76272e;
  --color-wine-and-unwind-50: #fff1f1;
  --color-wine-and-unwind-100: #ffe4e3;
  --color-wine-and-unwind-200: #ffc7c7;
  --color-wine-and-unwind-300: #f9a9aa;
  --color-wine-and-unwind-400: #dd8789;
  --color-wine-and-unwind-500: #c26b6e;
  --color-wine-and-unwind-600: #a45255;
  --color-wine-and-unwind-700: #893d41;
  --color-wine-and-unwind-800: #76272e;
  --color-wine-and-unwind-900: #592024;
  --color-wine-and-unwind-950: #3b1215;
  --color-nightmare: #102010;
  --color-nightmare-50: #edf9ed;
  --color-nightmare-100: #e2f0e2;
  --color-nightmare-200: #cdddcc;
  --color-nightmare-300: #b5c7b4;
  --color-nightmare-400: #94a894;
  --color-nightmare-500: #788c77;
  --color-nightmare-600: #5e705d;
  --color-nightmare-700: #485847;
  --color-nightmare-800: #364435;
  --color-nightmare-900: #273327;
  --color-nightmare-950: #102010;
}