Fail Whale to Ivory Tower color palette

9FCFE9Fail Whale E9D6B8Writer’s Parchment FBC3EDPretty in Pink ECDFFEGrape Taffy FFF3F0Ivory Tower

About this palette

Fail Whale to Ivory Tower is a 5-color pastel, light palette: #9FCFE9 (Fail Whale), #E9D6B8 (Writer’s Parchment), #FBC3ED (Pretty in Pink), #ECDFFE (Grape Taffy), #FFF3F0 (Ivory Tower). It mixes blue, yellow, pink, purple, white tones and feels balanced overall. The strongest text pairing is #9FCFE9 on #FFF3F0 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(159, 207, 233)	hsl(201, 63%, 77%)
Writer’s Parchment	rgb(233, 214, 184)	hsl(37, 53%, 82%)
Pretty in Pink	rgb(251, 195, 237)	hsl(315, 88%, 87%)
Grape Taffy	rgb(236, 223, 254)	hsl(265, 94%, 94%)
Ivory Tower	rgb(255, 243, 240)	hsl(12, 100%, 97%)

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 Ivory Tower — https://swatchly.xyz/palette/9fcfe9-e9d6b8-fbc3ed-ecdffe-fff3f0 */
:root {
  --fail-whale: #9fcfe9;
  --writer-s-parchment: #e9d6b8;
  --pretty-in-pink: #fbc3ed;
  --grape-taffy: #ecdffe;
  --ivory-tower: #fff3f0;
}

Tailwind CSS v4

/* Fail Whale to Ivory Tower — https://swatchly.xyz/palette/9fcfe9-e9d6b8-fbc3ed-ecdffe-fff3f0 */
@theme {
  --color-fail-whale: #9fcfe9;
  --color-fail-whale-50: #f1faff;
  --color-fail-whale-100: #def3ff;
  --color-fail-whale-200: #c1e3f5;
  --color-fail-whale-300: #9fcfe9;
  --color-fail-whale-400: #81aec5;
  --color-fail-whale-500: #6391a9;
  --color-fail-whale-600: #48758c;
  --color-fail-whale-700: #335d72;
  --color-fail-whale-800: #23485a;
  --color-fail-whale-900: #183746;
  --color-fail-whale-950: #0c222d;
  --color-writer-s-parchment: #e9d6b8;
  --color-writer-s-parchment-50: #fff5e4;
  --color-writer-s-parchment-100: #f6ebd8;
  --color-writer-s-parchment-200: #e9d6b8;
  --color-writer-s-parchment-300: #cfc0a7;
  --color-writer-s-parchment-400: #b1a084;
  --color-writer-s-parchment-500: #968468;
  --color-writer-s-parchment-600: #7a6a4f;
  --color-writer-s-parchment-700: #62533b;
  --color-writer-s-parchment-800: #4d402b;
  --color-writer-s-parchment-900: #3c311f;
  --color-writer-s-parchment-950: #261e11;
  --color-pretty-in-pink: #fbc3ed;
  --color-pretty-in-pink-50: #fff0fb;
  --color-pretty-in-pink-100: #ffe0f7;
  --color-pretty-in-pink-200: #fbc3ed;
  --color-pretty-in-pink-300: #dfb0d3;
  --color-pretty-in-pink-400: #c18fb5;
  --color-pretty-in-pink-500: #a6739a;
  --color-pretty-in-pink-600: #89597e;
  --color-pretty-in-pink-700: #704466;
  --color-pretty-in-pink-800: #593351;
  --color-pretty-in-pink-900: #46263f;
  --color-pretty-in-pink-950: #2d1628;
  --color-grape-taffy: #ecdffe;
  --color-grape-taffy-50: #f4edff;
  --color-grape-taffy-100: #ecdffe;
  --color-grape-taffy-200: #d8cee5;
  --color-grape-taffy-300: #c3b8d2;
  --color-grape-taffy-400: #a599b5;
  --color-grape-taffy-500: #8a7e9a;
  --color-grape-taffy-600: #706580;
  --color-grape-taffy-700: #5a5068;
  --color-grape-taffy-800: #473e52;
  --color-grape-taffy-900: #362f40;
  --color-grape-taffy-950: #221c29;
  --color-ivory-tower: #fff3f0;
  --color-ivory-tower-50: #fff3f0;
  --color-ivory-tower-100: #f1eae8;
  --color-ivory-tower-200: #ded6d4;
  --color-ivory-tower-300: #c9bfbc;
  --color-ivory-tower-400: #aa9f9c;
  --color-ivory-tower-500: #8e8481;
  --color-ivory-tower-600: #736967;
  --color-ivory-tower-700: #5c5351;
  --color-ivory-tower-800: #48403e;
  --color-ivory-tower-900: #38312f;
  --color-ivory-tower-950: #231e1d;
}