Misty Harbour to Noir Color Palette

About this palette

Misty Harbour to Noir is a 5-color muted palette: #6F7391 (Misty Harbour), #E4F5ED (Bath Bubbles), #CDB1A7 (Garden Snail), #444864 (Bonne Nuit), #362923 (Noir). It mixes purple, white, orange, gray tones and feels cool overall. The strongest text pairing is #E4F5ED on #362923 with a contrast ratio of 12.40:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Misty Harbour	rgb(111, 115, 145)	hsl(233, 13%, 50%)
Bath Bubbles	rgb(228, 245, 237)	hsl(152, 46%, 93%)
Garden Snail	rgb(205, 177, 167)	hsl(16, 28%, 73%)
Bonne Nuit	rgb(68, 72, 100)	hsl(232, 19%, 33%)
Noir	rgb(54, 41, 35)	hsl(19, 21%, 17%)

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.

Aa12.40:1 Super#E4F5ED on #362923
Aa12.40:1 Super#362923 on #E4F5ED
Aa7.88:1 Very good#E4F5ED on #444864
Aa7.88:1 Very good#444864 on #E4F5ED
Aa6.97:1 Good#CDB1A7 on #362923
Aa6.97:1 Good#362923 on #CDB1A7
Aa4.43:1 Poor#CDB1A7 on #444864
Aa4.43:1 Poor#444864 on #CDB1A7

Color blindness preview

CSS variables

/* Misty Harbour to Noir — https://swatchly.xyz/palette/6f7391-e4f5ed-cdb1a7-444864-362923 */
:root {
  --misty-harbour: #6f7391;
  --bath-bubbles: #e4f5ed;
  --garden-snail: #cdb1a7;
  --bonne-nuit: #444864;
  --noir: #362923;
}

Tailwind CSS v4

/* Misty Harbour to Noir — https://swatchly.xyz/palette/6f7391-e4f5ed-cdb1a7-444864-362923 */
@theme {
  --color-misty-harbour: #6f7391;
  --color-misty-harbour-50: #f3f4ff;
  --color-misty-harbour-100: #e9ecff;
  --color-misty-harbour-200: #d6d9f2;
  --color-misty-harbour-300: #c0c4e0;
  --color-misty-harbour-400: #a2a6c4;
  --color-misty-harbour-500: #888cab;
  --color-misty-harbour-600: #6f7391;
  --color-misty-harbour-700: #575b76;
  --color-misty-harbour-800: #43465e;
  --color-misty-harbour-900: #33354a;
  --color-misty-harbour-950: #1f212f;
  --color-bath-bubbles: #e4f5ed;
  --color-bath-bubbles-50: #e4f5ed;
  --color-bath-bubbles-100: #dfeae5;
  --color-bath-bubbles-200: #cbd8d2;
  --color-bath-bubbles-300: #b4c2bc;
  --color-bath-bubbles-400: #95a49d;
  --color-bath-bubbles-500: #7a8a82;
  --color-bath-bubbles-600: #617069;
  --color-bath-bubbles-700: #4c5953;
  --color-bath-bubbles-800: #3a4540;
  --color-bath-bubbles-900: #2c3531;
  --color-bath-bubbles-950: #1a211e;
  --color-garden-snail: #cdb1a7;
  --color-garden-snail-50: #feece6;
  --color-garden-snail-100: #f4e0d9;
  --color-garden-snail-200: #e1cac2;
  --color-garden-snail-300: #cdb1a7;
  --color-garden-snail-400: #ae948a;
  --color-garden-snail-500: #947a71;
  --color-garden-snail-600: #7a6159;
  --color-garden-snail-700: #634d45;
  --color-garden-snail-800: #4f3c35;
  --color-garden-snail-900: #3f2e29;
  --color-garden-snail-950: #281c18;
  --color-bonne-nuit: #444864;
  --color-bonne-nuit-50: #f2f4ff;
  --color-bonne-nuit-100: #e6eaff;
  --color-bonne-nuit-200: #d1d6ef;
  --color-bonne-nuit-300: #bcc1dd;
  --color-bonne-nuit-400: #9da2c1;
  --color-bonne-nuit-500: #8388a8;
  --color-bonne-nuit-600: #6b6f8d;
  --color-bonne-nuit-700: #565a76;
  --color-bonne-nuit-800: #444864;
  --color-bonne-nuit-900: #34374d;
  --color-bonne-nuit-950: #202332;
  --color-noir: #362923;
  --color-noir-50: #fdf3ee;
  --color-noir-100: #f4e9e4;
  --color-noir-200: #e1d4cf;
  --color-noir-300: #ccbdb7;
  --color-noir-400: #ac9c95;
  --color-noir-500: #908079;
  --color-noir-600: #73645e;
  --color-noir-700: #5a4d47;
  --color-noir-800: #453a35;
  --color-noir-900: #362923;
  --color-noir-950: #1f1916;
}