Wave to Cloudless Color Palette

About this palette

Wave to Cloudless is a 4-color pastel, light, cool palette: #A4CDD4 (Wave), #F9C7FA (Sugar Chic), #D4E2B6 (April Showers), #D7EEFF (Cloudless). It mixes turquoise, pink, green, white tones and feels cool overall. The strongest text pairing is #A4CDD4 on #D7EEFF with a contrast ratio of 1.43:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wave	rgb(164, 205, 212)	hsl(189, 36%, 74%)
Sugar Chic	rgb(249, 199, 250)	hsl(299, 84%, 88%)
April Showers	rgb(212, 226, 182)	hsl(79, 43%, 80%)
Cloudless	rgb(215, 238, 255)	hsl(206, 100%, 92%)

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

/* Wave to Cloudless — https://swatchly.xyz/palette/a4cdd4-f9c7fa-d4e2b6-d7eeff */
:root {
  --wave: #a4cdd4;
  --sugar-chic: #f9c7fa;
  --april-showers: #d4e2b6;
  --cloudless: #d7eeff;
}

Tailwind CSS v4

/* Wave to Cloudless — https://swatchly.xyz/palette/a4cdd4-f9c7fa-d4e2b6-d7eeff */
@theme {
  --color-wave: #a4cdd4;
  --color-wave-50: #e7fbff;
  --color-wave-100: #daf3f7;
  --color-wave-200: #c3e1e6;
  --color-wave-300: #a4cdd4;
  --color-wave-400: #86acb3;
  --color-wave-500: #699097;
  --color-wave-600: #4f757b;
  --color-wave-700: #3a5d63;
  --color-wave-800: #2a494e;
  --color-wave-900: #1e383c;
  --color-wave-950: #102326;
  --color-sugar-chic: #f9c7fa;
  --color-sugar-chic-50: #fff3ff;
  --color-sugar-chic-100: #ffe3ff;
  --color-sugar-chic-200: #f9c7fa;
  --color-sugar-chic-300: #ddb3dd;
  --color-sugar-chic-400: #bf91c0;
  --color-sugar-chic-500: #a375a4;
  --color-sugar-chic-600: #865b88;
  --color-sugar-chic-700: #6d456e;
  --color-sugar-chic-800: #563457;
  --color-sugar-chic-900: #432645;
  --color-sugar-chic-950: #2b162c;
  --color-april-showers: #d4e2b6;
  --color-april-showers-50: #f4fbe4;
  --color-april-showers-100: #eaf3d8;
  --color-april-showers-200: #d4e2b6;
  --color-april-showers-300: #becaa5;
  --color-april-showers-400: #9daa82;
  --color-april-showers-500: #818e65;
  --color-april-showers-600: #67734b;
  --color-april-showers-700: #505b37;
  --color-april-showers-800: #3e4728;
  --color-april-showers-900: #2f361c;
  --color-april-showers-950: #1c220f;
  --color-cloudless: #d7eeff;
  --color-cloudless-50: #ebf6ff;
  --color-cloudless-100: #d7eeff;
  --color-cloudless-200: #c9d9e6;
  --color-cloudless-300: #b0c3d1;
  --color-cloudless-400: #90a4b4;
  --color-cloudless-500: #748998;
  --color-cloudless-600: #5b6f7d;
  --color-cloudless-700: #465865;
  --color-cloudless-800: #354550;
  --color-cloudless-900: #27353e;
  --color-cloudless-950: #172128;
}