Sea Serpent to Merguez Color Palette

About this palette

Sea Serpent to Merguez is a 5-color warm palette: #02D0D7 (Sea Serpent), #315D94 (Starry Night), #F45573 (Ripe Malinka), #FFE4BF (Fricassée), #640025 (Merguez). It mixes turquoise, blue, red, yellow tones and feels warm overall. The strongest text pairing is #FFE4BF on #640025 with a contrast ratio of 10.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Serpent	rgb(2, 208, 215)	hsl(182, 98%, 43%)
Starry Night	rgb(49, 93, 148)	hsl(213, 50%, 39%)
Ripe Malinka	rgb(244, 85, 115)	hsl(349, 88%, 65%)
Fricassée	rgb(255, 228, 191)	hsl(35, 100%, 87%)
Merguez	rgb(100, 0, 37)	hsl(338, 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.

Aa10.90:1 Very good#FFE4BF on #640025
Aa10.90:1 Very good#640025 on #FFE4BF
Aa7.02:1 Very good#02D0D7 on #640025
Aa7.02:1 Very good#640025 on #02D0D7
Aa5.47:1 Good#315D94 on #FFE4BF
Aa5.47:1 Good#FFE4BF on #315D94
Aa4.08:1 Poor#F45573 on #640025
Aa4.08:1 Poor#640025 on #F45573

Color blindness preview

CSS variables

/* Sea Serpent to Merguez — https://swatchly.xyz/palette/02d0d7-315d94-f45573-ffe4bf-640025 */
:root {
  --sea-serpent: #02d0d7;
  --starry-night: #315d94;
  --ripe-malinka: #f45573;
  --fricass-e: #ffe4bf;
  --merguez: #640025;
}

Tailwind CSS v4

/* Sea Serpent to Merguez — https://swatchly.xyz/palette/02d0d7-315d94-f45573-ffe4bf-640025 */
@theme {
  --color-sea-serpent: #02d0d7;
  --color-sea-serpent-50: #c2fdff;
  --color-sea-serpent-100: #9bf7fb;
  --color-sea-serpent-200: #72e4e9;
  --color-sea-serpent-300: #02d0d7;
  --color-sea-serpent-400: #00afb5;
  --color-sea-serpent-500: #009297;
  --color-sea-serpent-600: #00767a;
  --color-sea-serpent-700: #005f62;
  --color-sea-serpent-800: #004b4e;
  --color-sea-serpent-900: #003b3d;
  --color-sea-serpent-950: #002527;
  --color-starry-night: #315d94;
  --color-starry-night-50: #eff6ff;
  --color-starry-night-100: #dfedff;
  --color-starry-night-200: #c0dbff;
  --color-starry-night-300: #9ec7fb;
  --color-starry-night-400: #7ba8e1;
  --color-starry-night-500: #608dc8;
  --color-starry-night-600: #4773ac;
  --color-starry-night-700: #315d94;
  --color-starry-night-800: #244876;
  --color-starry-night-900: #18375e;
  --color-starry-night-950: #0b223f;
  --color-ripe-malinka: #f45573;
  --color-ripe-malinka-50: #ffebed;
  --color-ripe-malinka-100: #ffdadd;
  --color-ripe-malinka-200: #ffbac0;
  --color-ripe-malinka-300: #ff919e;
  --color-ripe-malinka-400: #f45573;
  --color-ripe-malinka-500: #d6375b;
  --color-ripe-malinka-600: #b61845;
  --color-ripe-malinka-700: #970034;
  --color-ripe-malinka-800: #790028;
  --color-ripe-malinka-900: #61001e;
  --color-ripe-malinka-950: #420012;
  --color-fricass-e: #ffe4bf;
  --color-fricass-e-50: #fff1dd;
  --color-fricass-e-100: #ffe4bf;
  --color-fricass-e-200: #e6d2b7;
  --color-fricass-e-300: #d2bb9d;
  --color-fricass-e-400: #b49c7a;
  --color-fricass-e-500: #99815f;
  --color-fricass-e-600: #7e6746;
  --color-fricass-e-700: #665133;
  --color-fricass-e-800: #513f24;
  --color-fricass-e-900: #3f3019;
  --color-fricass-e-950: #281d0d;
  --color-merguez: #640025;
  --color-merguez-50: #fff1f3;
  --color-merguez-100: #ffe3e7;
  --color-merguez-200: #ffc6ce;
  --color-merguez-300: #ffa3b2;
  --color-merguez-400: #e37f91;
  --color-merguez-500: #c66276;
  --color-merguez-600: #a7485c;
  --color-merguez-700: #8a3347;
  --color-merguez-800: #702436;
  --color-merguez-900: #640025;
  --color-merguez-950: #3b0c18;
}