Water to Whirlpool Color Palette

About this palette

Water to Whirlpool is a 4-color pastel, light, cool palette: #C6EFFF (Water), #C3C29B (Beige and Sage), #E9F0CE (Silkworm), #AFD4C7 (Whirlpool). It mixes blue, yellow, white, turquoise tones and feels cool overall. The strongest text pairing is #C3C29B on #E9F0CE with a contrast ratio of 1.55:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(198, 239, 255)	hsl(197, 100%, 89%)
Beige and Sage	rgb(195, 194, 155)	hsl(59, 25%, 69%)
Silkworm	rgb(233, 240, 206)	hsl(72, 53%, 87%)
Whirlpool	rgb(175, 212, 199)	hsl(159, 30%, 76%)

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

/* Water to Whirlpool — https://swatchly.xyz/palette/c6efff-c3c29b-e9f0ce-afd4c7 */
:root {
  --water: #c6efff;
  --beige-and-sage: #c3c29b;
  --silkworm: #e9f0ce;
  --whirlpool: #afd4c7;
}

Tailwind CSS v4

/* Water to Whirlpool — https://swatchly.xyz/palette/c6efff-c3c29b-e9f0ce-afd4c7 */
@theme {
  --color-water: #c6efff;
  --color-water-50: #e0f6ff;
  --color-water-100: #c6efff;
  --color-water-200: #bcdae6;
  --color-water-300: #a3c5d2;
  --color-water-400: #81a6b5;
  --color-water-500: #668c9a;
  --color-water-600: #4d717f;
  --color-water-700: #395b67;
  --color-water-800: #2a4752;
  --color-water-900: #1e3740;
  --color-water-950: #102229;
  --color-beige-and-sage: #c3c29b;
  --color-beige-and-sage-50: #f6f6e0;
  --color-beige-and-sage-100: #ececd3;
  --color-beige-and-sage-200: #d9d8bb;
  --color-beige-and-sage-300: #c3c29b;
  --color-beige-and-sage-400: #a4a37e;
  --color-beige-and-sage-500: #898863;
  --color-beige-and-sage-600: #6f6d4a;
  --color-beige-and-sage-700: #585737;
  --color-beige-and-sage-800: #454427;
  --color-beige-and-sage-900: #35341c;
  --color-beige-and-sage-950: #21200f;
  --color-silkworm: #e9f0ce;
  --color-silkworm-50: #f4f8e5;
  --color-silkworm-100: #e9f0ce;
  --color-silkworm-200: #d6dbc2;
  --color-silkworm-300: #bfc5a9;
  --color-silkworm-400: #9fa687;
  --color-silkworm-500: #848a6b;
  --color-silkworm-600: #6a6f52;
  --color-silkworm-700: #53583e;
  --color-silkworm-800: #41452e;
  --color-silkworm-900: #323521;
  --color-silkworm-950: #1e2113;
  --color-whirlpool: #afd4c7;
  --color-whirlpool-50: #edfff8;
  --color-whirlpool-100: #e2f7f0;
  --color-whirlpool-200: #cde6dd;
  --color-whirlpool-300: #afd4c7;
  --color-whirlpool-400: #90b2a6;
  --color-whirlpool-500: #729589;
  --color-whirlpool-600: #57786d;
  --color-whirlpool-700: #406055;
  --color-whirlpool-800: #2f4a41;
  --color-whirlpool-900: #213831;
  --color-whirlpool-950: #13231e;
}