Cabbage to Ivory Tower Color Palette

About this palette

Cabbage to Ivory Tower is a 5-color pastel, light, cool palette: #8BD4BB (Cabbage), #95D8EB (Over the Sky), #FFCBEC (Puff of Pink), #C7ECDF (Fresh Breeze), #FFF4F3 (Ivory Tower). It mixes turquoise, blue, pink, white tones and feels cool overall. The strongest text pairing is #8BD4BB on #FFF4F3 with a contrast ratio of 1.59:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cabbage	rgb(139, 212, 187)	hsl(159, 46%, 69%)
Over the Sky	rgb(149, 216, 235)	hsl(193, 68%, 75%)
Puff of Pink	rgb(255, 203, 236)	hsl(322, 100%, 90%)
Fresh Breeze	rgb(199, 236, 223)	hsl(159, 49%, 85%)
Ivory Tower	rgb(255, 244, 243)	hsl(5, 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

/* Cabbage to Ivory Tower — https://swatchly.xyz/palette/8bd4bb-95d8eb-ffcbec-c7ecdf-fff4f3 */
:root {
  --cabbage: #8bd4bb;
  --over-the-sky: #95d8eb;
  --puff-of-pink: #ffcbec;
  --fresh-breeze: #c7ecdf;
  --ivory-tower: #fff4f3;
}

Tailwind CSS v4

/* Cabbage to Ivory Tower — https://swatchly.xyz/palette/8bd4bb-95d8eb-ffcbec-c7ecdf-fff4f3 */
@theme {
  --color-cabbage: #8bd4bb;
  --color-cabbage-50: #ddfff2;
  --color-cabbage-100: #ccf8e7;
  --color-cabbage-200: #b2e6d3;
  --color-cabbage-300: #8bd4bb;
  --color-cabbage-400: #6eb39c;
  --color-cabbage-500: #4f9780;
  --color-cabbage-600: #337c66;
  --color-cabbage-700: #1e6350;
  --color-cabbage-800: #0e4e3d;
  --color-cabbage-900: #043d2e;
  --color-cabbage-950: #01261c;
  --color-over-the-sky: #95d8eb;
  --color-over-the-sky-50: #f4fdff;
  --color-over-the-sky-100: #dff8ff;
  --color-over-the-sky-200: #bdeaf7;
  --color-over-the-sky-300: #95d8eb;
  --color-over-the-sky-400: #78b5c7;
  --color-over-the-sky-500: #5798aa;
  --color-over-the-sky-600: #397b8c;
  --color-over-the-sky-700: #236271;
  --color-over-the-sky-800: #124c59;
  --color-over-the-sky-900: #073945;
  --color-over-the-sky-950: #02242c;
  --color-puff-of-pink: #ffcbec;
  --color-puff-of-pink-50: #fff6fb;
  --color-puff-of-pink-100: #ffe8f6;
  --color-puff-of-pink-200: #ffcbec;
  --color-puff-of-pink-300: #e1b7d2;
  --color-puff-of-pink-400: #c395b2;
  --color-puff-of-pink-500: #a77896;
  --color-puff-of-pink-600: #8a5d7a;
  --color-puff-of-pink-700: #6f4762;
  --color-puff-of-pink-800: #58354c;
  --color-puff-of-pink-900: #45283b;
  --color-puff-of-pink-950: #2c1725;
  --color-fresh-breeze: #c7ecdf;
  --color-fresh-breeze-50: #def4ec;
  --color-fresh-breeze-100: #c7ecdf;
  --color-fresh-breeze-200: #bbd8ce;
  --color-fresh-breeze-300: #a4c3b8;
  --color-fresh-breeze-400: #84a69a;
  --color-fresh-breeze-500: #6a8c81;
  --color-fresh-breeze-600: #527368;
  --color-fresh-breeze-700: #3e5d53;
  --color-fresh-breeze-800: #2e4940;
  --color-fresh-breeze-900: #223831;
  --color-fresh-breeze-950: #13231e;
  --color-ivory-tower: #fff4f3;
  --color-ivory-tower-50: #fff4f3;
  --color-ivory-tower-100: #f1ebea;
  --color-ivory-tower-200: #ded6d6;
  --color-ivory-tower-300: #c8bfbf;
  --color-ivory-tower-400: #a99f9f;
  --color-ivory-tower-500: #8e8483;
  --color-ivory-tower-600: #726968;
  --color-ivory-tower-700: #5b5352;
  --color-ivory-tower-800: #484040;
  --color-ivory-tower-900: #373131;
  --color-ivory-tower-950: #221e1e;
}