Misty Harbour to Voila! Color Palette

About this palette

Misty Harbour to Voila! is a 6-color muted, vintage palette: #65799D (Misty Harbour), #DAECFF (Cloudless), #89D3C1 (Shore), #524526 (Olive Leaf), #422031 (Castro), #B88DA2 (Voila!). It mixes blue, white, turquoise, brown, red, pink tones and feels warm overall. The strongest text pairing is #DAECFF on #422031 with a contrast ratio of 11.75:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Misty Harbour	rgb(101, 121, 157)	hsl(219, 22%, 51%)
Cloudless	rgb(218, 236, 255)	hsl(211, 100%, 93%)
Shore	rgb(137, 211, 193)	hsl(165, 46%, 68%)
Olive Leaf	rgb(82, 69, 38)	hsl(42, 37%, 24%)
Castro	rgb(66, 32, 49)	hsl(330, 35%, 19%)
Voila!	rgb(184, 141, 162)	hsl(331, 23%, 64%)

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.

Aa11.75:1 Very good#DAECFF on #422031
Aa11.75:1 Very good#422031 on #DAECFF
Aa8.20:1 Very good#89D3C1 on #422031
Aa8.20:1 Very good#422031 on #89D3C1
Aa7.79:1 Very good#DAECFF on #524526
Aa7.79:1 Very good#524526 on #DAECFF
Aa5.43:1 Good#89D3C1 on #524526
Aa5.43:1 Good#524526 on #89D3C1

Color blindness preview

CSS variables

/* Misty Harbour to Voila! — https://swatchly.xyz/palette/65799d-daecff-89d3c1-524526-422031-b88da2 */
:root {
  --misty-harbour: #65799d;
  --cloudless: #daecff;
  --shore: #89d3c1;
  --olive-leaf: #524526;
  --castro: #422031;
  --voila: #b88da2;
}

Tailwind CSS v4

/* Misty Harbour to Voila! — https://swatchly.xyz/palette/65799d-daecff-89d3c1-524526-422031-b88da2 */
@theme {
  --color-misty-harbour: #65799d;
  --color-misty-harbour-50: #f0f5ff;
  --color-misty-harbour-100: #e5eeff;
  --color-misty-harbour-200: #cdddfa;
  --color-misty-harbour-300: #b7c9e9;
  --color-misty-harbour-400: #97abcf;
  --color-misty-harbour-500: #7d92b7;
  --color-misty-harbour-600: #65799d;
  --color-misty-harbour-700: #4d6081;
  --color-misty-harbour-800: #3a4a67;
  --color-misty-harbour-900: #2b3851;
  --color-misty-harbour-950: #192335;
  --color-cloudless: #daecff;
  --color-cloudless-50: #ecf5ff;
  --color-cloudless-100: #daecff;
  --color-cloudless-200: #cbd8e6;
  --color-cloudless-300: #b3c2d2;
  --color-cloudless-400: #93a3b4;
  --color-cloudless-500: #778899;
  --color-cloudless-600: #5e6d7e;
  --color-cloudless-700: #495766;
  --color-cloudless-800: #384450;
  --color-cloudless-900: #2a343f;
  --color-cloudless-950: #192028;
  --color-shore: #89d3c1;
  --color-shore-50: #dbfff5;
  --color-shore-100: #cbf7eb;
  --color-shore-200: #b0e5d8;
  --color-shore-300: #89d3c1;
  --color-shore-400: #6cb2a1;
  --color-shore-500: #4d9686;
  --color-shore-600: #317b6b;
  --color-shore-700: #1c6355;
  --color-shore-800: #0b4e42;
  --color-shore-900: #023c32;
  --color-shore-950: #00261f;
  --color-olive-leaf: #524526;
  --color-olive-leaf-50: #fdf4e1;
  --color-olive-leaf-100: #f4ead4;
  --color-olive-leaf-200: #e2d7bd;
  --color-olive-leaf-300: #cdc1a3;
  --color-olive-leaf-400: #b0a282;
  --color-olive-leaf-500: #958766;
  --color-olive-leaf-600: #7b6d4e;
  --color-olive-leaf-700: #64583a;
  --color-olive-leaf-800: #524526;
  --color-olive-leaf-900: #3f351f;
  --color-olive-leaf-950: #282111;
  --color-castro: #422031;
  --color-castro-50: #fff1f7;
  --color-castro-100: #ffe2ef;
  --color-castro-200: #efcddb;
  --color-castro-300: #dbb5c5;
  --color-castro-400: #bc93a5;
  --color-castro-500: #9f7689;
  --color-castro-600: #825b6d;
  --color-castro-700: #674555;
  --color-castro-800: #503341;
  --color-castro-900: #422031;
  --color-castro-950: #25151d;
  --color-voila: #b88da2;
  --color-voila-50: #ffedf5;
  --color-voila-100: #fcdeec;
  --color-voila-200: #ebc8d8;
  --color-voila-300: #d6afc2;
  --color-voila-400: #b88da2;
  --color-voila-500: #9d7388;
  --color-voila-600: #815b6e;
  --color-voila-700: #694658;
  --color-voila-800: #543645;
  --color-voila-900: #432936;
  --color-voila-950: #2b1922;
}