Mont Blanc to Oh Boy! Color Palette

About this palette

Mont Blanc to Oh Boy! is a 5-color muted, cool, monochromatic palette: #99B1CF (Mont Blanc), #51627B (Admiral Blue), #6D82AF (Kimono), #242C3D (Haiti), #C2D6FA (Oh Boy!). It mixes blue, gray tones and feels cool overall. The strongest text pairing is #242C3D on #C2D6FA with a contrast ratio of 9.51:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mont Blanc	rgb(153, 177, 207)	hsl(213, 36%, 71%)
Admiral Blue	rgb(81, 98, 123)	hsl(216, 21%, 40%)
Kimono	rgb(109, 130, 175)	hsl(221, 29%, 56%)
Haiti	rgb(36, 44, 61)	hsl(221, 26%, 19%)
Oh Boy!	rgb(194, 214, 250)	hsl(219, 85%, 87%)

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.51:1 Very good#242C3D on #C2D6FA
Aa9.51:1 Very good#C2D6FA on #242C3D
Aa6.35:1 Good#99B1CF on #242C3D
Aa6.35:1 Good#242C3D on #99B1CF
Aa4.22:1 Poor#51627B on #C2D6FA
Aa4.22:1 Poor#C2D6FA on #51627B
Aa3.64:1 Poor#6D82AF on #242C3D
Aa3.64:1 Poor#242C3D on #6D82AF

Color blindness preview

CSS variables

/* Mont Blanc to Oh Boy! — https://swatchly.xyz/palette/99b1cf-51627b-6d82af-242c3d-c2d6fa */
:root {
  --mont-blanc: #99b1cf;
  --admiral-blue: #51627b;
  --kimono: #6d82af;
  --haiti: #242c3d;
  --oh-boy: #c2d6fa;
}

Tailwind CSS v4

/* Mont Blanc to Oh Boy! — https://swatchly.xyz/palette/99b1cf-51627b-6d82af-242c3d-c2d6fa */
@theme {
  --color-mont-blanc: #99b1cf;
  --color-mont-blanc-50: #f6faff;
  --color-mont-blanc-100: #eaf3ff;
  --color-mont-blanc-200: #d1e3f8;
  --color-mont-blanc-300: #bbcee7;
  --color-mont-blanc-400: #99b1cf;
  --color-mont-blanc-500: #7c93b0;
  --color-mont-blanc-600: #607692;
  --color-mont-blanc-700: #485d76;
  --color-mont-blanc-800: #36475d;
  --color-mont-blanc-900: #273648;
  --color-mont-blanc-950: #16202d;
  --color-admiral-blue: #51627b;
  --color-admiral-blue-50: #eff6ff;
  --color-admiral-blue-100: #deeafd;
  --color-admiral-blue-200: #c6d5eb;
  --color-admiral-blue-300: #abbcd5;
  --color-admiral-blue-400: #899bb6;
  --color-admiral-blue-500: #6c7e98;
  --color-admiral-blue-600: #51627b;
  --color-admiral-blue-700: #3f4d63;
  --color-admiral-blue-800: #303c4f;
  --color-admiral-blue-900: #242f3e;
  --color-admiral-blue-950: #151d28;
  --color-kimono: #6d82af;
  --color-kimono-50: #eff5ff;
  --color-kimono-100: #e0eaff;
  --color-kimono-200: #c4d6fb;
  --color-kimono-300: #aabee8;
  --color-kimono-400: #899ecb;
  --color-kimono-500: #6d82af;
  --color-kimono-600: #556893;
  --color-kimono-700: #415278;
  --color-kimono-800: #314061;
  --color-kimono-900: #24314d;
  --color-kimono-950: #151e32;
  --color-haiti: #242c3d;
  --color-haiti-50: #f0f5ff;
  --color-haiti-100: #e4ebf9;
  --color-haiti-200: #d0d8e8;
  --color-haiti-300: #b8c1d4;
  --color-haiti-400: #96a0b5;
  --color-haiti-500: #7a8498;
  --color-haiti-600: #5f687b;
  --color-haiti-700: #485061;
  --color-haiti-800: #363d4b;
  --color-haiti-900: #242c3d;
  --color-haiti-950: #161a22;
  --color-oh-boy: #c2d6fa;
  --color-oh-boy-50: #eef4ff;
  --color-oh-boy-100: #deeaff;
  --color-oh-boy-200: #c2d6fa;
  --color-oh-boy-300: #afc0de;
  --color-oh-boy-400: #8ea1c2;
  --color-oh-boy-500: #7386a7;
  --color-oh-boy-600: #5a6b8b;
  --color-oh-boy-700: #465571;
  --color-oh-boy-800: #35425b;
  --color-oh-boy-900: #283348;
  --color-oh-boy-950: #171f2e;
}