Six Feet Under to Harbour Mist Color Palette

About this palette

Six Feet Under to Harbour Mist is a 5-color muted, cool palette: #403232 (Six Feet Under), #775860 (Royal Fig), #5E8C85 (Aloe Vera), #AFD4CB (Whirlpool), #85A8A5 (Harbour Mist). It mixes gray, red, turquoise tones and feels cool overall. The strongest text pairing is #403232 on #AFD4CB with a contrast ratio of 7.62:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Six Feet Under	rgb(64, 50, 50)	hsl(0, 12%, 22%)
Royal Fig	rgb(119, 88, 96)	hsl(345, 15%, 41%)
Aloe Vera	rgb(94, 140, 133)	hsl(171, 20%, 46%)
Whirlpool	rgb(175, 212, 203)	hsl(165, 30%, 76%)
Harbour Mist	rgb(133, 168, 165)	hsl(175, 17%, 59%)

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.

Aa7.62:1 Very good#403232 on #AFD4CB
Aa7.62:1 Very good#AFD4CB on #403232
Aa4.73:1 Good#403232 on #85A8A5
Aa4.73:1 Good#85A8A5 on #403232
Aa3.91:1 Poor#775860 on #AFD4CB
Aa3.91:1 Poor#AFD4CB on #775860
Aa3.24:1 Poor#403232 on #5E8C85
Aa3.24:1 Poor#5E8C85 on #403232

Color blindness preview

CSS variables

/* Six Feet Under to Harbour Mist — https://swatchly.xyz/palette/403232-775860-5e8c85-afd4cb-85a8a5 */
:root {
  --six-feet-under: #403232;
  --royal-fig: #775860;
  --aloe-vera: #5e8c85;
  --whirlpool: #afd4cb;
  --harbour-mist: #85a8a5;
}

Tailwind CSS v4

/* Six Feet Under to Harbour Mist — https://swatchly.xyz/palette/403232-775860-5e8c85-afd4cb-85a8a5 */
@theme {
  --color-six-feet-under: #403232;
  --color-six-feet-under-50: #fdf2f2;
  --color-six-feet-under-100: #f4e8e8;
  --color-six-feet-under-200: #e1d4d4;
  --color-six-feet-under-300: #ccbdbd;
  --color-six-feet-under-400: #ae9e9d;
  --color-six-feet-under-500: #938383;
  --color-six-feet-under-600: #796969;
  --color-six-feet-under-700: #625453;
  --color-six-feet-under-800: #4e4242;
  --color-six-feet-under-900: #403232;
  --color-six-feet-under-950: #27201f;
  --color-royal-fig: #775860;
  --color-royal-fig-50: #fff1f4;
  --color-royal-fig-100: #fae2e8;
  --color-royal-fig-200: #e7cbd2;
  --color-royal-fig-300: #d1b2b9;
  --color-royal-fig-400: #b19098;
  --color-royal-fig-500: #94737c;
  --color-royal-fig-600: #775860;
  --color-royal-fig-700: #5f454c;
  --color-royal-fig-800: #4c353b;
  --color-royal-fig-900: #3b282d;
  --color-royal-fig-950: #26181c;
  --color-aloe-vera: #5e8c85;
  --color-aloe-vera-50: #e0fbf6;
  --color-aloe-vera-100: #d3f1ec;
  --color-aloe-vera-200: #baded8;
  --color-aloe-vera-300: #9ec8c1;
  --color-aloe-vera-400: #7ba8a1;
  --color-aloe-vera-500: #5e8c85;
  --color-aloe-vera-600: #46726b;
  --color-aloe-vera-700: #335b55;
  --color-aloe-vera-800: #244843;
  --color-aloe-vera-900: #193834;
  --color-aloe-vera-950: #0d2320;
  --color-whirlpool: #afd4cb;
  --color-whirlpool-50: #edfffa;
  --color-whirlpool-100: #e2f7f2;
  --color-whirlpool-200: #cde6e0;
  --color-whirlpool-300: #afd4cb;
  --color-whirlpool-400: #90b2aa;
  --color-whirlpool-500: #72958d;
  --color-whirlpool-600: #567870;
  --color-whirlpool-700: #405f58;
  --color-whirlpool-800: #2f4a44;
  --color-whirlpool-900: #213833;
  --color-whirlpool-950: #12231f;
  --color-harbour-mist: #85a8a5;
  --color-harbour-mist-50: #e5f9f8;
  --color-harbour-mist-100: #d9f0ee;
  --color-harbour-mist-200: #c2ddda;
  --color-harbour-mist-300: #a8c7c4;
  --color-harbour-mist-400: #85a8a5;
  --color-harbour-mist-500: #6a8d8a;
  --color-harbour-mist-600: #51726f;
  --color-harbour-mist-700: #3d5b59;
  --color-harbour-mist-800: #2d4846;
  --color-harbour-mist-900: #213736;
  --color-harbour-mist-950: #122321;
}