Caribbean to Andromeda Blue Color Palette

About this palette

Caribbean to Andromeda Blue is a 4-color pastel, light, cool palette: #C4F5E4 (Caribbean), #FFEFDA (Peach Cream), #CDC2FF (Innocent Snowdrop), #A4CDE9 (Andromeda Blue). It mixes turquoise, white, purple, blue tones and feels cool overall. The strongest text pairing is #FFEFDA on #A4CDE9 with a contrast ratio of 1.49:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caribbean	rgb(196, 245, 228)	hsl(159, 71%, 86%)
Peach Cream	rgb(255, 239, 218)	hsl(34, 100%, 93%)
Innocent Snowdrop	rgb(205, 194, 255)	hsl(251, 100%, 88%)
Andromeda Blue	rgb(164, 205, 233)	hsl(204, 61%, 78%)

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.

Color blindness preview

CSS variables

/* Caribbean to Andromeda Blue — https://swatchly.xyz/palette/c4f5e4-ffefda-cdc2ff-a4cde9 */
:root {
  --caribbean: #c4f5e4;
  --peach-cream: #ffefda;
  --innocent-snowdrop: #cdc2ff;
  --andromeda-blue: #a4cde9;
}

Tailwind CSS v4

/* Caribbean to Andromeda Blue — https://swatchly.xyz/palette/c4f5e4-ffefda-cdc2ff-a4cde9 */
@theme {
  --color-caribbean: #c4f5e4;
  --color-caribbean-50: #dffaf0;
  --color-caribbean-100: #c4f5e4;
  --color-caribbean-200: #bbdfd2;
  --color-caribbean-300: #a1cabb;
  --color-caribbean-400: #7fab9c;
  --color-caribbean-500: #639081;
  --color-caribbean-600: #4a7668;
  --color-caribbean-700: #365f52;
  --color-caribbean-800: #264a3f;
  --color-caribbean-900: #1b3a30;
  --color-caribbean-950: #0e241d;
  --color-peach-cream: #ffefda;
  --color-peach-cream-50: #ffefda;
  --color-peach-cream-100: #f1e7d9;
  --color-peach-cream-200: #dfd3c4;
  --color-peach-cream-300: #cabdac;
  --color-peach-cream-400: #ac9e8b;
  --color-peach-cream-500: #928370;
  --color-peach-cream-600: #776957;
  --color-peach-cream-700: #5f5343;
  --color-peach-cream-800: #4b4032;
  --color-peach-cream-900: #3a3125;
  --color-peach-cream-950: #251e15;
  --color-innocent-snowdrop: #cdc2ff;
  --color-innocent-snowdrop-50: #fbfaff;
  --color-innocent-snowdrop-100: #f3f1ff;
  --color-innocent-snowdrop-200: #e1dbff;
  --color-innocent-snowdrop-300: #cdc2ff;
  --color-innocent-snowdrop-400: #aba1d9;
  --color-innocent-snowdrop-500: #8e83bc;
  --color-innocent-snowdrop-600: #72679e;
  --color-innocent-snowdrop-700: #5a4f81;
  --color-innocent-snowdrop-800: #453c67;
  --color-innocent-snowdrop-900: #342c50;
  --color-innocent-snowdrop-950: #201a34;
  --color-andromeda-blue: #a4cde9;
  --color-andromeda-blue-50: #f2f9ff;
  --color-andromeda-blue-100: #e0f2ff;
  --color-andromeda-blue-200: #c4e1f5;
  --color-andromeda-blue-300: #a4cde9;
  --color-andromeda-blue-400: #86acc6;
  --color-andromeda-blue-500: #688faa;
  --color-andromeda-blue-600: #4e748c;
  --color-andromeda-blue-700: #395b72;
  --color-andromeda-blue-800: #29475b;
  --color-andromeda-blue-900: #1c3646;
  --color-andromeda-blue-950: #0f212d;
}