Abyssal Waters to Thalassa Color Palette

About this palette

Abyssal Waters to Thalassa is a 5-color muted, cool palette: #00595F (Abyssal Waters), #F3D0CF (Strawberry Ripple), #7E8A58 (Moss Gardens), #2A2533 (Haiti), #5EB0B8 (Thalassa). It mixes turquoise, pink, green, gray tones and feels cool overall. The strongest text pairing is #F3D0CF on #2A2533 with a contrast ratio of 10.44:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Abyssal Waters	rgb(0, 89, 95)	hsl(184, 100%, 19%)
Strawberry Ripple	rgb(243, 208, 207)	hsl(2, 60%, 88%)
Moss Gardens	rgb(126, 138, 88)	hsl(74, 22%, 44%)
Haiti	rgb(42, 37, 51)	hsl(261, 16%, 17%)
Thalassa	rgb(94, 176, 184)	hsl(185, 39%, 55%)

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.44:1 Very good#F3D0CF on #2A2533
Aa10.44:1 Very good#2A2533 on #F3D0CF
Aa5.94:1 Good#2A2533 on #5EB0B8
Aa5.94:1 Good#5EB0B8 on #2A2533
Aa5.68:1 Good#00595F on #F3D0CF
Aa5.68:1 Good#F3D0CF on #00595F
Aa4.01:1 Poor#7E8A58 on #2A2533
Aa4.01:1 Poor#2A2533 on #7E8A58

Color blindness preview

CSS variables

/* Abyssal Waters to Thalassa — https://swatchly.xyz/palette/00595f-f3d0cf-7e8a58-2a2533-5eb0b8 */
:root {
  --abyssal-waters: #00595f;
  --strawberry-ripple: #f3d0cf;
  --moss-gardens: #7e8a58;
  --haiti: #2a2533;
  --thalassa: #5eb0b8;
}

Tailwind CSS v4

/* Abyssal Waters to Thalassa — https://swatchly.xyz/palette/00595f-f3d0cf-7e8a58-2a2533-5eb0b8 */
@theme {
  --color-abyssal-waters: #00595f;
  --color-abyssal-waters-50: #dcfcff;
  --color-abyssal-waters-100: #caf5f8;
  --color-abyssal-waters-200: #ade1e6;
  --color-abyssal-waters-300: #8ecad0;
  --color-abyssal-waters-400: #66aab0;
  --color-abyssal-waters-500: #468e94;
  --color-abyssal-waters-600: #2a7177;
  --color-abyssal-waters-700: #00595f;
  --color-abyssal-waters-800: #07454a;
  --color-abyssal-waters-900: #013639;
  --color-abyssal-waters-950: #002124;
  --color-strawberry-ripple: #f3d0cf;
  --color-strawberry-ripple-50: #fff4f3;
  --color-strawberry-ripple-100: #fde7e6;
  --color-strawberry-ripple-200: #f3d0cf;
  --color-strawberry-ripple-300: #d8bbba;
  --color-strawberry-ripple-400: #ba9a99;
  --color-strawberry-ripple-500: #9e7e7d;
  --color-strawberry-ripple-600: #826463;
  --color-strawberry-ripple-700: #694e4d;
  --color-strawberry-ripple-800: #533b3b;
  --color-strawberry-ripple-900: #412d2d;
  --color-strawberry-ripple-950: #291b1b;
  --color-moss-gardens: #7e8a58;
  --color-moss-gardens-50: #f1f9db;
  --color-moss-gardens-100: #e6efce;
  --color-moss-gardens-200: #d1dcb4;
  --color-moss-gardens-300: #bac598;
  --color-moss-gardens-400: #9aa675;
  --color-moss-gardens-500: #7e8a58;
  --color-moss-gardens-600: #657040;
  --color-moss-gardens-700: #4f592d;
  --color-moss-gardens-800: #3d461f;
  --color-moss-gardens-900: #2f3615;
  --color-moss-gardens-950: #1d220a;
  --color-haiti: #2a2533;
  --color-haiti-50: #f7f3fe;
  --color-haiti-100: #ede9f5;
  --color-haiti-200: #d9d5e3;
  --color-haiti-300: #c3bece;
  --color-haiti-400: #a49eaf;
  --color-haiti-500: #8a8596;
  --color-haiti-600: #726c7c;
  --color-haiti-700: #5c5766;
  --color-haiti-800: #4b4654;
  --color-haiti-900: #3c3844;
  --color-haiti-950: #2a2533;
  --color-thalassa: #5eb0b8;
  --color-thalassa-50: #ddfcff;
  --color-thalassa-100: #c5f5fa;
  --color-thalassa-200: #a9e3e9;
  --color-thalassa-300: #8aced5;
  --color-thalassa-400: #5eb0b8;
  --color-thalassa-500: #41949c;
  --color-thalassa-600: #237980;
  --color-thalassa-700: #076168;
  --color-thalassa-800: #004c52;
  --color-thalassa-900: #003b3f;
  --color-thalassa-950: #002528;
}