Delicate Ice to Mole Color Palette

About this palette

Delicate Ice to Mole is a 4-color muted palette: #B9D5E6 (Delicate Ice), #88AC9E (Catnip), #7E5F5F (Reading Tea Leaves), #372B29 (Mole). It mixes blue, turquoise, red, gray tones and feels cool overall. The strongest text pairing is #B9D5E6 on #372B29 with a contrast ratio of 8.91:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Delicate Ice	rgb(185, 213, 230)	hsl(203, 47%, 81%)
Catnip	rgb(136, 172, 158)	hsl(157, 18%, 60%)
Reading Tea Leaves	rgb(126, 95, 95)	hsl(0, 14%, 43%)
Mole	rgb(55, 43, 41)	hsl(9, 15%, 19%)

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.

Aa8.91:1 Very good#B9D5E6 on #372B29
Aa8.91:1 Very good#372B29 on #B9D5E6
Aa5.48:1 Good#88AC9E on #372B29
Aa5.48:1 Good#372B29 on #88AC9E
Aa3.72:1 Poor#B9D5E6 on #7E5F5F
Aa3.72:1 Poor#7E5F5F on #B9D5E6

Color blindness preview

CSS variables

/* Delicate Ice to Mole — https://swatchly.xyz/palette/b9d5e6-88ac9e-7e5f5f-372b29 */
:root {
  --delicate-ice: #b9d5e6;
  --catnip: #88ac9e;
  --reading-tea-leaves: #7e5f5f;
  --mole: #372b29;
}

Tailwind CSS v4

/* Delicate Ice to Mole — https://swatchly.xyz/palette/b9d5e6-88ac9e-7e5f5f-372b29 */
@theme {
  --color-delicate-ice: #b9d5e6;
  --color-delicate-ice-50: #e3f3fd;
  --color-delicate-ice-100: #d6e8f4;
  --color-delicate-ice-200: #b9d5e6;
  --color-delicate-ice-300: #a7bfce;
  --color-delicate-ice-400: #87a1b1;
  --color-delicate-ice-500: #6d8797;
  --color-delicate-ice-600: #556e7c;
  --color-delicate-ice-700: #415865;
  --color-delicate-ice-800: #324551;
  --color-delicate-ice-900: #24353f;
  --color-delicate-ice-950: #152128;
  --color-catnip: #88ac9e;
  --color-catnip-50: #e7fbf3;
  --color-catnip-100: #dbf2e9;
  --color-catnip-200: #c4e0d5;
  --color-catnip-300: #abcabe;
  --color-catnip-400: #88ac9e;
  --color-catnip-500: #6d9083;
  --color-catnip-600: #537568;
  --color-catnip-700: #3f5d52;
  --color-catnip-800: #2e493f;
  --color-catnip-900: #213930;
  --color-catnip-950: #13231d;
  --color-reading-tea-leaves: #7e5f5f;
  --color-reading-tea-leaves-50: #fff1f1;
  --color-reading-tea-leaves-100: #fbe4e4;
  --color-reading-tea-leaves-200: #eacfce;
  --color-reading-tea-leaves-300: #d5b6b6;
  --color-reading-tea-leaves-400: #b69695;
  --color-reading-tea-leaves-500: #9a7a79;
  --color-reading-tea-leaves-600: #7e5f5f;
  --color-reading-tea-leaves-700: #654a4a;
  --color-reading-tea-leaves-800: #513939;
  --color-reading-tea-leaves-900: #3f2b2b;
  --color-reading-tea-leaves-950: #281a1a;
  --color-mole: #372b29;
  --color-mole-50: #fcf3f1;
  --color-mole-100: #f3e9e7;
  --color-mole-200: #e0d4d2;
  --color-mole-300: #cbbdbb;
  --color-mole-400: #ab9d9a;
  --color-mole-500: #8f817e;
  --color-mole-600: #736663;
  --color-mole-700: #5b4f4d;
  --color-mole-800: #463c3a;
  --color-mole-900: #372b29;
  --color-mole-950: #201a19;
}