Queer Blue to Murasaki Color Palette

About this palette

Queer Blue to Murasaki is a 5-color cool palette: #8DA7DF (Queer Blue), #CED9AA (Zombie), #5E688F (Haunt Mist), #8A8D61 (Paid in Full), #492A47 (Murasaki). It mixes blue, green, yellow, purple tones and feels cool overall. The strongest text pairing is #CED9AA on #492A47 with a contrast ratio of 8.29:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queer Blue	rgb(141, 167, 223)	hsl(221, 56%, 71%)
Zombie	rgb(206, 217, 170)	hsl(74, 38%, 76%)
Haunt Mist	rgb(94, 104, 143)	hsl(228, 21%, 46%)
Paid in Full	rgb(138, 141, 97)	hsl(64, 18%, 47%)
Murasaki	rgb(73, 42, 71)	hsl(304, 27%, 23%)

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.

Aa8.29:1 Very good#CED9AA on #492A47
Aa8.29:1 Very good#492A47 on #CED9AA
Aa5.12:1 Good#8DA7DF on #492A47
Aa5.12:1 Good#492A47 on #8DA7DF
Aa3.67:1 Poor#CED9AA on #5E688F
Aa3.67:1 Poor#5E688F on #CED9AA
Aa3.56:1 Poor#8A8D61 on #492A47
Aa3.56:1 Poor#492A47 on #8A8D61

Color blindness preview

CSS variables

/* Queer Blue to Murasaki — https://swatchly.xyz/palette/8da7df-ced9aa-5e688f-8a8d61-492a47 */
:root {
  --queer-blue: #8da7df;
  --zombie: #ced9aa;
  --haunt-mist: #5e688f;
  --paid-in-full: #8a8d61;
  --murasaki: #492a47;
}

Tailwind CSS v4

/* Queer Blue to Murasaki — https://swatchly.xyz/palette/8da7df-ced9aa-5e688f-8a8d61-492a47 */
@theme {
  --color-queer-blue: #8da7df;
  --color-queer-blue-50: #f4f7ff;
  --color-queer-blue-100: #e7efff;
  --color-queer-blue-200: #cbdcff;
  --color-queer-blue-300: #afc6f6;
  --color-queer-blue-400: #8da7df;
  --color-queer-blue-500: #718ac0;
  --color-queer-blue-600: #576ea2;
  --color-queer-blue-700: #425786;
  --color-queer-blue-800: #31436c;
  --color-queer-blue-900: #233255;
  --color-queer-blue-950: #141e37;
  --color-zombie: #ced9aa;
  --color-zombie-50: #eff6db;
  --color-zombie-100: #e4ebcd;
  --color-zombie-200: #ced9aa;
  --color-zombie-300: #b9c29a;
  --color-zombie-400: #9aa479;
  --color-zombie-500: #808a5e;
  --color-zombie-600: #677046;
  --color-zombie-700: #515933;
  --color-zombie-800: #3f4624;
  --color-zombie-900: #303619;
  --color-zombie-950: #1e220d;
  --color-haunt-mist: #5e688f;
  --color-haunt-mist-50: #f2f5ff;
  --color-haunt-mist-100: #e4eaff;
  --color-haunt-mist-200: #ccd6f7;
  --color-haunt-mist-300: #b4bee4;
  --color-haunt-mist-400: #949ec7;
  --color-haunt-mist-500: #7883ab;
  --color-haunt-mist-600: #5e688f;
  --color-haunt-mist-700: #495274;
  --color-haunt-mist-800: #383f5d;
  --color-haunt-mist-900: #2a304a;
  --color-haunt-mist-950: #191e30;
  --color-paid-in-full: #8a8d61;
  --color-paid-in-full-50: #f6f8df;
  --color-paid-in-full-100: #edefd2;
  --color-paid-in-full-200: #dadcba;
  --color-paid-in-full-300: #c4c7a0;
  --color-paid-in-full-400: #a5a87d;
  --color-paid-in-full-500: #8a8d61;
  --color-paid-in-full-600: #6f7247;
  --color-paid-in-full-700: #585a33;
  --color-paid-in-full-800: #454624;
  --color-paid-in-full-900: #343619;
  --color-paid-in-full-950: #20210c;
  --color-murasaki: #492a47;
  --color-murasaki-50: #fff0fd;
  --color-murasaki-100: #fbe2f8;
  --color-murasaki-200: #eacde7;
  --color-murasaki-300: #d6b5d3;
  --color-murasaki-400: #b995b5;
  --color-murasaki-500: #9e7a9b;
  --color-murasaki-600: #836180;
  --color-murasaki-700: #6b4c69;
  --color-murasaki-800: #573b54;
  --color-murasaki-900: #492a47;
  --color-murasaki-950: #2d1b2b;
}