Windstorm to Quiet Harbour color palette

739BBDWindstorm 234B42Pine Needle 182F2CElite Teal D7B5AABorlotti Bean EED2C7Blushing Coconut 5B7694Quiet Harbour

Open in generator Export PNG, PDF, ASE…

About this palette

Windstorm to Quiet Harbour is a 6-color muted palette: #739BBD (Windstorm), #234B42 (Pine Needle), #182F2C (Elite Teal), #D7B5AA (Borlotti Bean), #EED2C7 (Blushing Coconut), #5B7694 (Quiet Harbour). It mixes blue, turquoise, gray, pink tones and feels cool overall. The strongest text pairing is #182F2C on #EED2C7 with a contrast ratio of 9.91:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Windstorm	rgb(115, 155, 189)	hsl(208, 36%, 60%)
Pine Needle	rgb(35, 75, 66)	hsl(167, 36%, 22%)
Elite Teal	rgb(24, 47, 44)	hsl(172, 32%, 14%)
Borlotti Bean	rgb(215, 181, 170)	hsl(15, 36%, 75%)
Blushing Coconut	rgb(238, 210, 199)	hsl(17, 53%, 86%)
Quiet Harbour	rgb(91, 118, 148)	hsl(212, 24%, 47%)

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.91:1 Very good#182F2C on #EED2C7
Aa9.91:1 Very good#EED2C7 on #182F2C
Aa7.48:1 Very good#182F2C on #D7B5AA
Aa7.48:1 Very good#D7B5AA on #182F2C
Aa6.81:1 Good#234B42 on #EED2C7
Aa6.81:1 Good#EED2C7 on #234B42
Aa5.14:1 Good#234B42 on #D7B5AA
Aa5.14:1 Good#D7B5AA on #234B42

Color blindness preview

CSS variables

/* Windstorm to Quiet Harbour — https://swatchly.xyz/palette/739bbd-234b42-182f2c-d7b5aa-eed2c7-5b7694 */
:root {
  --windstorm: #739bbd;
  --pine-needle: #234b42;
  --elite-teal: #182f2c;
  --borlotti-bean: #d7b5aa;
  --blushing-coconut: #eed2c7;
  --quiet-harbour: #5b7694;
}

Tailwind CSS v4

/* Windstorm to Quiet Harbour — https://swatchly.xyz/palette/739bbd-234b42-182f2c-d7b5aa-eed2c7-5b7694 */
@theme {
  --color-windstorm: #739bbd;
  --color-windstorm-50: #e5f3ff;
  --color-windstorm-100: #cfe9ff;
  --color-windstorm-200: #b3d4f0;
  --color-windstorm-300: #97bcdb;
  --color-windstorm-400: #739bbd;
  --color-windstorm-500: #5a82a2;
  --color-windstorm-600: #446988;
  --color-windstorm-700: #32546f;
  --color-windstorm-800: #24425a;
  --color-windstorm-900: #1a3448;
  --color-windstorm-950: #0e2130;
  --color-pine-needle: #234b42;
  --color-pine-needle-50: #e4fbf5;
  --color-pine-needle-100: #d7f2eb;
  --color-pine-needle-200: #c0e0d7;
  --color-pine-needle-300: #a6cac0;
  --color-pine-needle-400: #83aba1;
  --color-pine-needle-500: #679086;
  --color-pine-needle-600: #4d756b;
  --color-pine-needle-700: #395e55;
  --color-pine-needle-800: #234b42;
  --color-pine-needle-900: #1e3933;
  --color-pine-needle-950: #10241f;
  --color-elite-teal: #182f2c;
  --color-elite-teal-50: #eaf9f6;
  --color-elite-teal-100: #deefed;
  --color-elite-teal-200: #c8dcd9;
  --color-elite-teal-300: #b0c7c3;
  --color-elite-teal-400: #8da6a2;
  --color-elite-teal-500: #6f8985;
  --color-elite-teal-600: #546c69;
  --color-elite-teal-700: #3f5451;
  --color-elite-teal-800: #2d3f3c;
  --color-elite-teal-900: #182f2c;
  --color-elite-teal-950: #111b19;
  --color-borlotti-bean: #d7b5aa;
  --color-borlotti-bean-50: #fff0eb;
  --color-borlotti-bean-100: #fae3dc;
  --color-borlotti-bean-200: #e9cec6;
  --color-borlotti-bean-300: #d7b5aa;
  --color-borlotti-bean-400: #b6978c;
  --color-borlotti-bean-500: #9b7c72;
  --color-borlotti-bean-600: #806259;
  --color-borlotti-bean-700: #684d44;
  --color-borlotti-bean-800: #533c34;
  --color-borlotti-bean-900: #412d27;
  --color-borlotti-bean-950: #291b17;
  --color-blushing-coconut: #eed2c7;
  --color-blushing-coconut-50: #fff3ef;
  --color-blushing-coconut-100: #fae8e1;
  --color-blushing-coconut-200: #eed2c7;
  --color-blushing-coconut-300: #d4bcb3;
  --color-blushing-coconut-400: #b59c92;
  --color-blushing-coconut-500: #9a8076;
  --color-blushing-coconut-600: #7e665d;
  --color-blushing-coconut-700: #665047;
  --color-blushing-coconut-800: #503d36;
  --color-blushing-coconut-900: #3f2f28;
  --color-blushing-coconut-950: #281c18;
  --color-quiet-harbour: #5b7694;
  --color-quiet-harbour-50: #eef6ff;
  --color-quiet-harbour-100: #e0eeff;
  --color-quiet-harbour-200: #c7ddf5;
  --color-quiet-harbour-300: #afc8e4;
  --color-quiet-harbour-400: #8faac8;
  --color-quiet-harbour-500: #7490ae;
  --color-quiet-harbour-600: #5b7694;
  --color-quiet-harbour-700: #455e79;
  --color-quiet-harbour-800: #334961;
  --color-quiet-harbour-900: #25384c;
  --color-quiet-harbour-950: #152231;
}