The Count’s Black to Marsh Fog Color Palette

About this palette

The Count’s Black to Marsh Fog is a 5-color muted, cool palette: #101F26 (The Count’s Black), #648586 (Arctic), #3C5046 (Hunter), #90B0B2 (Cool), #C0DAC9 (Marsh Fog). It mixes gray, turquoise, green tones and feels cool overall. The strongest text pairing is #101F26 on #C0DAC9 with a contrast ratio of 11.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
The Count’s Black	rgb(16, 31, 38)	hsl(199, 41%, 11%)
Arctic	rgb(100, 133, 134)	hsl(182, 15%, 46%)
Hunter	rgb(60, 80, 70)	hsl(150, 14%, 27%)
Cool	rgb(144, 176, 178)	hsl(184, 18%, 63%)
Marsh Fog	rgb(192, 218, 201)	hsl(141, 26%, 80%)

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.

Aa11.33:1 Very good#101F26 on #C0DAC9
Aa11.33:1 Very good#C0DAC9 on #101F26
Aa7.25:1 Very good#101F26 on #90B0B2
Aa7.25:1 Very good#90B0B2 on #101F26
Aa5.81:1 Good#3C5046 on #C0DAC9
Aa5.81:1 Good#C0DAC9 on #3C5046
Aa4.21:1 Poor#101F26 on #648586
Aa4.21:1 Poor#648586 on #101F26

Color blindness preview

CSS variables

/* The Count’s Black to Marsh Fog — https://swatchly.xyz/palette/101f26-648586-3c5046-90b0b2-c0dac9 */
:root {
  --the-count-s-black: #101f26;
  --arctic: #648586;
  --hunter: #3c5046;
  --cool: #90b0b2;
  --marsh-fog: #c0dac9;
}

Tailwind CSS v4

/* The Count’s Black to Marsh Fog — https://swatchly.xyz/palette/101f26-648586-3c5046-90b0b2-c0dac9 */
@theme {
  --color-the-count-s-black: #101f26;
  --color-the-count-s-black-50: #ecf7fc;
  --color-the-count-s-black-100: #e1edf3;
  --color-the-count-s-black-200: #ccdae1;
  --color-the-count-s-black-300: #b4c4cc;
  --color-the-count-s-black-400: #93a5ad;
  --color-the-count-s-black-500: #778992;
  --color-the-count-s-black-600: #5d6e76;
  --color-the-count-s-black-700: #47565e;
  --color-the-count-s-black-800: #364349;
  --color-the-count-s-black-900: #273238;
  --color-the-count-s-black-950: #101f26;
  --color-arctic: #648586;
  --color-arctic-50: #e4f8f9;
  --color-arctic-100: #d7edee;
  --color-arctic-200: #bed9da;
  --color-arctic-300: #a4c2c3;
  --color-arctic-400: #81a2a3;
  --color-arctic-500: #648586;
  --color-arctic-600: #4d6c6d;
  --color-arctic-700: #3a5657;
  --color-arctic-800: #2b4445;
  --color-arctic-900: #203535;
  --color-arctic-950: #122122;
  --color-hunter: #3c5046;
  --color-hunter-50: #ecf9f2;
  --color-hunter-100: #e1efe8;
  --color-hunter-200: #cbdcd3;
  --color-hunter-300: #b5c8be;
  --color-hunter-400: #95aba0;
  --color-hunter-500: #7b9186;
  --color-hunter-600: #63786d;
  --color-hunter-700: #4e6258;
  --color-hunter-800: #3c5046;
  --color-hunter-900: #2e3d36;
  --color-hunter-950: #1c2722;
  --color-cool: #90b0b2;
  --color-cool-50: #eafcfd;
  --color-cool-100: #e0f4f5;
  --color-cool-200: #cbe2e3;
  --color-cool-300: #b3cdcf;
  --color-cool-400: #90b0b2;
  --color-cool-500: #749395;
  --color-cool-600: #597779;
  --color-cool-700: #435e60;
  --color-cool-800: #31494b;
  --color-cool-900: #243839;
  --color-cool-950: #142223;
  --color-marsh-fog: #c0dac9;
  --color-marsh-fog-50: #e7f6ec;
  --color-marsh-fog-100: #dbece1;
  --color-marsh-fog-200: #c0dac9;
  --color-marsh-fog-300: #adc3b5;
  --color-marsh-fog-400: #8da596;
  --color-marsh-fog-500: #738b7b;
  --color-marsh-fog-600: #5a7162;
  --color-marsh-fog-700: #465a4d;
  --color-marsh-fog-800: #35473c;
  --color-marsh-fog-900: #28372d;
  --color-marsh-fog-950: #17221b;
}