Murasaki to Hyper Blue Color Palette

About this palette

Murasaki to Hyper Blue is a 5-color dark, cool palette: #502A4E (Murasaki), #2D0941 (Dark Purple), #315161 (Nocturne Blue), #160028 (Quiet Abyss), #14609C (Hyper Blue). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #160028 on #14609C with a contrast ratio of 2.99:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Murasaki	rgb(80, 42, 78)	hsl(303, 31%, 24%)
Dark Purple	rgb(45, 9, 65)	hsl(279, 76%, 15%)
Nocturne Blue	rgb(49, 81, 97)	hsl(200, 33%, 29%)
Quiet Abyss	rgb(22, 0, 40)	hsl(273, 100%, 8%)
Hyper Blue	rgb(20, 96, 156)	hsl(206, 77%, 35%)

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.

Color blindness preview

CSS variables

/* Murasaki to Hyper Blue — https://swatchly.xyz/palette/502a4e-2d0941-315161-160028-14609c */
:root {
  --murasaki: #502a4e;
  --dark-purple: #2d0941;
  --nocturne-blue: #315161;
  --quiet-abyss: #160028;
  --hyper-blue: #14609c;
}

Tailwind CSS v4

/* Murasaki to Hyper Blue — https://swatchly.xyz/palette/502a4e-2d0941-315161-160028-14609c */
@theme {
  --color-murasaki: #502a4e;
  --color-murasaki-50: #fff0fd;
  --color-murasaki-100: #fee0fb;
  --color-murasaki-200: #eecbea;
  --color-murasaki-300: #dab2d6;
  --color-murasaki-400: #be93ba;
  --color-murasaki-500: #a478a0;
  --color-murasaki-600: #896086;
  --color-murasaki-700: #724b6f;
  --color-murasaki-800: #5d3b5b;
  --color-murasaki-900: #502a4e;
  --color-murasaki-950: #321c31;
  --color-dark-purple: #2d0941;
  --color-dark-purple-50: #f9f2ff;
  --color-dark-purple-100: #f3e5ff;
  --color-dark-purple-200: #e7cafd;
  --color-dark-purple-300: #d2b2eb;
  --color-dark-purple-400: #b491cf;
  --color-dark-purple-500: #9974b3;
  --color-dark-purple-600: #7d5a96;
  --color-dark-purple-700: #65457b;
  --color-dark-purple-800: #503463;
  --color-dark-purple-900: #3e264e;
  --color-dark-purple-950: #2d0941;
  --color-nocturne-blue: #315161;
  --color-nocturne-blue-50: #eaf8ff;
  --color-nocturne-blue-100: #d9effb;
  --color-nocturne-blue-200: #c0dae9;
  --color-nocturne-blue-300: #a4c3d3;
  --color-nocturne-blue-400: #81a2b4;
  --color-nocturne-blue-500: #648596;
  --color-nocturne-blue-600: #496979;
  --color-nocturne-blue-700: #315161;
  --color-nocturne-blue-800: #273f4b;
  --color-nocturne-blue-900: #1c303b;
  --color-nocturne-blue-950: #0f1e25;
  --color-quiet-abyss: #160028;
  --color-quiet-abyss-50: #f8f2ff;
  --color-quiet-abyss-100: #f1e6ff;
  --color-quiet-abyss-200: #e1cef8;
  --color-quiet-abyss-300: #ccb6e6;
  --color-quiet-abyss-400: #ad95c9;
  --color-quiet-abyss-500: #8e75aa;
  --color-quiet-abyss-600: #6f5889;
  --color-quiet-abyss-700: #543f6a;
  --color-quiet-abyss-800: #3c2c4e;
  --color-quiet-abyss-900: #281c35;
  --color-quiet-abyss-950: #160028;
  --color-hyper-blue: #14609c;
  --color-hyper-blue-50: #eef6ff;
  --color-hyper-blue-100: #dceeff;
  --color-hyper-blue-200: #bbddff;
  --color-hyper-blue-300: #92caff;
  --color-hyper-blue-400: #6aabe9;
  --color-hyper-blue-500: #4b91d0;
  --color-hyper-blue-600: #3176b4;
  --color-hyper-blue-700: #14609c;
  --color-hyper-blue-800: #084b7d;
  --color-hyper-blue-900: #003964;
  --color-hyper-blue-950: #002442;
}