Terminal Black to Salt Mountain color palette

22332BTerminal Black 316152Herbes de Provence 5E8E94Horizon 89B5C7Crystal Lake DAFAFBSalt Mountain

About this palette

Terminal Black to Salt Mountain is a 5-color muted, cool, gradient palette: #22332B (Terminal Black), #316152 (Herbes de Provence), #5E8E94 (Horizon), #89B5C7 (Crystal Lake), #DAFAFB (Salt Mountain). It mixes gray, turquoise, blue, white tones and feels cool overall. The strongest text pairing is #22332B on #DAFAFB with a contrast ratio of 12.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terminal Black	rgb(34, 51, 43)	hsl(152, 20%, 17%)
Herbes de Provence	rgb(49, 97, 82)	hsl(161, 33%, 29%)
Horizon	rgb(94, 142, 148)	hsl(187, 22%, 47%)
Crystal Lake	rgb(137, 181, 199)	hsl(197, 36%, 66%)
Salt Mountain	rgb(218, 250, 251)	hsl(182, 80%, 92%)

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.

Aa12.08:1 Super#22332B on #DAFAFB
Aa12.08:1 Super#DAFAFB on #22332B
Aa6.43:1 Good#316152 on #DAFAFB
Aa6.43:1 Good#DAFAFB on #316152
Aa6.02:1 Good#22332B on #89B5C7
Aa6.02:1 Good#89B5C7 on #22332B
Aa3.66:1 Poor#22332B on #5E8E94
Aa3.66:1 Poor#5E8E94 on #22332B

Color blindness preview

CSS variables

/* Terminal Black to Salt Mountain — https://swatchly.xyz/palette/22332b-316152-5e8e94-89b5c7-dafafb */
:root {
  --terminal-black: #22332b;
  --herbes-de-provence: #316152;
  --horizon: #5e8e94;
  --crystal-lake: #89b5c7;
  --salt-mountain: #dafafb;
}

Tailwind CSS v4

/* Terminal Black to Salt Mountain — https://swatchly.xyz/palette/22332b-316152-5e8e94-89b5c7-dafafb */
@theme {
  --color-terminal-black: #22332b;
  --color-terminal-black-50: #edf8f2;
  --color-terminal-black-100: #e2efe8;
  --color-terminal-black-200: #ccdcd4;
  --color-terminal-black-300: #b4c6bd;
  --color-terminal-black-400: #93a69c;
  --color-terminal-black-500: #768a80;
  --color-terminal-black-600: #5c6e65;
  --color-terminal-black-700: #46574f;
  --color-terminal-black-800: #34433c;
  --color-terminal-black-900: #22332b;
  --color-terminal-black-950: #161e1a;
  --color-herbes-de-provence: #316152;
  --color-herbes-de-provence-50: #e1fdf2;
  --color-herbes-de-provence-100: #d4f4e8;
  --color-herbes-de-provence-200: #bce1d4;
  --color-herbes-de-provence-300: #a2ccbd;
  --color-herbes-de-provence-400: #7fae9d;
  --color-herbes-de-provence-500: #629382;
  --color-herbes-de-provence-600: #497868;
  --color-herbes-de-provence-700: #316152;
  --color-herbes-de-provence-800: #254c40;
  --color-herbes-de-provence-900: #193b31;
  --color-herbes-de-provence-950: #0d251e;
  --color-horizon: #5e8e94;
  --color-horizon-50: #e0fbfe;
  --color-horizon-100: #d2f1f5;
  --color-horizon-200: #badfe3;
  --color-horizon-300: #9fc9ce;
  --color-horizon-400: #7baab0;
  --color-horizon-500: #5e8e94;
  --color-horizon-600: #457379;
  --color-horizon-700: #315c61;
  --color-horizon-800: #22484d;
  --color-horizon-900: #17383c;
  --color-horizon-950: #0b2326;
  --color-crystal-lake: #89b5c7;
  --color-crystal-lake-50: #f2fbff;
  --color-crystal-lake-100: #e0f6ff;
  --color-crystal-lake-200: #c7e6f3;
  --color-crystal-lake-300: #aed2e0;
  --color-crystal-lake-400: #89b5c7;
  --color-crystal-lake-500: #6c97a8;
  --color-crystal-lake-600: #507a8b;
  --color-crystal-lake-700: #3a6170;
  --color-crystal-lake-800: #294b58;
  --color-crystal-lake-900: #1c3944;
  --color-crystal-lake-950: #0e222a;
  --color-salt-mountain: #dafafb;
  --color-salt-mountain-50: #dafafb;
  --color-salt-mountain-100: #daeeee;
  --color-salt-mountain-200: #c4dbdc;
  --color-salt-mountain-300: #abc6c7;
  --color-salt-mountain-400: #8aa7a8;
  --color-salt-mountain-500: #6f8c8d;
  --color-salt-mountain-600: #567273;
  --color-salt-mountain-700: #415b5c;
  --color-salt-mountain-800: #314748;
  --color-salt-mountain-900: #243738;
  --color-salt-mountain-950: #142223;
}