Sailing to Mont Blanc Color Palette

About this palette

Sailing to Mont Blanc is a 5-color cool, vintage palette: #8D98BD (Sailing), #473D23 (Madras), #CCDEF6 (Puffy Cloud), #885C00 (Grizzly), #9DB7E0 (Mont Blanc). It mixes blue, brown tones and feels cool overall. The strongest text pairing is #473D23 on #CCDEF6 with a contrast ratio of 7.83:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sailing	rgb(141, 152, 189)	hsl(226, 27%, 65%)
Madras	rgb(71, 61, 35)	hsl(43, 34%, 21%)
Puffy Cloud	rgb(204, 222, 246)	hsl(214, 70%, 88%)
Grizzly	rgb(136, 92, 0)	hsl(41, 100%, 27%)
Mont Blanc	rgb(157, 183, 224)	hsl(217, 52%, 75%)

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.83:1 Very good#473D23 on #CCDEF6
Aa7.83:1 Very good#CCDEF6 on #473D23
Aa5.25:1 Good#473D23 on #9DB7E0
Aa5.25:1 Good#9DB7E0 on #473D23
Aa4.29:1 Poor#CCDEF6 on #885C00
Aa4.29:1 Poor#885C00 on #CCDEF6
Aa3.76:1 Poor#8D98BD on #473D23
Aa3.76:1 Poor#473D23 on #8D98BD

Color blindness preview

CSS variables

/* Sailing to Mont Blanc — https://swatchly.xyz/palette/8d98bd-473d23-ccdef6-885c00-9db7e0 */
:root {
  --sailing: #8d98bd;
  --madras: #473d23;
  --puffy-cloud: #ccdef6;
  --grizzly: #885c00;
  --mont-blanc: #9db7e0;
}

Tailwind CSS v4

/* Sailing to Mont Blanc — https://swatchly.xyz/palette/8d98bd-473d23-ccdef6-885c00-9db7e0 */
@theme {
  --color-sailing: #8d98bd;
  --color-sailing-50: #eef2ff;
  --color-sailing-100: #dee6ff;
  --color-sailing-200: #c8d1ef;
  --color-sailing-300: #afb9db;
  --color-sailing-400: #8d98bd;
  --color-sailing-500: #747ea2;
  --color-sailing-600: #5c6587;
  --color-sailing-700: #48506e;
  --color-sailing-800: #373f59;
  --color-sailing-900: #2a3047;
  --color-sailing-950: #1a1e2f;
  --color-madras: #473d23;
  --color-madras-50: #fbf5e4;
  --color-madras-100: #f2ebd8;
  --color-madras-200: #e0d7c0;
  --color-madras-300: #c9bfa6;
  --color-madras-400: #aa9f83;
  --color-madras-500: #8e8367;
  --color-madras-600: #72684d;
  --color-madras-700: #5a5139;
  --color-madras-800: #473d23;
  --color-madras-900: #352f1d;
  --color-madras-950: #211c10;
  --color-puffy-cloud: #ccdef6;
  --color-puffy-cloud-50: #f4f9ff;
  --color-puffy-cloud-100: #e6f0ff;
  --color-puffy-cloud-200: #ccdef6;
  --color-puffy-cloud-300: #b7c6da;
  --color-puffy-cloud-400: #96a6bc;
  --color-puffy-cloud-500: #798aa0;
  --color-puffy-cloud-600: #5f6f83;
  --color-puffy-cloud-700: #49576a;
  --color-puffy-cloud-800: #374354;
  --color-puffy-cloud-900: #293441;
  --color-puffy-cloud-950: #18202a;
  --color-grizzly: #885c00;
  --color-grizzly-50: #fff3e3;
  --color-grizzly-100: #ffe6c3;
  --color-grizzly-200: #f4cf99;
  --color-grizzly-300: #e0b678;
  --color-grizzly-400: #c2944e;
  --color-grizzly-500: #a5772c;
  --color-grizzly-600: #885c00;
  --color-grizzly-700: #6c4800;
  --color-grizzly-800: #553800;
  --color-grizzly-900: #432b00;
  --color-grizzly-950: #2b1a00;
  --color-mont-blanc: #9db7e0;
  --color-mont-blanc-50: #e6f0ff;
  --color-mont-blanc-100: #d4e5ff;
  --color-mont-blanc-200: #bacff1;
  --color-mont-blanc-300: #9db7e0;
  --color-mont-blanc-400: #819ac0;
  --color-mont-blanc-500: #6880a7;
  --color-mont-blanc-600: #51678c;
  --color-mont-blanc-700: #3e5373;
  --color-mont-blanc-800: #2f415e;
  --color-mont-blanc-900: #24334c;
  --color-mont-blanc-950: #141f31;
}