Moonraker to The Count’s Black color palette

B9B8E6Moonraker 545789Piccadilly Purple 7F7191Purple Haze C9E2F8Salty Ice 17202CThe Count’s Black

About this palette

Moonraker to The Count’s Black is a 5-color muted, cool palette: #B9B8E6 (Moonraker), #545789 (Piccadilly Purple), #7F7191 (Purple Haze), #C9E2F8 (Salty Ice), #17202C (The Count’s Black). It mixes purple, blue, gray tones and feels cool overall. The strongest text pairing is #C9E2F8 on #17202C with a contrast ratio of 12.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Moonraker	rgb(185, 184, 230)	hsl(241, 48%, 81%)
Piccadilly Purple	rgb(84, 87, 137)	hsl(237, 24%, 43%)
Purple Haze	rgb(127, 113, 145)	hsl(266, 13%, 51%)
Salty Ice	rgb(201, 226, 248)	hsl(208, 77%, 88%)
The Count’s Black	rgb(23, 32, 44)	hsl(214, 31%, 13%)

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.29:1 Super#C9E2F8 on #17202C
Aa12.29:1 Super#17202C on #C9E2F8
Aa8.65:1 Very good#B9B8E6 on #17202C
Aa8.65:1 Very good#17202C on #B9B8E6
Aa5.07:1 Good#545789 on #C9E2F8
Aa5.07:1 Good#C9E2F8 on #545789
Aa3.65:1 Poor#7F7191 on #17202C
Aa3.65:1 Poor#17202C on #7F7191

Color blindness preview

CSS variables

/* Moonraker to The Count’s Black — https://swatchly.xyz/palette/b9b8e6-545789-7f7191-c9e2f8-17202c */
:root {
  --moonraker: #b9b8e6;
  --piccadilly-purple: #545789;
  --purple-haze: #7f7191;
  --salty-ice: #c9e2f8;
  --the-count-s-black: #17202c;
}

Tailwind CSS v4

/* Moonraker to The Count’s Black — https://swatchly.xyz/palette/b9b8e6-545789-7f7191-c9e2f8-17202c */
@theme {
  --color-moonraker: #b9b8e6;
  --color-moonraker-50: #f2f2ff;
  --color-moonraker-100: #e6e6ff;
  --color-moonraker-200: #d1d1f4;
  --color-moonraker-300: #b9b8e6;
  --color-moonraker-400: #9b9ac5;
  --color-moonraker-500: #807faa;
  --color-moonraker-600: #67658e;
  --color-moonraker-700: #514f74;
  --color-moonraker-800: #3f3e5e;
  --color-moonraker-900: #312f4a;
  --color-moonraker-950: #1e1d30;
  --color-piccadilly-purple: #545789;
  --color-piccadilly-purple-50: #f3f4ff;
  --color-piccadilly-purple-100: #e7eaff;
  --color-piccadilly-purple-200: #d1d5ff;
  --color-piccadilly-purple-300: #bbc0f0;
  --color-piccadilly-purple-400: #9ca1d5;
  --color-piccadilly-purple-500: #8286bb;
  --color-piccadilly-purple-600: #696da0;
  --color-piccadilly-purple-700: #545789;
  --color-piccadilly-purple-800: #41436d;
  --color-piccadilly-purple-900: #313357;
  --color-piccadilly-purple-950: #1e1f39;
  --color-purple-haze: #7f7191;
  --color-purple-haze-50: #f8f2ff;
  --color-purple-haze-100: #f2e9ff;
  --color-purple-haze-200: #e1d7f0;
  --color-purple-haze-300: #cec1de;
  --color-purple-haze-400: #b1a3c3;
  --color-purple-haze-500: #988aaa;
  --color-purple-haze-600: #7f7191;
  --color-purple-haze-700: #655876;
  --color-purple-haze-800: #4f445e;
  --color-purple-haze-900: #3d3349;
  --color-purple-haze-950: #261f2f;
  --color-salty-ice: #c9e2f8;
  --color-salty-ice-50: #f6fbff;
  --color-salty-ice-100: #e6f3ff;
  --color-salty-ice-200: #c9e2f8;
  --color-salty-ice-300: #b5c9db;
  --color-salty-ice-400: #92a9bd;
  --color-salty-ice-500: #758ca1;
  --color-salty-ice-600: #5b7184;
  --color-salty-ice-700: #45596a;
  --color-salty-ice-800: #334553;
  --color-salty-ice-900: #263541;
  --color-salty-ice-950: #16212a;
  --color-the-count-s-black: #17202c;
  --color-the-count-s-black-50: #eff6ff;
  --color-the-count-s-black-100: #e4ecf6;
  --color-the-count-s-black-200: #cfd8e5;
  --color-the-count-s-black-300: #b8c2d0;
  --color-the-count-s-black-400: #97a3b2;
  --color-the-count-s-black-500: #7c8796;
  --color-the-count-s-black-600: #626d7b;
  --color-the-count-s-black-700: #4d5663;
  --color-the-count-s-black-800: #3b434f;
  --color-the-count-s-black-900: #2c343d;
  --color-the-count-s-black-950: #17202c;
}