Haiti to Marsh Fog Color Palette

About this palette

Haiti to Marsh Fog is a 4-color muted, gradient palette: #262C3B (Haiti), #735E5B (Morel), #8A94B5 (Moon Veil), #C5D9C7 (Marsh Fog). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #262C3B on #C5D9C7 with a contrast ratio of 9.38:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haiti	rgb(38, 44, 59)	hsl(223, 22%, 19%)
Morel	rgb(115, 94, 91)	hsl(8, 12%, 40%)
Moon Veil	rgb(138, 148, 181)	hsl(226, 23%, 63%)
Marsh Fog	rgb(197, 217, 199)	hsl(126, 21%, 81%)

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.38:1 Very good#262C3B on #C5D9C7
Aa9.38:1 Very good#C5D9C7 on #262C3B
Aa4.64:1 Good#262C3B on #8A94B5
Aa4.64:1 Good#8A94B5 on #262C3B
Aa4.06:1 Poor#735E5B on #C5D9C7
Aa4.06:1 Poor#C5D9C7 on #735E5B

Color blindness preview

CSS variables

/* Haiti to Marsh Fog — https://swatchly.xyz/palette/262c3b-735e5b-8a94b5-c5d9c7 */
:root {
  --haiti: #262c3b;
  --morel: #735e5b;
  --moon-veil: #8a94b5;
  --marsh-fog: #c5d9c7;
}

Tailwind CSS v4

/* Haiti to Marsh Fog — https://swatchly.xyz/palette/262c3b-735e5b-8a94b5-c5d9c7 */
@theme {
  --color-haiti: #262c3b;
  --color-haiti-50: #f1f5ff;
  --color-haiti-100: #e6ebf8;
  --color-haiti-200: #d1d7e6;
  --color-haiti-300: #bac1d1;
  --color-haiti-400: #99a0b2;
  --color-haiti-500: #7c8395;
  --color-haiti-600: #616879;
  --color-haiti-700: #4a505f;
  --color-haiti-800: #373d49;
  --color-haiti-900: #262c3b;
  --color-haiti-950: #171a21;
  --color-morel: #735e5b;
  --color-morel-50: #fff2f0;
  --color-morel-100: #f5e5e3;
  --color-morel-200: #e2d0cd;
  --color-morel-300: #ccb7b4;
  --color-morel-400: #ac9693;
  --color-morel-500: #8f7976;
  --color-morel-600: #735e5b;
  --color-morel-700: #5c4a47;
  --color-morel-800: #493937;
  --color-morel-900: #392c2a;
  --color-morel-950: #241a19;
  --color-moon-veil: #8a94b5;
  --color-moon-veil-50: #ecf0ff;
  --color-moon-veil-100: #dce4fc;
  --color-moon-veil-200: #c5ceea;
  --color-moon-veil-300: #acb5d4;
  --color-moon-veil-400: #8a94b5;
  --color-moon-veil-500: #717b9b;
  --color-moon-veil-600: #5a6381;
  --color-moon-veil-700: #474f69;
  --color-moon-veil-800: #373e55;
  --color-moon-veil-900: #2a3044;
  --color-moon-veil-950: #1a1e2d;
  --color-marsh-fog: #c5d9c7;
  --color-marsh-fog-50: #eaf6eb;
  --color-marsh-fog-100: #deebdf;
  --color-marsh-fog-200: #c5d9c7;
  --color-marsh-fog-300: #b1c2b3;
  --color-marsh-fog-400: #92a494;
  --color-marsh-fog-500: #778a79;
  --color-marsh-fog-600: #5e7060;
  --color-marsh-fog-700: #4a594b;
  --color-marsh-fog-800: #39473a;
  --color-marsh-fog-900: #2b362c;
  --color-marsh-fog-950: #19221a;
}