What’s Left to Murasaki Color Palette

About this palette

What’s Left to Murasaki is a 5-color cool palette: #FFF5EA (What’s Left), #53C3FF (Blue Mana), #BC7100 (Caramel Coating), #006535 (Bucolic), #502851 (Murasaki). It mixes white, blue, orange, green, purple tones and feels cool overall. The strongest text pairing is #FFF5EA on #502851 with a contrast ratio of 11.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
What’s Left	rgb(255, 245, 234)	hsl(31, 100%, 96%)
Blue Mana	rgb(83, 195, 255)	hsl(201, 100%, 66%)
Caramel Coating	rgb(188, 113, 0)	hsl(36, 100%, 37%)
Bucolic	rgb(0, 101, 53)	hsl(151, 100%, 20%)
Murasaki	rgb(80, 40, 81)	hsl(299, 34%, 24%)

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.

Aa11.06:1 Very good#FFF5EA on #502851
Aa11.06:1 Very good#502851 on #FFF5EA
Aa6.69:1 Good#FFF5EA on #006535
Aa6.69:1 Good#006535 on #FFF5EA
Aa6.02:1 Good#53C3FF on #502851
Aa6.02:1 Good#502851 on #53C3FF
Aa3.65:1 Poor#53C3FF on #006535
Aa3.65:1 Poor#006535 on #53C3FF

Color blindness preview

CSS variables

/* What’s Left to Murasaki — https://swatchly.xyz/palette/fff5ea-53c3ff-bc7100-006535-502851 */
:root {
  --what-s-left: #fff5ea;
  --blue-mana: #53c3ff;
  --caramel-coating: #bc7100;
  --bucolic: #006535;
  --murasaki: #502851;
}

Tailwind CSS v4

/* What’s Left to Murasaki — https://swatchly.xyz/palette/fff5ea-53c3ff-bc7100-006535-502851 */
@theme {
  --color-what-s-left: #fff5ea;
  --color-what-s-left-50: #fff5ea;
  --color-what-s-left-100: #f1ebe5;
  --color-what-s-left-200: #ded7cf;
  --color-what-s-left-300: #c8c0b7;
  --color-what-s-left-400: #a9a097;
  --color-what-s-left-500: #8e857b;
  --color-what-s-left-600: #736a61;
  --color-what-s-left-700: #5b544b;
  --color-what-s-left-800: #48413a;
  --color-what-s-left-900: #37322c;
  --color-what-s-left-950: #221e1a;
  --color-blue-mana: #53c3ff;
  --color-blue-mana-50: #e0f3ff;
  --color-blue-mana-100: #c8eaff;
  --color-blue-mana-200: #98d8ff;
  --color-blue-mana-300: #53c3ff;
  --color-blue-mana-400: #33a4dd;
  --color-blue-mana-500: #008ac1;
  --color-blue-mana-600: #00709d;
  --color-blue-mana-700: #00597f;
  --color-blue-mana-800: #004765;
  --color-blue-mana-900: #003751;
  --color-blue-mana-950: #002234;
  --color-caramel-coating: #bc7100;
  --color-caramel-coating-50: #fff3e7;
  --color-caramel-coating-100: #ffe6ce;
  --color-caramel-coating-200: #ffcc9a;
  --color-caramel-coating-300: #f4b06a;
  --color-caramel-coating-400: #d88e3a;
  --color-caramel-coating-500: #bc7100;
  --color-caramel-coating-600: #985a00;
  --color-caramel-coating-700: #794700;
  --color-caramel-coating-800: #603700;
  --color-caramel-coating-900: #4b2a00;
  --color-caramel-coating-950: #301900;
  --color-bucolic: #006535;
  --color-bucolic-50: #deffe7;
  --color-bucolic-100: #c8fad6;
  --color-bucolic-200: #ace8be;
  --color-bucolic-300: #8ed3a4;
  --color-bucolic-400: #67b481;
  --color-bucolic-500: #479965;
  --color-bucolic-600: #2a7d4c;
  --color-bucolic-700: #006535;
  --color-bucolic-800: #024f29;
  --color-bucolic-900: #003d1e;
  --color-bucolic-950: #002710;
  --color-murasaki: #502851;
  --color-murasaki-50: #ffefff;
  --color-murasaki-100: #ffe0fe;
  --color-murasaki-200: #eecaee;
  --color-murasaki-300: #dab1da;
  --color-murasaki-400: #be91be;
  --color-murasaki-500: #a477a4;
  --color-murasaki-600: #895e8a;
  --color-murasaki-700: #724a72;
  --color-murasaki-800: #5d395e;
  --color-murasaki-900: #502851;
  --color-murasaki-950: #321b32;
}