Start generating

Haiti to Stormy Horizon color palette

2B2E3CHaitiEABFAEMellow Marrow70554FAfternoon Coffee325747Hunter8EAD99OMGreen7A769EStormy Horizon
Open in generator Export PNG, PDF, ASE…

About this palette

Haiti to Stormy Horizon is a 6-color muted palette: #2B2E3C (Haiti), #EABFAE (Mellow Marrow), #70554F (Afternoon Coffee), #325747 (Hunter), #8EAD99 (OMGreen), #7A769E (Stormy Horizon). It mixes gray, orange, red, green, purple tones and feels cool overall. The strongest text pairing is #2B2E3C on #EABFAE with a contrast ratio of 8.06:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Haitirgb(43, 46, 60)hsl(229, 17%, 20%)
Mellow Marrowrgb(234, 191, 174)hsl(17, 59%, 80%)
Afternoon Coffeergb(112, 85, 79)hsl(11, 17%, 37%)
Hunterrgb(50, 87, 71)hsl(154, 27%, 27%)
OMGreenrgb(142, 173, 153)hsl(141, 16%, 62%)
Stormy Horizonrgb(122, 118, 158)hsl(246, 17%, 54%)

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.

  • Aa8.06:1 Very good#2B2E3C on #EABFAE
  • Aa8.06:1 Very good#EABFAE on #2B2E3C
  • Aa5.51:1 Good#2B2E3C on #8EAD99
  • Aa5.51:1 Good#8EAD99 on #2B2E3C
  • Aa4.85:1 Good#EABFAE on #325747
  • Aa4.85:1 Good#325747 on #EABFAE
  • Aa4.05:1 Poor#EABFAE on #70554F
  • Aa4.05:1 Poor#70554F on #EABFAE

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Haiti to Stormy Horizon — https://swatchly.xyz/palette/2b2e3c-eabfae-70554f-325747-8ead99-7a769e */
:root {
  --haiti: #2b2e3c;
  --mellow-marrow: #eabfae;
  --afternoon-coffee: #70554f;
  --hunter: #325747;
  --omgreen: #8ead99;
  --stormy-horizon: #7a769e;
}

Tailwind CSS v4

/* Haiti to Stormy Horizon — https://swatchly.xyz/palette/2b2e3c-eabfae-70554f-325747-8ead99-7a769e */
@theme {
  --color-haiti: #2b2e3c;
  --color-haiti-50: #f2f5ff;
  --color-haiti-100: #e8ebf6;
  --color-haiti-200: #d4d7e4;
  --color-haiti-300: #bcc0cf;
  --color-haiti-400: #9ca0b1;
  --color-haiti-500: #808494;
  --color-haiti-600: #656978;
  --color-haiti-700: #4e5260;
  --color-haiti-800: #3c3e4a;
  --color-haiti-900: #2b2e3c;
  --color-haiti-950: #1a1c23;
  --color-mellow-marrow: #eabfae;
  --color-mellow-marrow-50: #fff8f5;
  --color-mellow-marrow-100: #ffede6;
  --color-mellow-marrow-200: #f6d8cb;
  --color-mellow-marrow-300: #eabfae;
  --color-mellow-marrow-400: #c69f8f;
  --color-mellow-marrow-500: #a98172;
  --color-mellow-marrow-600: #8c6657;
  --color-mellow-marrow-700: #714f41;
  --color-mellow-marrow-800: #593b30;
  --color-mellow-marrow-900: #452c22;
  --color-mellow-marrow-950: #2c1a13;
  --color-afternoon-coffee: #70554f;
  --color-afternoon-coffee-50: #fff2ef;
  --color-afternoon-coffee-100: #fae6e1;
  --color-afternoon-coffee-200: #ead3cd;
  --color-afternoon-coffee-300: #d7bdb7;
  --color-afternoon-coffee-400: #bb9e97;
  --color-afternoon-coffee-500: #a1847d;
  --color-afternoon-coffee-600: #866a64;
  --color-afternoon-coffee-700: #70554f;
  --color-afternoon-coffee-800: #58423d;
  --color-afternoon-coffee-900: #45322e;
  --color-afternoon-coffee-950: #2c1e1b;
  --color-hunter: #325747;
  --color-hunter-50: #e5fbf0;
  --color-hunter-100: #d9f2e6;
  --color-hunter-200: #c0ded0;
  --color-hunter-300: #a5c8b7;
  --color-hunter-400: #81a896;
  --color-hunter-500: #648b79;
  --color-hunter-600: #4a6f5e;
  --color-hunter-700: #325747;
  --color-hunter-800: #274437;
  --color-hunter-900: #1c342a;
  --color-hunter-950: #0f2019;
  --color-omgreen: #8ead99;
  --color-omgreen-50: #eafbf0;
  --color-omgreen-100: #dff2e5;
  --color-omgreen-200: #c9e0d1;
  --color-omgreen-300: #b0cbb9;
  --color-omgreen-400: #8ead99;
  --color-omgreen-500: #73917e;
  --color-omgreen-600: #597563;
  --color-omgreen-700: #435e4d;
  --color-omgreen-800: #32493b;
  --color-omgreen-900: #25382c;
  --color-omgreen-950: #15231a;
  --color-stormy-horizon: #7a769e;
  --color-stormy-horizon-50: #f2f1ff;
  --color-stormy-horizon-100: #e6e4ff;
  --color-stormy-horizon-200: #d0cdef;
  --color-stormy-horizon-300: #b8b4db;
  --color-stormy-horizon-400: #9793bc;
  --color-stormy-horizon-500: #7a769e;
  --color-stormy-horizon-600: #625e83;
  --color-stormy-horizon-700: #4e4a6b;
  --color-stormy-horizon-800: #3d3956;
  --color-stormy-horizon-900: #2f2c45;
  --color-stormy-horizon-950: #1d1b2d;
}

Similar palettes