Poolside to Rosetti Color Palette

About this palette

Poolside to Rosetti is a 5-color muted, vintage palette: #C1DEDE (Poolside), #865E5A (Chocolate Bliss), #638D92 (Gothic), #274448 (Mysterious Waters), #CB9294 (Rosetti). It mixes gray, red, turquoise tones and feels balanced overall. The strongest text pairing is #C1DEDE on #274448 with a contrast ratio of 7.36:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Poolside	rgb(193, 222, 222)	hsl(180, 31%, 81%)
Chocolate Bliss	rgb(134, 94, 90)	hsl(5, 20%, 44%)
Gothic	rgb(99, 141, 146)	hsl(186, 19%, 48%)
Mysterious Waters	rgb(39, 68, 72)	hsl(187, 30%, 22%)
Rosetti	rgb(203, 146, 148)	hsl(358, 35%, 68%)

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.

Aa7.36:1 Very good#C1DEDE on #274448
Aa7.36:1 Very good#274448 on #C1DEDE
Aa4.03:1 Poor#274448 on #CB9294
Aa4.03:1 Poor#CB9294 on #274448
Aa3.93:1 Poor#C1DEDE on #865E5A
Aa3.93:1 Poor#865E5A on #C1DEDE

Color blindness preview

CSS variables

/* Poolside to Rosetti — https://swatchly.xyz/palette/c1dede-865e5a-638d92-274448-cb9294 */
:root {
  --poolside: #c1dede;
  --chocolate-bliss: #865e5a;
  --gothic: #638d92;
  --mysterious-waters: #274448;
  --rosetti: #cb9294;
}

Tailwind CSS v4

/* Poolside to Rosetti — https://swatchly.xyz/palette/c1dede-865e5a-638d92-274448-cb9294 */
@theme {
  --color-poolside: #c1dede;
  --color-poolside-50: #e9f9f9;
  --color-poolside-100: #ddefef;
  --color-poolside-200: #c1dede;
  --color-poolside-300: #aec6c6;
  --color-poolside-400: #8da7a7;
  --color-poolside-500: #718c8c;
  --color-poolside-600: #587172;
  --color-poolside-700: #435a5b;
  --color-poolside-800: #324747;
  --color-poolside-900: #253737;
  --color-poolside-950: #152222;
  --color-chocolate-bliss: #865e5a;
  --color-chocolate-bliss-50: #fff2f0;
  --color-chocolate-bliss-100: #ffe3e0;
  --color-chocolate-bliss-200: #f0cdc9;
  --color-chocolate-bliss-300: #dcb5b1;
  --color-chocolate-bliss-400: #be9490;
  --color-chocolate-bliss-500: #a27874;
  --color-chocolate-bliss-600: #865e5a;
  --color-chocolate-bliss-700: #6c4946;
  --color-chocolate-bliss-800: #563835;
  --color-chocolate-bliss-900: #442a28;
  --color-chocolate-bliss-950: #2c1917;
  --color-gothic: #638d92;
  --color-gothic-50: #e2fafd;
  --color-gothic-100: #d5f1f4;
  --color-gothic-200: #bddee2;
  --color-gothic-300: #a3c8cc;
  --color-gothic-400: #80a9ae;
  --color-gothic-500: #638d92;
  --color-gothic-600: #4a7277;
  --color-gothic-700: #365b60;
  --color-gothic-800: #27484c;
  --color-gothic-900: #1c373b;
  --color-gothic-950: #0e2325;
  --color-mysterious-waters: #274448;
  --color-mysterious-waters-50: #e7f9fc;
  --color-mysterious-waters-100: #dbf0f3;
  --color-mysterious-waters-200: #c5dde0;
  --color-mysterious-waters-300: #aac6ca;
  --color-mysterious-waters-400: #88a6ab;
  --color-mysterious-waters-500: #6c8a8f;
  --color-mysterious-waters-600: #526f73;
  --color-mysterious-waters-700: #3d575b;
  --color-mysterious-waters-800: #274448;
  --color-mysterious-waters-900: #203436;
  --color-mysterious-waters-950: #122022;
  --color-rosetti: #cb9294;
  --color-rosetti-50: #fff2f2;
  --color-rosetti-100: #ffe5e5;
  --color-rosetti-200: #f9cccd;
  --color-rosetti-300: #e6b4b5;
  --color-rosetti-400: #cb9294;
  --color-rosetti-500: #ad7779;
  --color-rosetti-600: #905c5f;
  --color-rosetti-700: #764749;
  --color-rosetti-800: #5e3638;
  --color-rosetti-900: #4a282a;
  --color-rosetti-950: #301719;
}