Catch the Wave to Sun-Kissed Sands Color Palette

About this palette

Catch the Wave to Sun-Kissed Sands is a 4-color pastel, light, cool palette: #B1D7D1 (Catch the Wave), #CAB6DD (Viking Diva), #AEF3EE (Pale King’s Blue), #FFEDBF (Sun-Kissed Sands). It mixes turquoise, purple, yellow tones and feels cool overall. The strongest text pairing is #CAB6DD on #FFEDBF with a contrast ratio of 1.61:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Catch the Wave	rgb(177, 215, 209)	hsl(171, 32%, 77%)
Viking Diva	rgb(202, 182, 221)	hsl(271, 36%, 79%)
Pale King’s Blue	rgb(174, 243, 238)	hsl(176, 74%, 82%)
Sun-Kissed Sands	rgb(255, 237, 191)	hsl(43, 100%, 87%)

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

/* Catch the Wave to Sun-Kissed Sands — https://swatchly.xyz/palette/b1d7d1-cab6dd-aef3ee-ffedbf */
:root {
  --catch-the-wave: #b1d7d1;
  --viking-diva: #cab6dd;
  --pale-king-s-blue: #aef3ee;
  --sun-kissed-sands: #ffedbf;
}

Tailwind CSS v4

/* Catch the Wave to Sun-Kissed Sands — https://swatchly.xyz/palette/b1d7d1-cab6dd-aef3ee-ffedbf */
@theme {
  --color-catch-the-wave: #b1d7d1;
  --color-catch-the-wave-50: #def4f0;
  --color-catch-the-wave-100: #d0e9e5;
  --color-catch-the-wave-200: #b1d7d1;
  --color-catch-the-wave-300: #a0c1bc;
  --color-catch-the-wave-400: #80a49e;
  --color-catch-the-wave-500: #668a85;
  --color-catch-the-wave-600: #4f716c;
  --color-catch-the-wave-700: #3c5b56;
  --color-catch-the-wave-800: #2d4845;
  --color-catch-the-wave-900: #203835;
  --color-catch-the-wave-950: #122321;
  --color-viking-diva: #cab6dd;
  --color-viking-diva-50: #f8f1ff;
  --color-viking-diva-100: #f1e4fe;
  --color-viking-diva-200: #decfed;
  --color-viking-diva-300: #cab6dd;
  --color-viking-diva-400: #aa97bc;
  --color-viking-diva-500: #8f7ca1;
  --color-viking-diva-600: #746285;
  --color-viking-diva-700: #5d4d6c;
  --color-viking-diva-800: #493b56;
  --color-viking-diva-900: #392d44;
  --color-viking-diva-950: #241b2b;
  --color-pale-king-s-blue: #aef3ee;
  --color-pale-king-s-blue-50: #d1f8f5;
  --color-pale-king-s-blue-100: #aef3ee;
  --color-pale-king-s-blue-200: #a9ddd9;
  --color-pale-king-s-blue-300: #8fc9c5;
  --color-pale-king-s-blue-400: #6baca7;
  --color-pale-king-s-blue-500: #4e918d;
  --color-pale-king-s-blue-600: #357774;
  --color-pale-king-s-blue-700: #21615d;
  --color-pale-king-s-blue-800: #124c49;
  --color-pale-king-s-blue-900: #083b39;
  --color-pale-king-s-blue-950: #022523;
  --color-sun-kissed-sands: #ffedbf;
  --color-sun-kissed-sands-50: #fff7e3;
  --color-sun-kissed-sands-100: #ffedbf;
  --color-sun-kissed-sands-200: #e6d9b9;
  --color-sun-kissed-sands-300: #d0c29c;
  --color-sun-kissed-sands-400: #b2a278;
  --color-sun-kissed-sands-500: #96865b;
  --color-sun-kissed-sands-600: #7a6b42;
  --color-sun-kissed-sands-700: #62542e;
  --color-sun-kissed-sands-800: #4e4120;
  --color-sun-kissed-sands-900: #3c3215;
  --color-sun-kissed-sands-950: #261e0a;
}