Queer Blue to Viridian Color Palette

About this palette

Queer Blue to Viridian is a 5-color warm, vintage palette: #95AEE5 (Queer Blue), #85516D (Plum Highness), #5A2945 (Murasaki), #E1C090 (Halo), #18916F (Viridian). It mixes blue, red, yellow, turquoise tones and feels warm overall. The strongest text pairing is #5A2945 on #E1C090 with a contrast ratio of 6.61:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Queer Blue	rgb(149, 174, 229)	hsl(221, 61%, 74%)
Plum Highness	rgb(133, 81, 109)	hsl(328, 24%, 42%)
Murasaki	rgb(90, 41, 69)	hsl(326, 37%, 26%)
Halo	rgb(225, 192, 144)	hsl(36, 57%, 72%)
Viridian	rgb(24, 145, 111)	hsl(163, 72%, 33%)

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.61:1 Good#5A2945 on #E1C090
Aa6.61:1 Good#E1C090 on #5A2945
Aa5.15:1 Good#95AEE5 on #5A2945
Aa5.15:1 Good#5A2945 on #95AEE5
Aa3.58:1 Poor#85516D on #E1C090
Aa3.58:1 Poor#E1C090 on #85516D

Color blindness preview

CSS variables

/* Queer Blue to Viridian — https://swatchly.xyz/palette/95aee5-85516d-5a2945-e1c090-18916f */
:root {
  --queer-blue: #95aee5;
  --plum-highness: #85516d;
  --murasaki: #5a2945;
  --halo: #e1c090;
  --viridian: #18916f;
}

Tailwind CSS v4

/* Queer Blue to Viridian — https://swatchly.xyz/palette/95aee5-85516d-5a2945-e1c090-18916f */
@theme {
  --color-queer-blue: #95aee5;
  --color-queer-blue-50: #f7faff;
  --color-queer-blue-100: #ecf2ff;
  --color-queer-blue-200: #d3e1ff;
  --color-queer-blue-300: #b7ccf9;
  --color-queer-blue-400: #95aee5;
  --color-queer-blue-500: #7890c5;
  --color-queer-blue-600: #5c73a6;
  --color-queer-blue-700: #455a88;
  --color-queer-blue-800: #33456d;
  --color-queer-blue-900: #253355;
  --color-queer-blue-950: #141e36;
  --color-plum-highness: #85516d;
  --color-plum-highness-50: #fff1f7;
  --color-plum-highness-100: #ffe0ef;
  --color-plum-highness-200: #f3c5dc;
  --color-plum-highness-300: #dfabc5;
  --color-plum-highness-400: #c089a5;
  --color-plum-highness-500: #a26c89;
  --color-plum-highness-600: #85516d;
  --color-plum-highness-700: #6b3e57;
  --color-plum-highness-800: #562f44;
  --color-plum-highness-900: #442335;
  --color-plum-highness-950: #2c1421;
  --color-murasaki: #5a2945;
  --color-murasaki-50: #fff0f7;
  --color-murasaki-100: #ffe2f0;
  --color-murasaki-200: #f6c8df;
  --color-murasaki-300: #e2aec9;
  --color-murasaki-400: #c48ca9;
  --color-murasaki-500: #a76f8d;
  --color-murasaki-600: #895471;
  --color-murasaki-700: #6d3f58;
  --color-murasaki-800: #5a2945;
  --color-murasaki-900: #432234;
  --color-murasaki-950: #2a1320;
  --color-halo: #e1c090;
  --color-halo-50: #fff6ea;
  --color-halo-100: #ffebd0;
  --color-halo-200: #f0d8b5;
  --color-halo-300: #e1c090;
  --color-halo-400: #bea074;
  --color-halo-500: #a28355;
  --color-halo-600: #86683b;
  --color-halo-700: #6c5127;
  --color-halo-800: #563e19;
  --color-halo-900: #422f0f;
  --color-halo-950: #2a1c06;
  --color-viridian: #18916f;
  --color-viridian-50: #d3ffed;
  --color-viridian-100: #b8f8de;
  --color-viridian-200: #98e5c7;
  --color-viridian-300: #74cead;
  --color-viridian-400: #46ae8c;
  --color-viridian-500: #18916f;
  --color-viridian-600: #007658;
  --color-viridian-700: #005e46;
  --color-viridian-800: #004a36;
  --color-viridian-900: #003a2a;
  --color-viridian-950: #002519;
}