Ice Citadel to Sky High Color Palette

About this palette

Ice Citadel to Sky High is a 4-color pastel, light, cool palette: #B5F8EF (Ice Citadel), #EEF7FF (Cotton Ball), #D9D4F4 (Icy Plains), #B9C0EE (Sky High). It mixes turquoise, white, purple tones and feels cool overall. The strongest text pairing is #EEF7FF on #B9C0EE with a contrast ratio of 1.64:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ice Citadel	rgb(181, 248, 239)	hsl(172, 83%, 84%)
Cotton Ball	rgb(238, 247, 255)	hsl(208, 100%, 97%)
Icy Plains	rgb(217, 212, 244)	hsl(249, 59%, 89%)
Sky High	rgb(185, 192, 238)	hsl(232, 61%, 83%)

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

/* Ice Citadel to Sky High — https://swatchly.xyz/palette/b5f8ef-eef7ff-d9d4f4-b9c0ee */
:root {
  --ice-citadel: #b5f8ef;
  --cotton-ball: #eef7ff;
  --icy-plains: #d9d4f4;
  --sky-high: #b9c0ee;
}

Tailwind CSS v4

/* Ice Citadel to Sky High — https://swatchly.xyz/palette/b5f8ef-eef7ff-d9d4f4-b9c0ee */
@theme {
  --color-ice-citadel: #b5f8ef;
  --color-ice-citadel-50: #d7fcf7;
  --color-ice-citadel-100: #b5f8ef;
  --color-ice-citadel-200: #b0e1da;
  --color-ice-citadel-300: #94ccc5;
  --color-ice-citadel-400: #70aea6;
  --color-ice-citadel-500: #52938b;
  --color-ice-citadel-600: #387871;
  --color-ice-citadel-700: #24615a;
  --color-ice-citadel-800: #154c47;
  --color-ice-citadel-900: #0b3b36;
  --color-ice-citadel-950: #032522;
  --color-cotton-ball: #eef7ff;
  --color-cotton-ball-50: #eef7ff;
  --color-cotton-ball-100: #e7ecf1;
  --color-cotton-ball-200: #d2d9de;
  --color-cotton-ball-300: #bbc2c9;
  --color-cotton-ball-400: #9ba3aa;
  --color-cotton-ball-500: #7f878e;
  --color-cotton-ball-600: #656d74;
  --color-cotton-ball-700: #4f565c;
  --color-cotton-ball-800: #3d4348;
  --color-cotton-ball-900: #2e3438;
  --color-cotton-ball-950: #1c2023;
  --color-icy-plains: #d9d4f4;
  --color-icy-plains-50: #f6f4ff;
  --color-icy-plains-100: #ece9fd;
  --color-icy-plains-200: #d9d4f4;
  --color-icy-plains-300: #c2bed9;
  --color-icy-plains-400: #a39ebb;
  --color-icy-plains-500: #87829f;
  --color-icy-plains-600: #6d6884;
  --color-icy-plains-700: #56516a;
  --color-icy-plains-800: #433f55;
  --color-icy-plains-900: #333042;
  --color-icy-plains-950: #1f1d2a;
  --color-sky-high: #b9c0ee;
  --color-sky-high-50: #f4f6ff;
  --color-sky-high-100: #e8ecff;
  --color-sky-high-200: #d2d7fa;
  --color-sky-high-300: #b9c0ee;
  --color-sky-high-400: #9aa0cb;
  --color-sky-high-500: #7e84af;
  --color-sky-high-600: #646992;
  --color-sky-high-700: #4e5378;
  --color-sky-high-800: #3c4060;
  --color-sky-high-900: #2d304b;
  --color-sky-high-950: #1b1d31;
}