Fail Whale to Walkie Chalkie Color Palette

About this palette

Fail Whale to Walkie Chalkie is a 5-color pastel, light, cool palette: #91D0F8 (Fail Whale), #D2D3FF (Icy Plains), #E7D9AC (Beeswax), #B0FEF5 (Frostbite), #FFF3F6 (Walkie Chalkie). It mixes blue, purple, yellow, turquoise, white tones and feels cool overall. The strongest text pairing is #91D0F8 on #FFF3F6 with a contrast ratio of 1.54:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fail Whale	rgb(145, 208, 248)	hsl(203, 88%, 77%)
Icy Plains	rgb(210, 211, 255)	hsl(239, 100%, 91%)
Beeswax	rgb(231, 217, 172)	hsl(46, 55%, 79%)
Frostbite	rgb(176, 254, 245)	hsl(173, 98%, 84%)
Walkie Chalkie	rgb(255, 243, 246)	hsl(345, 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

CSS variables

/* Fail Whale to Walkie Chalkie — https://swatchly.xyz/palette/91d0f8-d2d3ff-e7d9ac-b0fef5-fff3f6 */
:root {
  --fail-whale: #91d0f8;
  --icy-plains: #d2d3ff;
  --beeswax: #e7d9ac;
  --frostbite: #b0fef5;
  --walkie-chalkie: #fff3f6;
}

Tailwind CSS v4

/* Fail Whale to Walkie Chalkie — https://swatchly.xyz/palette/91d0f8-d2d3ff-e7d9ac-b0fef5-fff3f6 */
@theme {
  --color-fail-whale: #91d0f8;
  --color-fail-whale-50: #f2faff;
  --color-fail-whale-100: #e0f3ff;
  --color-fail-whale-200: #b9e3ff;
  --color-fail-whale-300: #91d0f8;
  --color-fail-whale-400: #74afd3;
  --color-fail-whale-500: #5492b7;
  --color-fail-whale-600: #397699;
  --color-fail-whale-700: #245d7e;
  --color-fail-whale-800: #144865;
  --color-fail-whale-900: #09374f;
  --color-fail-whale-950: #032233;
  --color-icy-plains: #d2d3ff;
  --color-icy-plains-50: #f4f4ff;
  --color-icy-plains-100: #e8e9ff;
  --color-icy-plains-200: #d2d3ff;
  --color-icy-plains-300: #bcbde2;
  --color-icy-plains-400: #9d9dc5;
  --color-icy-plains-500: #8182aa;
  --color-icy-plains-600: #67678d;
  --color-icy-plains-700: #515174;
  --color-icy-plains-800: #3f3f5d;
  --color-icy-plains-900: #303049;
  --color-icy-plains-950: #1d1d2f;
  --color-beeswax: #e7d9ac;
  --color-beeswax-50: #fef6de;
  --color-beeswax-100: #f5edd1;
  --color-beeswax-200: #e7d9ac;
  --color-beeswax-300: #cec29d;
  --color-beeswax-400: #afa279;
  --color-beeswax-500: #94865c;
  --color-beeswax-600: #786c43;
  --color-beeswax-700: #605530;
  --color-beeswax-800: #4c4221;
  --color-beeswax-900: #3b3216;
  --color-beeswax-950: #251f0a;
  --color-frostbite: #b0fef5;
  --color-frostbite-50: #dbfffa;
  --color-frostbite-100: #b0fef5;
  --color-frostbite-200: #aee5df;
  --color-frostbite-300: #90d0c9;
  --color-frostbite-400: #69b1aa;
  --color-frostbite-500: #49968e;
  --color-frostbite-600: #2c7a73;
  --color-frostbite-700: #15625c;
  --color-frostbite-800: #044d48;
  --color-frostbite-900: #003c38;
  --color-frostbite-950: #002623;
  --color-walkie-chalkie: #fff3f6;
  --color-walkie-chalkie-50: #fff3f6;
  --color-walkie-chalkie-100: #f1eaec;
  --color-walkie-chalkie-200: #ded6d8;
  --color-walkie-chalkie-300: #c8bfc1;
  --color-walkie-chalkie-400: #a99fa1;
  --color-walkie-chalkie-500: #8e8386;
  --color-walkie-chalkie-600: #73696b;
  --color-walkie-chalkie-700: #5c5255;
  --color-walkie-chalkie-800: #484042;
  --color-walkie-chalkie-900: #373132;
  --color-walkie-chalkie-950: #231e1f;
}