Mont Blanc to Atlantis Color Palette

About this palette

Mont Blanc to Atlantis is a 5-color muted, cool palette: #9EB7DA (Mont Blanc), #394660 (Bonne Nuit), #7A99A4 (Inland Waters), #D7D3F7 (Icy Plains), #3E6474 (Atlantis). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #394660 on #D7D3F7 with a contrast ratio of 6.56:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mont Blanc	rgb(158, 183, 218)	hsl(215, 45%, 74%)
Bonne Nuit	rgb(57, 70, 96)	hsl(220, 25%, 30%)
Inland Waters	rgb(122, 153, 164)	hsl(196, 19%, 56%)
Icy Plains	rgb(215, 211, 247)	hsl(247, 69%, 90%)
Atlantis	rgb(62, 100, 116)	hsl(198, 30%, 35%)

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.

Aa6.56:1 Good#394660 on #D7D3F7
Aa6.56:1 Good#D7D3F7 on #394660
Aa4.61:1 Good#9EB7DA on #394660
Aa4.61:1 Good#394660 on #9EB7DA
Aa4.44:1 Poor#D7D3F7 on #3E6474
Aa4.44:1 Poor#3E6474 on #D7D3F7
Aa3.12:1 Poor#9EB7DA on #3E6474
Aa3.12:1 Poor#3E6474 on #9EB7DA

Color blindness preview

CSS variables

/* Mont Blanc to Atlantis — https://swatchly.xyz/palette/9eb7da-394660-7a99a4-d7d3f7-3e6474 */
:root {
  --mont-blanc: #9eb7da;
  --bonne-nuit: #394660;
  --inland-waters: #7a99a4;
  --icy-plains: #d7d3f7;
  --atlantis: #3e6474;
}

Tailwind CSS v4

/* Mont Blanc to Atlantis — https://swatchly.xyz/palette/9eb7da-394660-7a99a4-d7d3f7-3e6474 */
@theme {
  --color-mont-blanc: #9eb7da;
  --color-mont-blanc-50: #e5f0ff;
  --color-mont-blanc-100: #d3e5fd;
  --color-mont-blanc-200: #bbcfec;
  --color-mont-blanc-300: #9eb7da;
  --color-mont-blanc-400: #829abb;
  --color-mont-blanc-500: #6980a1;
  --color-mont-blanc-600: #526887;
  --color-mont-blanc-700: #3f536f;
  --color-mont-blanc-800: #30425a;
  --color-mont-blanc-900: #253448;
  --color-mont-blanc-950: #15202f;
  --color-bonne-nuit: #394660;
  --color-bonne-nuit-50: #f0f5ff;
  --color-bonne-nuit-100: #e1ecff;
  --color-bonne-nuit-200: #ccd8ef;
  --color-bonne-nuit-300: #b4c2dd;
  --color-bonne-nuit-400: #95a3c0;
  --color-bonne-nuit-500: #7a89a6;
  --color-bonne-nuit-600: #616f8a;
  --color-bonne-nuit-700: #4c5972;
  --color-bonne-nuit-800: #394660;
  --color-bonne-nuit-900: #2c3649;
  --color-bonne-nuit-950: #1b212f;
  --color-inland-waters: #7a99a4;
  --color-inland-waters-50: #edfaff;
  --color-inland-waters-100: #e1f4fb;
  --color-inland-waters-200: #cce3eb;
  --color-inland-waters-300: #b5cfd9;
  --color-inland-waters-400: #95b2bd;
  --color-inland-waters-500: #7a99a4;
  --color-inland-waters-600: #5e7c86;
  --color-inland-waters-700: #46626c;
  --color-inland-waters-800: #344c55;
  --color-inland-waters-900: #253a41;
  --color-inland-waters-950: #152429;
  --color-icy-plains: #d7d3f7;
  --color-icy-plains-50: #f5f4ff;
  --color-icy-plains-100: #ebe9ff;
  --color-icy-plains-200: #d7d3f7;
  --color-icy-plains-300: #c0bddb;
  --color-icy-plains-400: #a19dbe;
  --color-icy-plains-500: #8682a3;
  --color-icy-plains-600: #6b6787;
  --color-icy-plains-700: #55516d;
  --color-icy-plains-800: #423f57;
  --color-icy-plains-900: #333044;
  --color-icy-plains-950: #1f1d2c;
  --color-atlantis: #3e6474;
  --color-atlantis-50: #e9f8ff;
  --color-atlantis-100: #d6f0fb;
  --color-atlantis-200: #c1dfec;
  --color-atlantis-300: #a8cada;
  --color-atlantis-400: #87adbe;
  --color-atlantis-500: #6c93a4;
  --color-atlantis-600: #537a8a;
  --color-atlantis-700: #3e6474;
  --color-atlantis-800: #2e4e5c;
  --color-atlantis-900: #213c48;
  --color-atlantis-950: #12262e;
}