Whirlpool to Hazelwood Color Palette

About this palette

Whirlpool to Hazelwood is a 4-color pastel, light, cool palette: #A5D4C4 (Whirlpool), #BDEBC0 (Mint-o-licious), #E7DCFF (Grape Taffy), #FFF4D7 (Hazelwood). It mixes turquoise, green, purple, white tones and feels cool overall. The strongest text pairing is #A5D4C4 on #FFF4D7 with a contrast ratio of 1.50:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Whirlpool	rgb(165, 212, 196)	hsl(160, 35%, 74%)
Mint-o-licious	rgb(189, 235, 192)	hsl(124, 53%, 83%)
Grape Taffy	rgb(231, 220, 255)	hsl(259, 100%, 93%)
Hazelwood	rgb(255, 244, 215)	hsl(44, 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

/* Whirlpool to Hazelwood — https://swatchly.xyz/palette/a5d4c4-bdebc0-e7dcff-fff4d7 */
:root {
  --whirlpool: #a5d4c4;
  --mint-o-licious: #bdebc0;
  --grape-taffy: #e7dcff;
  --hazelwood: #fff4d7;
}

Tailwind CSS v4

/* Whirlpool to Hazelwood — https://swatchly.xyz/palette/a5d4c4-bdebc0-e7dcff-fff4d7 */
@theme {
  --color-whirlpool: #a5d4c4;
  --color-whirlpool-50: #e8fff7;
  --color-whirlpool-100: #dcf7ee;
  --color-whirlpool-200: #c5e6db;
  --color-whirlpool-300: #a5d4c4;
  --color-whirlpool-400: #87b2a4;
  --color-whirlpool-500: #699687;
  --color-whirlpool-600: #4e796b;
  --color-whirlpool-700: #386154;
  --color-whirlpool-800: #284b41;
  --color-whirlpool-900: #1b3a30;
  --color-whirlpool-950: #0e241e;
  --color-mint-o-licious: #bdebc0;
  --color-mint-o-licious-50: #ecffed;
  --color-mint-o-licious-100: #ddf8df;
  --color-mint-o-licious-200: #bdebc0;
  --color-mint-o-licious-300: #abd1ae;
  --color-mint-o-licious-400: #88b18b;
  --color-mint-o-licious-500: #6a956e;
  --color-mint-o-licious-600: #507954;
  --color-mint-o-licious-700: #3b613f;
  --color-mint-o-licious-800: #2a4b2e;
  --color-mint-o-licious-900: #1e3a21;
  --color-mint-o-licious-950: #102513;
  --color-grape-taffy: #e7dcff;
  --color-grape-taffy-50: #f0eaff;
  --color-grape-taffy-100: #e7dcff;
  --color-grape-taffy-200: #d4cbe6;
  --color-grape-taffy-300: #bfb6d3;
  --color-grape-taffy-400: #a297b7;
  --color-grape-taffy-500: #887d9d;
  --color-grape-taffy-600: #6e6583;
  --color-grape-taffy-700: #59506b;
  --color-grape-taffy-800: #453e55;
  --color-grape-taffy-900: #352f43;
  --color-grape-taffy-950: #211c2b;
  --color-hazelwood: #fff4d7;
  --color-hazelwood-50: #fff4d7;
  --color-hazelwood-100: #f1ead9;
  --color-hazelwood-200: #dfd7c2;
  --color-hazelwood-300: #c9c0a8;
  --color-hazelwood-400: #aba187;
  --color-hazelwood-500: #8f856b;
  --color-hazelwood-600: #756b52;
  --color-hazelwood-700: #5d553e;
  --color-hazelwood-800: #49422e;
  --color-hazelwood-900: #393221;
  --color-hazelwood-950: #231f13;
}