Start generating

Whirlpool to Walkie Chalkie color palette

A1D6C6WhirlpoolE3C0B1Muddy RoseFCC2DBSugarwinkleA5F9E0Hello WinterFFF4F8Walkie Chalkie
Open in generator Export PNG, PDF, ASE…

About this palette

Whirlpool to Walkie Chalkie is a 5-color pastel, light palette: #A1D6C6 (Whirlpool), #E3C0B1 (Muddy Rose), #FCC2DB (Sugarwinkle), #A5F9E0 (Hello Winter), #FFF4F8 (Walkie Chalkie). It mixes turquoise, orange, pink, white tones and feels balanced overall. The strongest text pairing is #E3C0B1 on #FFF4F8 with a contrast ratio of 1.57:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Whirlpoolrgb(161, 214, 198)hsl(162, 39%, 74%)
Muddy Rosergb(227, 192, 177)hsl(18, 47%, 79%)
Sugarwinklergb(252, 194, 219)hsl(334, 91%, 87%)
Hello Winterrgb(165, 249, 224)hsl(162, 87%, 81%)
Walkie Chalkiergb(255, 244, 248)hsl(338, 100%, 98%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Whirlpool to Walkie Chalkie — https://swatchly.xyz/palette/a1d6c6-e3c0b1-fcc2db-a5f9e0-fff4f8 */
:root {
  --whirlpool: #a1d6c6;
  --muddy-rose: #e3c0b1;
  --sugarwinkle: #fcc2db;
  --hello-winter: #a5f9e0;
  --walkie-chalkie: #fff4f8;
}

    Tailwind CSS v4

    /* Whirlpool to Walkie Chalkie — https://swatchly.xyz/palette/a1d6c6-e3c0b1-fcc2db-a5f9e0-fff4f8 */
@theme {
  --color-whirlpool: #a1d6c6;
  --color-whirlpool-50: #e9fff8;
  --color-whirlpool-100: #daf9ef;
  --color-whirlpool-200: #c3e8dc;
  --color-whirlpool-300: #a1d6c6;
  --color-whirlpool-400: #83b4a5;
  --color-whirlpool-500: #649788;
  --color-whirlpool-600: #497b6d;
  --color-whirlpool-700: #346255;
  --color-whirlpool-800: #234c41;
  --color-whirlpool-900: #173a31;
  --color-whirlpool-950: #0b241e;
  --color-muddy-rose: #e3c0b1;
  --color-muddy-rose-50: #fff7f4;
  --color-muddy-rose-100: #ffece4;
  --color-muddy-rose-200: #f1d8cd;
  --color-muddy-rose-300: #e3c0b1;
  --color-muddy-rose-400: #c0a092;
  --color-muddy-rose-500: #a38375;
  --color-muddy-rose-600: #86675a;
  --color-muddy-rose-700: #6c5044;
  --color-muddy-rose-800: #553d33;
  --color-muddy-rose-900: #422d25;
  --color-muddy-rose-950: #2a1b15;
  --color-sugarwinkle: #fcc2db;
  --color-sugarwinkle-50: #ffeef5;
  --color-sugarwinkle-100: #ffdfec;
  --color-sugarwinkle-200: #fcc2db;
  --color-sugarwinkle-300: #e0afc4;
  --color-sugarwinkle-400: #c38ea5;
  --color-sugarwinkle-500: #a8738a;
  --color-sugarwinkle-600: #8b5a70;
  --color-sugarwinkle-700: #724559;
  --color-sugarwinkle-800: #5b3446;
  --color-sugarwinkle-900: #482736;
  --color-sugarwinkle-950: #2e1622;
  --color-hello-winter: #a5f9e0;
  --color-hello-winter-50: #cdfced;
  --color-hello-winter-100: #a5f9e0;
  --color-hello-winter-200: #a4e2cf;
  --color-hello-winter-300: #87ceb9;
  --color-hello-winter-400: #61b09a;
  --color-hello-winter-500: #419680;
  --color-hello-winter-600: #257b67;
  --color-hello-winter-700: #0c6451;
  --color-hello-winter-800: #004f3f;
  --color-hello-winter-900: #003d30;
  --color-hello-winter-950: #00261d;
  --color-walkie-chalkie: #fff4f8;
  --color-walkie-chalkie-50: #fff4f8;
  --color-walkie-chalkie-100: #f2ebed;
  --color-walkie-chalkie-200: #ded6d9;
  --color-walkie-chalkie-300: #c8bfc2;
  --color-walkie-chalkie-400: #a99fa3;
  --color-walkie-chalkie-500: #8d8387;
  --color-walkie-chalkie-600: #72696c;
  --color-walkie-chalkie-700: #5b5356;
  --color-walkie-chalkie-800: #474043;
  --color-walkie-chalkie-900: #373133;
  --color-walkie-chalkie-950: #221e1f;
}

    Similar palettes