Seven Seas to Haiti Color Palette

About this palette

Seven Seas to Haiti is a 4-color muted palette: #485C68 (Seven Seas), #E2CDC5 (Humble Blush), #908C5B (Green Olive), #272935 (Haiti). It mixes gray, yellow tones and feels warm overall. The strongest text pairing is #E2CDC5 on #272935 with a contrast ratio of 9.47:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Seven Seas	rgb(72, 92, 104)	hsl(202, 18%, 35%)
Humble Blush	rgb(226, 205, 197)	hsl(17, 33%, 83%)
Green Olive	rgb(144, 140, 91)	hsl(55, 23%, 46%)
Haiti	rgb(39, 41, 53)	hsl(231, 15%, 18%)

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.47:1 Very good#E2CDC5 on #272935
Aa9.47:1 Very good#272935 on #E2CDC5
Aa4.58:1 Good#485C68 on #E2CDC5
Aa4.58:1 Good#E2CDC5 on #485C68
Aa4.18:1 Poor#908C5B on #272935
Aa4.18:1 Poor#272935 on #908C5B

Color blindness preview

CSS variables

/* Seven Seas to Haiti — https://swatchly.xyz/palette/485c68-e2cdc5-908c5b-272935 */
:root {
  --seven-seas: #485c68;
  --humble-blush: #e2cdc5;
  --green-olive: #908c5b;
  --haiti: #272935;
}

Tailwind CSS v4

/* Seven Seas to Haiti — https://swatchly.xyz/palette/485c68-e2cdc5-908c5b-272935 */
@theme {
  --color-seven-seas: #485c68;
  --color-seven-seas-50: #ebf7ff;
  --color-seven-seas-100: #dfeef6;
  --color-seven-seas-200: #cadbe5;
  --color-seven-seas-300: #b3c6d1;
  --color-seven-seas-400: #92a7b4;
  --color-seven-seas-500: #778c99;
  --color-seven-seas-600: #5e727f;
  --color-seven-seas-700: #485c68;
  --color-seven-seas-800: #374852;
  --color-seven-seas-900: #293740;
  --color-seven-seas-950: #182228;
  --color-humble-blush: #e2cdc5;
  --color-humble-blush-50: #fbeeea;
  --color-humble-blush-100: #f1e3de;
  --color-humble-blush-200: #e2cdc5;
  --color-humble-blush-300: #cab8b1;
  --color-humble-blush-400: #ad9992;
  --color-humble-blush-500: #927f78;
  --color-humble-blush-600: #78665f;
  --color-humble-blush-700: #61504a;
  --color-humble-blush-800: #4d3f39;
  --color-humble-blush-900: #3c302b;
  --color-humble-blush-950: #261d1a;
  --color-green-olive: #908c5b;
  --color-green-olive-50: #f9f8db;
  --color-green-olive-100: #f0eecf;
  --color-green-olive-200: #dedcb6;
  --color-green-olive-300: #c9c69b;
  --color-green-olive-400: #aba778;
  --color-green-olive-500: #908c5b;
  --color-green-olive-600: #757141;
  --color-green-olive-700: #5d592d;
  --color-green-olive-800: #49451e;
  --color-green-olive-900: #383514;
  --color-green-olive-950: #232108;
  --color-haiti: #272935;
  --color-haiti-50: #f3f5fe;
  --color-haiti-100: #e9eaf5;
  --color-haiti-200: #d4d7e3;
  --color-haiti-300: #bec0cd;
  --color-haiti-400: #9c9fad;
  --color-haiti-500: #7f8290;
  --color-haiti-600: #636673;
  --color-haiti-700: #4c4e5a;
  --color-haiti-800: #383a44;
  --color-haiti-900: #272935;
  --color-haiti-950: #17181d;
}