Murasaki to Blushing Sky Color Palette

About this palette

Murasaki to Blushing Sky is a 5-color cool, vintage palette: #582753 (Murasaki), #854E1B (Milk Chocolate), #5A8C69 (Clouded Pine), #559DDE (Blue Bay), #DDB5DC (Blushing Sky). It mixes purple, brown, green, blue, pink tones and feels cool overall. The strongest text pairing is #582753 on #DDB5DC with a contrast ratio of 6.40:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Murasaki	rgb(88, 39, 83)	hsl(306, 39%, 25%)
Milk Chocolate	rgb(133, 78, 27)	hsl(29, 66%, 31%)
Clouded Pine	rgb(90, 140, 105)	hsl(138, 22%, 45%)
Blue Bay	rgb(85, 157, 222)	hsl(208, 67%, 60%)
Blushing Sky	rgb(221, 181, 220)	hsl(302, 37%, 79%)

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.40:1 Good#582753 on #DDB5DC
Aa6.40:1 Good#DDB5DC on #582753
Aa3.97:1 Poor#582753 on #559DDE
Aa3.97:1 Poor#559DDE on #582753
Aa3.78:1 Poor#854E1B on #DDB5DC
Aa3.78:1 Poor#DDB5DC on #854E1B

Color blindness preview

CSS variables

/* Murasaki to Blushing Sky — https://swatchly.xyz/palette/582753-854e1b-5a8c69-559dde-ddb5dc */
:root {
  --murasaki: #582753;
  --milk-chocolate: #854e1b;
  --clouded-pine: #5a8c69;
  --blue-bay: #559dde;
  --blushing-sky: #ddb5dc;
}

Tailwind CSS v4

/* Murasaki to Blushing Sky — https://swatchly.xyz/palette/582753-854e1b-5a8c69-559dde-ddb5dc */
@theme {
  --color-murasaki: #582753;
  --color-murasaki-50: #fff0fc;
  --color-murasaki-100: #ffe0fa;
  --color-murasaki-200: #f4c7ed;
  --color-murasaki-300: #dfadd8;
  --color-murasaki-400: #c18ab9;
  --color-murasaki-500: #a46d9d;
  --color-murasaki-600: #865380;
  --color-murasaki-700: #6b3d66;
  --color-murasaki-800: #582753;
  --color-murasaki-900: #41203d;
  --color-murasaki-950: #291227;
  --color-milk-chocolate: #854e1b;
  --color-milk-chocolate-50: #fff3e9;
  --color-milk-chocolate-100: #ffe6d3;
  --color-milk-chocolate-200: #fdceaa;
  --color-milk-chocolate-300: #ecb88f;
  --color-milk-chocolate-400: #d2986a;
  --color-milk-chocolate-500: #b87d4d;
  --color-milk-chocolate-600: #9c6433;
  --color-milk-chocolate-700: #854e1b;
  --color-milk-chocolate-800: #6a3c10;
  --color-milk-chocolate-900: #542c05;
  --color-milk-chocolate-950: #371a01;
  --color-clouded-pine: #5a8c69;
  --color-clouded-pine-50: #dffde7;
  --color-clouded-pine-100: #d1f2d9;
  --color-clouded-pine-200: #b7dfc2;
  --color-clouded-pine-300: #9bc9a7;
  --color-clouded-pine-400: #77a985;
  --color-clouded-pine-500: #5a8c69;
  --color-clouded-pine-600: #427251;
  --color-clouded-pine-700: #305c3e;
  --color-clouded-pine-800: #22492f;
  --color-clouded-pine-900: #183923;
  --color-clouded-pine-950: #0c2414;
  --color-blue-bay: #559dde;
  --color-blue-bay-50: #e7f3ff;
  --color-blue-bay-100: #d2e9ff;
  --color-blue-bay-200: #aad5ff;
  --color-blue-bay-300: #7fbefa;
  --color-blue-bay-400: #559dde;
  --color-blue-bay-500: #3a83c2;
  --color-blue-bay-600: #2169a5;
  --color-blue-bay-700: #0c5489;
  --color-blue-bay-800: #004271;
  --color-blue-bay-900: #00335a;
  --color-blue-bay-950: #00213c;
  --color-blushing-sky: #ddb5dc;
  --color-blushing-sky-50: #fff2fe;
  --color-blushing-sky-100: #fde4fc;
  --color-blushing-sky-200: #edcfec;
  --color-blushing-sky-300: #ddb5dc;
  --color-blushing-sky-400: #bb96ba;
  --color-blushing-sky-500: #9f7a9e;
  --color-blushing-sky-600: #835f82;
  --color-blushing-sky-700: #694969;
  --color-blushing-sky-800: #533753;
  --color-blushing-sky-900: #412940;
  --color-blushing-sky-950: #291829;
}