Dr Who to Salty Ice Color Palette

About this palette

Dr Who to Salty Ice is a 4-color muted palette: #755A78 (Dr Who), #253726 (Terminal Black), #B49888 (Sombrero), #C7E1F0 (Salty Ice). It mixes pink, green, orange, gray tones and feels cool overall. The strongest text pairing is #253726 on #C7E1F0 with a contrast ratio of 9.35:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dr Who	rgb(117, 90, 120)	hsl(294, 14%, 41%)
Terminal Black	rgb(37, 55, 38)	hsl(123, 20%, 18%)
Sombrero	rgb(180, 152, 136)	hsl(22, 23%, 62%)
Salty Ice	rgb(199, 225, 240)	hsl(202, 58%, 86%)

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.

Aa9.35:1 Very good#253726 on #C7E1F0
Aa9.35:1 Very good#C7E1F0 on #253726
Aa4.71:1 Good#253726 on #B49888
Aa4.71:1 Good#B49888 on #253726
Aa4.43:1 Poor#755A78 on #C7E1F0
Aa4.43:1 Poor#C7E1F0 on #755A78

Color blindness preview

CSS variables

/* Dr Who to Salty Ice — https://swatchly.xyz/palette/755a78-253726-b49888-c7e1f0 */
:root {
  --dr-who: #755a78;
  --terminal-black: #253726;
  --sombrero: #b49888;
  --salty-ice: #c7e1f0;
}

Tailwind CSS v4

/* Dr Who to Salty Ice — https://swatchly.xyz/palette/755a78-253726-b49888-c7e1f0 */
@theme {
  --color-dr-who: #755a78;
  --color-dr-who-50: #fef0ff;
  --color-dr-who-100: #f6e2f8;
  --color-dr-who-200: #e3cce6;
  --color-dr-who-300: #cdb3d0;
  --color-dr-who-400: #ae91b1;
  --color-dr-who-500: #917594;
  --color-dr-who-600: #755a78;
  --color-dr-who-700: #5e4660;
  --color-dr-who-800: #4a364c;
  --color-dr-who-900: #3a293c;
  --color-dr-who-950: #251826;
  --color-terminal-black: #253726;
  --color-terminal-black-50: #edf9ed;
  --color-terminal-black-100: #e2f0e2;
  --color-terminal-black-200: #ccddcd;
  --color-terminal-black-300: #b4c7b5;
  --color-terminal-black-400: #93a894;
  --color-terminal-black-500: #788c78;
  --color-terminal-black-600: #5e715e;
  --color-terminal-black-700: #485a49;
  --color-terminal-black-800: #374637;
  --color-terminal-black-900: #253726;
  --color-terminal-black-950: #182118;
  --color-sombrero: #b49888;
  --color-sombrero-50: #fff1e9;
  --color-sombrero-100: #f8e5db;
  --color-sombrero-200: #e7d0c4;
  --color-sombrero-300: #d2b9aa;
  --color-sombrero-400: #b49888;
  --color-sombrero-500: #987d6e;
  --color-sombrero-600: #7d6455;
  --color-sombrero-700: #654e41;
  --color-sombrero-800: #503d31;
  --color-sombrero-900: #3f2e24;
  --color-sombrero-950: #281c15;
  --color-salty-ice: #c7e1f0;
  --color-salty-ice-50: #f1faff;
  --color-salty-ice-100: #e3f2fb;
  --color-salty-ice-200: #c7e1f0;
  --color-salty-ice-300: #b3c9d5;
  --color-salty-ice-400: #91a9b6;
  --color-salty-ice-500: #748c9a;
  --color-salty-ice-600: #5a717e;
  --color-salty-ice-700: #445965;
  --color-salty-ice-800: #33454f;
  --color-salty-ice-900: #26353e;
  --color-salty-ice-950: #162127;
}