Haiti to Seashell Color Palette

About this palette

Haiti to Seashell is a 5-color muted, gradient palette: #2F2D39 (Haiti), #5D603D (Cypress), #9E897A (Earthbound), #AABFCB (Rendez-Blue), #FFF7F1 (Seashell). It mixes gray, green, white tones and feels warm overall. The strongest text pairing is #2F2D39 on #FFF7F1 with a contrast ratio of 12.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Haiti	rgb(47, 45, 57)	hsl(250, 12%, 20%)
Cypress	rgb(93, 96, 61)	hsl(65, 22%, 31%)
Earthbound	rgb(158, 137, 122)	hsl(25, 16%, 55%)
Rendez-Blue	rgb(170, 191, 203)	hsl(202, 24%, 73%)
Seashell	rgb(255, 247, 241)	hsl(26, 100%, 97%)

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.75:1 Super#2F2D39 on #FFF7F1
Aa12.75:1 Super#FFF7F1 on #2F2D39
Aa7.09:1 Very good#2F2D39 on #AABFCB
Aa7.09:1 Very good#AABFCB on #2F2D39
Aa6.18:1 Good#5D603D on #FFF7F1
Aa6.18:1 Good#FFF7F1 on #5D603D
Aa4.06:1 Poor#2F2D39 on #9E897A
Aa4.06:1 Poor#9E897A on #2F2D39

Color blindness preview

CSS variables

/* Haiti to Seashell — https://swatchly.xyz/palette/2f2d39-5d603d-9e897a-aabfcb-fff7f1 */
:root {
  --haiti: #2f2d39;
  --cypress: #5d603d;
  --earthbound: #9e897a;
  --rendez-blue: #aabfcb;
  --seashell: #fff7f1;
}

Tailwind CSS v4

/* Haiti to Seashell — https://swatchly.xyz/palette/2f2d39-5d603d-9e897a-aabfcb-fff7f1 */
@theme {
  --color-haiti: #2f2d39;
  --color-haiti-50: #f5f4fd;
  --color-haiti-100: #ebeaf4;
  --color-haiti-200: #d7d6e1;
  --color-haiti-300: #c1bfcc;
  --color-haiti-400: #a19fad;
  --color-haiti-500: #858291;
  --color-haiti-600: #6a6875;
  --color-haiti-700: #52515d;
  --color-haiti-800: #3f3d48;
  --color-haiti-900: #2f2d39;
  --color-haiti-950: #1c1b21;
  --color-cypress: #5d603d;
  --color-cypress-50: #f5f8e2;
  --color-cypress-100: #ebeed5;
  --color-cypress-200: #d9dcbf;
  --color-cypress-300: #c4c7a7;
  --color-cypress-400: #a6a986;
  --color-cypress-500: #8c8f6b;
  --color-cypress-600: #727652;
  --color-cypress-700: #5d603d;
  --color-cypress-800: #494b2e;
  --color-cypress-900: #383a21;
  --color-cypress-950: #232412;
  --color-earthbound: #9e897a;
  --color-earthbound-50: #fff4ed;
  --color-earthbound-100: #f9ebe1;
  --color-earthbound-200: #e8d8cc;
  --color-earthbound-300: #d5c2b5;
  --color-earthbound-400: #b8a395;
  --color-earthbound-500: #9e897a;
  --color-earthbound-600: #816d5f;
  --color-earthbound-700: #685649;
  --color-earthbound-800: #524237;
  --color-earthbound-900: #3f3228;
  --color-earthbound-950: #281e17;
  --color-rendez-blue: #aabfcb;
  --color-rendez-blue-50: #e8f4fc;
  --color-rendez-blue-100: #dceaf2;
  --color-rendez-blue-200: #c5d6df;
  --color-rendez-blue-300: #aabfcb;
  --color-rendez-blue-400: #8da0ac;
  --color-rendez-blue-500: #728691;
  --color-rendez-blue-600: #5a6c77;
  --color-rendez-blue-700: #455660;
  --color-rendez-blue-800: #35444c;
  --color-rendez-blue-900: #28353c;
  --color-rendez-blue-950: #182126;
  --color-seashell: #fff7f1;
  --color-seashell-50: #fff7f1;
  --color-seashell-100: #f2ede9;
  --color-seashell-200: #ded9d4;
  --color-seashell-300: #c8c1bc;
  --color-seashell-400: #a8a19c;
  --color-seashell-500: #8c8580;
  --color-seashell-600: #716a65;
  --color-seashell-700: #5a544f;
  --color-seashell-800: #46413d;
  --color-seashell-900: #36322e;
  --color-seashell-950: #221f1c;
}