Poolside to Sunken Ship Color Palette

About this palette

Poolside to Sunken Ship is a 5-color muted, cool, gradient palette: #BADFE2 (Poolside), #8AC7C7 (Cerulean Skies), #408287 (Paradiso), #2D5D5E (Lacrosse), #112423 (Sunken Ship). It mixes turquoise, gray tones and feels cool overall. The strongest text pairing is #BADFE2 on #112423 with a contrast ratio of 11.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poolside	rgb(186, 223, 226)	hsl(184, 41%, 81%)
Cerulean Skies	rgb(138, 199, 199)	hsl(180, 35%, 66%)
Paradiso	rgb(64, 130, 135)	hsl(184, 36%, 39%)
Lacrosse	rgb(45, 93, 94)	hsl(181, 35%, 27%)
Sunken Ship	rgb(17, 36, 35)	hsl(177, 36%, 10%)

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.34:1 Very good#BADFE2 on #112423
Aa11.34:1 Very good#112423 on #BADFE2
Aa8.52:1 Very good#8AC7C7 on #112423
Aa8.52:1 Very good#112423 on #8AC7C7
Aa5.19:1 Good#BADFE2 on #2D5D5E
Aa5.19:1 Good#2D5D5E on #BADFE2
Aa3.90:1 Poor#8AC7C7 on #2D5D5E
Aa3.90:1 Poor#2D5D5E on #8AC7C7

Color blindness preview

CSS variables

/* Poolside to Sunken Ship — https://swatchly.xyz/palette/badfe2-8ac7c7-408287-2d5d5e-112423 */
:root {
  --poolside: #badfe2;
  --cerulean-skies: #8ac7c7;
  --paradiso: #408287;
  --lacrosse: #2d5d5e;
  --sunken-ship: #112423;
}

Tailwind CSS v4

/* Poolside to Sunken Ship — https://swatchly.xyz/palette/badfe2-8ac7c7-408287-2d5d5e-112423 */
@theme {
  --color-poolside: #badfe2;
  --color-poolside-50: #e5f9fb;
  --color-poolside-100: #d9f0f2;
  --color-poolside-200: #badfe2;
  --color-poolside-300: #a8c7ca;
  --color-poolside-400: #86a8ab;
  --color-poolside-500: #6b8d90;
  --color-poolside-600: #517275;
  --color-poolside-700: #3d5b5e;
  --color-poolside-800: #2d484a;
  --color-poolside-900: #203739;
  --color-poolside-950: #122224;
  --color-cerulean-skies: #8ac7c7;
  --color-cerulean-skies-50: #d7faf9;
  --color-cerulean-skies-100: #c8efef;
  --color-cerulean-skies-200: #addcdc;
  --color-cerulean-skies-300: #8ac7c7;
  --color-cerulean-skies-400: #6ea8a8;
  --color-cerulean-skies-500: #528e8e;
  --color-cerulean-skies-600: #397474;
  --color-cerulean-skies-700: #265d5e;
  --color-cerulean-skies-800: #194a4a;
  --color-cerulean-skies-900: #0f3a3a;
  --color-cerulean-skies-950: #052425;
  --color-paradiso: #408287;
  --color-paradiso-50: #dcfdff;
  --color-paradiso-100: #cef6f9;
  --color-paradiso-200: #b7e6e9;
  --color-paradiso-300: #9cd2d6;
  --color-paradiso-400: #78b5ba;
  --color-paradiso-500: #5a9ba0;
  --color-paradiso-600: #408287;
  --color-paradiso-700: #29686d;
  --color-paradiso-800: #175256;
  --color-paradiso-900: #0b3f43;
  --color-paradiso-950: #03282a;
  --color-lacrosse: #2d5d5e;
  --color-lacrosse-50: #e0fcfc;
  --color-lacrosse-100: #d3f2f3;
  --color-lacrosse-200: #bbe0e0;
  --color-lacrosse-300: #9fcaca;
  --color-lacrosse-400: #7cabac;
  --color-lacrosse-500: #5f8f90;
  --color-lacrosse-600: #457475;
  --color-lacrosse-700: #2d5d5e;
  --color-lacrosse-800: #224949;
  --color-lacrosse-900: #173839;
  --color-lacrosse-950: #0b2324;
  --color-sunken-ship: #112423;
  --color-sunken-ship-50: #ebf8f7;
  --color-sunken-ship-100: #e0efee;
  --color-sunken-ship-200: #cadcda;
  --color-sunken-ship-300: #b2c6c4;
  --color-sunken-ship-400: #91a7a5;
  --color-sunken-ship-500: #768b8a;
  --color-sunken-ship-600: #5c7170;
  --color-sunken-ship-700: #475a59;
  --color-sunken-ship-800: #364746;
  --color-sunken-ship-900: #293736;
  --color-sunken-ship-950: #112423;
}