Start generating

Creole to Harbour Mist color palette

3A3228Creole444B5AAbyssalA78383EarthboundB7C8D9Life at Sea4C7372Rogue Waters8CAEB0Harbour Mist
Open in generator Export PNG, PDF, ASE…

About this palette

Creole to Harbour Mist is a 6-color muted palette: #3A3228 (Creole), #444B5A (Abyssal), #A78383 (Earthbound), #B7C8D9 (Life at Sea), #4C7372 (Rogue Waters), #8CAEB0 (Harbour Mist). It mixes gray, red, turquoise tones and feels cool overall. The strongest text pairing is #3A3228 on #B7C8D9 with a contrast ratio of 7.37:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Creolergb(58, 50, 40)hsl(33, 18%, 19%)
Abyssalrgb(68, 75, 90)hsl(221, 14%, 31%)
Earthboundrgb(167, 131, 131)hsl(0, 17%, 58%)
Life at Seargb(183, 200, 217)hsl(210, 31%, 78%)
Rogue Watersrgb(76, 115, 114)hsl(178, 20%, 37%)
Harbour Mistrgb(140, 174, 176)hsl(183, 19%, 62%)

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.37:1 Very good#3A3228 on #B7C8D9
  • Aa7.37:1 Very good#B7C8D9 on #3A3228
  • Aa5.28:1 Good#3A3228 on #8CAEB0
  • Aa5.28:1 Good#8CAEB0 on #3A3228
  • Aa5.12:1 Good#444B5A on #B7C8D9
  • Aa5.12:1 Good#B7C8D9 on #444B5A
  • Aa3.73:1 Poor#3A3228 on #A78383
  • Aa3.73:1 Poor#A78383 on #3A3228

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Creole to Harbour Mist — https://swatchly.xyz/palette/3a3228-444b5a-a78383-b7c8d9-4c7372-8caeb0 */
:root {
  --creole: #3a3228;
  --abyssal: #444b5a;
  --earthbound: #a78383;
  --life-at-sea: #b7c8d9;
  --rogue-waters: #4c7372;
  --harbour-mist: #8caeb0;
}

Tailwind CSS v4

/* Creole to Harbour Mist — https://swatchly.xyz/palette/3a3228-444b5a-a78383-b7c8d9-4c7372-8caeb0 */
@theme {
  --color-creole: #3a3228;
  --color-creole-50: #faf4ed;
  --color-creole-100: #f0eae2;
  --color-creole-200: #ded6cd;
  --color-creole-300: #c8bfb5;
  --color-creole-400: #a9a095;
  --color-creole-500: #8e8579;
  --color-creole-600: #736b60;
  --color-creole-700: #5c544a;
  --color-creole-800: #494239;
  --color-creole-900: #3a3228;
  --color-creole-950: #231f1a;
  --color-abyssal: #444b5a;
  --color-abyssal-50: #f1f5ff;
  --color-abyssal-100: #e6ebf7;
  --color-abyssal-200: #d1d8e5;
  --color-abyssal-300: #bcc3d2;
  --color-abyssal-400: #9da5b5;
  --color-abyssal-500: #838b9c;
  --color-abyssal-600: #6b7282;
  --color-abyssal-700: #565d6c;
  --color-abyssal-800: #444b5a;
  --color-abyssal-900: #343a45;
  --color-abyssal-950: #20242d;
  --color-earthbound: #a78383;
  --color-earthbound-50: #fff3f3;
  --color-earthbound-100: #ffe7e7;
  --color-earthbound-200: #f0d4d3;
  --color-earthbound-300: #ddbdbd;
  --color-earthbound-400: #c19e9e;
  --color-earthbound-500: #a78383;
  --color-earthbound-600: #8a6868;
  --color-earthbound-700: #6f5051;
  --color-earthbound-800: #583d3e;
  --color-earthbound-900: #452e2e;
  --color-earthbound-950: #2b1b1b;
  --color-life-at-sea: #b7c8d9;
  --color-life-at-sea-50: #f2f8ff;
  --color-life-at-sea-100: #e5f0fa;
  --color-life-at-sea-200: #d1ddea;
  --color-life-at-sea-300: #b7c8d9;
  --color-life-at-sea-400: #98a7b7;
  --color-life-at-sea-500: #7b8b9b;
  --color-life-at-sea-600: #61707f;
  --color-life-at-sea-700: #4b5866;
  --color-life-at-sea-800: #394450;
  --color-life-at-sea-900: #2a343e;
  --color-life-at-sea-950: #192027;
  --color-rogue-waters: #4c7372;
  --color-rogue-waters-50: #e4fbfa;
  --color-rogue-waters-100: #d7f1f0;
  --color-rogue-waters-200: #bfdedd;
  --color-rogue-waters-300: #a5c8c7;
  --color-rogue-waters-400: #83a9a8;
  --color-rogue-waters-500: #668e8d;
  --color-rogue-waters-600: #4c7372;
  --color-rogue-waters-700: #395c5b;
  --color-rogue-waters-800: #294847;
  --color-rogue-waters-900: #1d3837;
  --color-rogue-waters-950: #102322;
  --color-harbour-mist: #8caeb0;
  --color-harbour-mist-50: #e8fbfc;
  --color-harbour-mist-100: #def3f4;
  --color-harbour-mist-200: #c8e1e2;
  --color-harbour-mist-300: #afcccd;
  --color-harbour-mist-400: #8caeb0;
  --color-harbour-mist-500: #709193;
  --color-harbour-mist-600: #567678;
  --color-harbour-mist-700: #405e5f;
  --color-harbour-mist-800: #2f494b;
  --color-harbour-mist-900: #223839;
  --color-harbour-mist-950: #132223;
}

Similar palettes