Whirlpool to Blossom Color Palette

About this palette

Whirlpool to Blossom is a 4-color pastel, light, cool palette: #A4D9D4 (Whirlpool), #DCC3DC (Matt Lilac), #F3D1FD (Kissed by Mist), #FFEBD9 (Blossom). It mixes turquoise, pink, purple, white tones and feels cool overall. The strongest text pairing is #DCC3DC on #FFEBD9 with a contrast ratio of 1.41:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Whirlpool	rgb(164, 217, 212)	hsl(174, 41%, 75%)
Matt Lilac	rgb(220, 195, 220)	hsl(300, 26%, 81%)
Kissed by Mist	rgb(243, 209, 253)	hsl(286, 92%, 91%)
Blossom	rgb(255, 235, 217)	hsl(28, 100%, 93%)

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

/* Whirlpool to Blossom — https://swatchly.xyz/palette/a4d9d4-dcc3dc-f3d1fd-ffebd9 */
:root {
  --whirlpool: #a4d9d4;
  --matt-lilac: #dcc3dc;
  --kissed-by-mist: #f3d1fd;
  --blossom: #ffebd9;
}

Tailwind CSS v4

/* Whirlpool to Blossom — https://swatchly.xyz/palette/a4d9d4-dcc3dc-f3d1fd-ffebd9 */
@theme {
  --color-whirlpool: #a4d9d4;
  --color-whirlpool-50: #d6f5f2;
  --color-whirlpool-100: #c7ebe7;
  --color-whirlpool-200: #a4d9d4;
  --color-whirlpool-300: #95c3be;
  --color-whirlpool-400: #74a6a1;
  --color-whirlpool-500: #598c88;
  --color-whirlpool-600: #42736f;
  --color-whirlpool-700: #2f5d59;
  --color-whirlpool-800: #224a47;
  --color-whirlpool-900: #163a37;
  --color-whirlpool-950: #0b2422;
  --color-matt-lilac: #dcc3dc;
  --color-matt-lilac-50: #f7e8f7;
  --color-matt-lilac-100: #eddbed;
  --color-matt-lilac-200: #dcc3dc;
  --color-matt-lilac-300: #c5b0c5;
  --color-matt-lilac-400: #a992a9;
  --color-matt-lilac-500: #8f788f;
  --color-matt-lilac-600: #766076;
  --color-matt-lilac-700: #604c60;
  --color-matt-lilac-800: #4d3c4d;
  --color-matt-lilac-900: #3c2d3c;
  --color-matt-lilac-950: #261b26;
  --color-kissed-by-mist: #f3d1fd;
  --color-kissed-by-mist-50: #fdf8ff;
  --color-kissed-by-mist-100: #fbebff;
  --color-kissed-by-mist-200: #f3d1fd;
  --color-kissed-by-mist-300: #d7bcdf;
  --color-kissed-by-mist-400: #b89ac1;
  --color-kissed-by-mist-500: #9c7ca5;
  --color-kissed-by-mist-600: #7f6188;
  --color-kissed-by-mist-700: #664b6d;
  --color-kissed-by-mist-800: #503856;
  --color-kissed-by-mist-900: #3e2a44;
  --color-kissed-by-mist-950: #27192b;
  --color-blossom: #ffebd9;
  --color-blossom-50: #fff7ef;
  --color-blossom-100: #ffebd9;
  --color-blossom-200: #e6d8cb;
  --color-blossom-300: #d0c0b1;
  --color-blossom-400: #b1a090;
  --color-blossom-500: #968473;
  --color-blossom-600: #7a6959;
  --color-blossom-700: #615244;
  --color-blossom-800: #4d4033;
  --color-blossom-900: #3c3026;
  --color-blossom-950: #261e16;
}