Admiral Blue to Moon Veil Color Palette

About this palette

Admiral Blue to Moon Veil is a 5-color muted palette: #506880 (Admiral Blue), #F6F8FF (Ghost White), #332E36 (Mystical Shadow), #BAC6D7 (Plein Air), #9198AE (Moon Veil). It mixes blue, white, gray tones and feels cool overall. The strongest text pairing is #F6F8FF on #332E36 with a contrast ratio of 12.49:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Admiral Blue	rgb(80, 104, 128)	hsl(210, 23%, 41%)
Ghost White	rgb(246, 248, 255)	hsl(227, 100%, 98%)
Mystical Shadow	rgb(51, 46, 54)	hsl(278, 8%, 20%)
Plein Air	rgb(186, 198, 215)	hsl(215, 27%, 79%)
Moon Veil	rgb(145, 152, 174)	hsl(226, 15%, 63%)

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.49:1 Super#F6F8FF on #332E36
Aa12.49:1 Super#332E36 on #F6F8FF
Aa7.66:1 Very good#332E36 on #BAC6D7
Aa7.66:1 Very good#BAC6D7 on #332E36
Aa5.45:1 Good#506880 on #F6F8FF
Aa5.45:1 Good#F6F8FF on #506880
Aa4.61:1 Good#332E36 on #9198AE
Aa4.61:1 Good#9198AE on #332E36

Color blindness preview

CSS variables

/* Admiral Blue to Moon Veil — https://swatchly.xyz/palette/506880-f6f8ff-332e36-bac6d7-9198ae */
:root {
  --admiral-blue: #506880;
  --ghost-white: #f6f8ff;
  --mystical-shadow: #332e36;
  --plein-air: #bac6d7;
  --moon-veil: #9198ae;
}

Tailwind CSS v4

/* Admiral Blue to Moon Veil — https://swatchly.xyz/palette/506880-f6f8ff-332e36-bac6d7-9198ae */
@theme {
  --color-admiral-blue: #506880;
  --color-admiral-blue-50: #eef6ff;
  --color-admiral-blue-100: #dbecfe;
  --color-admiral-blue-200: #c3d8ec;
  --color-admiral-blue-300: #a9c0d8;
  --color-admiral-blue-400: #87a0b9;
  --color-admiral-blue-500: #6b839c;
  --color-admiral-blue-600: #506880;
  --color-admiral-blue-700: #3d5267;
  --color-admiral-blue-800: #2e4052;
  --color-admiral-blue-900: #223241;
  --color-admiral-blue-950: #141f2a;
  --color-ghost-white: #f6f8ff;
  --color-ghost-white-50: #f6f8ff;
  --color-ghost-white-100: #eceef2;
  --color-ghost-white-200: #d8d9de;
  --color-ghost-white-300: #c0c2c8;
  --color-ghost-white-400: #a0a2a8;
  --color-ghost-white-500: #85868d;
  --color-ghost-white-600: #6a6b71;
  --color-ghost-white-700: #53555a;
  --color-ghost-white-800: #414247;
  --color-ghost-white-900: #323337;
  --color-ghost-white-950: #1e1f22;
  --color-mystical-shadow: #332e36;
  --color-mystical-shadow-50: #f7f3f9;
  --color-mystical-shadow-100: #ede9f0;
  --color-mystical-shadow-200: #dad5dd;
  --color-mystical-shadow-300: #c4bec7;
  --color-mystical-shadow-400: #a49ea8;
  --color-mystical-shadow-500: #88838c;
  --color-mystical-shadow-600: #6d6871;
  --color-mystical-shadow-700: #565159;
  --color-mystical-shadow-800: #423e45;
  --color-mystical-shadow-900: #332e36;
  --color-mystical-shadow-950: #1f1c20;
  --color-plein-air: #bac6d7;
  --color-plein-air-50: #f2f8ff;
  --color-plein-air-100: #e7eff9;
  --color-plein-air-200: #d3dce8;
  --color-plein-air-300: #bac6d7;
  --color-plein-air-400: #9ba6b5;
  --color-plein-air-500: #7e8a99;
  --color-plein-air-600: #646e7e;
  --color-plein-air-700: #4e5765;
  --color-plein-air-800: #3b444f;
  --color-plein-air-900: #2c333d;
  --color-plein-air-950: #1b2027;
  --color-moon-veil: #9198ae;
  --color-moon-veil-50: #edf2ff;
  --color-moon-veil-100: #e1e6f5;
  --color-moon-veil-200: #cbd1e3;
  --color-moon-veil-300: #b2b9cd;
  --color-moon-veil-400: #9198ae;
  --color-moon-veil-500: #787e94;
  --color-moon-veil-600: #5f667a;
  --color-moon-veil-700: #4b5163;
  --color-moon-veil-800: #3a3f4f;
  --color-moon-veil-900: #2d313e;
  --color-moon-veil-950: #1c1f29;
}