Sea Serpent to Velour Scar Color Palette

About this palette

Sea Serpent to Velour Scar is a 4-color vintage palette: #42C2C8 (Sea Serpent), #C9FCF8 (Glacial Drift), #662627 (Jazz), #945862 (Velour Scar). It mixes turquoise, white, brown, red tones and feels balanced overall. The strongest text pairing is #C9FCF8 on #662627 with a contrast ratio of 10.03:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Serpent	rgb(66, 194, 200)	hsl(183, 55%, 52%)
Glacial Drift	rgb(201, 252, 248)	hsl(175, 89%, 89%)
Jazz	rgb(102, 38, 39)	hsl(359, 46%, 27%)
Velour Scar	rgb(148, 88, 98)	hsl(350, 25%, 46%)

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.03:1 Very good#C9FCF8 on #662627
Aa10.03:1 Very good#662627 on #C9FCF8
Aa5.23:1 Good#42C2C8 on #662627
Aa5.23:1 Good#662627 on #42C2C8
Aa4.90:1 Good#C9FCF8 on #945862
Aa4.90:1 Good#945862 on #C9FCF8

Color blindness preview

CSS variables

/* Sea Serpent to Velour Scar — https://swatchly.xyz/palette/42c2c8-c9fcf8-662627-945862 */
:root {
  --sea-serpent: #42c2c8;
  --glacial-drift: #c9fcf8;
  --jazz: #662627;
  --velour-scar: #945862;
}

Tailwind CSS v4

/* Sea Serpent to Velour Scar — https://swatchly.xyz/palette/42c2c8-c9fcf8-662627-945862 */
@theme {
  --color-sea-serpent: #42c2c8;
  --color-sea-serpent-50: #e9feff;
  --color-sea-serpent-100: #c9fdff;
  --color-sea-serpent-200: #a2f0f3;
  --color-sea-serpent-300: #81dde1;
  --color-sea-serpent-400: #42c2c8;
  --color-sea-serpent-500: #10a3a9;
  --color-sea-serpent-600: #008388;
  --color-sea-serpent-700: #00686c;
  --color-sea-serpent-800: #005054;
  --color-sea-serpent-900: #003d3f;
  --color-sea-serpent-950: #002527;
  --color-glacial-drift: #c9fcf8;
  --color-glacial-drift-50: #e8fffd;
  --color-glacial-drift-100: #c9fcf8;
  --color-glacial-drift-200: #c1e4e1;
  --color-glacial-drift-300: #a4ceca;
  --color-glacial-drift-400: #80aeab;
  --color-glacial-drift-500: #62928f;
  --color-glacial-drift-600: #487673;
  --color-glacial-drift-700: #335e5b;
  --color-glacial-drift-800: #244a48;
  --color-glacial-drift-900: #193937;
  --color-glacial-drift-950: #0c2422;
  --color-jazz: #662627;
  --color-jazz-50: #fff2f1;
  --color-jazz-100: #ffe4e2;
  --color-jazz-200: #ffc8c5;
  --color-jazz-300: #efaca9;
  --color-jazz-400: #d28987;
  --color-jazz-500: #b56d6a;
  --color-jazz-600: #965251;
  --color-jazz-700: #793d3c;
  --color-jazz-800: #662627;
  --color-jazz-900: #4b2020;
  --color-jazz-950: #301212;
  --color-velour-scar: #945862;
  --color-velour-scar-50: #fff1f3;
  --color-velour-scar-100: #ffe3e7;
  --color-velour-scar-200: #fcc8cf;
  --color-velour-scar-300: #e9afb7;
  --color-velour-scar-400: #cc8e97;
  --color-velour-scar-500: #b1727c;
  --color-velour-scar-600: #945862;
  --color-velour-scar-700: #79434d;
  --color-velour-scar-800: #61323b;
  --color-velour-scar-900: #4c252c;
  --color-velour-scar-950: #31151b;
}