York Plum to Pink Horror color palette

About this palette

York Plum to Pink Horror is a 5-color warm, vintage palette: #D7BFE3 (York Plum), #B77E76 (Dusty Duchess), #50243F (Murasaki), #F9F1FF (Cloud Break), #8B3359 (Pink Horror). It mixes purple, red, white tones and feels warm overall. The strongest text pairing is #50243F on #F9F1FF with a contrast ratio of 11.44:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
York Plumrgb(215, 191, 227)hsl(280, 39%, 82%)
Dusty Duchessrgb(183, 126, 118)hsl(7, 31%, 59%)
Murasakirgb(80, 36, 63)hsl(323, 38%, 23%)
Cloud Breakrgb(249, 241, 255)hsl(274, 100%, 97%)
Pink Horrorrgb(139, 51, 89)hsl(334, 46%, 37%)

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.44:1 Very good#50243F on #F9F1FF
  • Aa11.44:1 Very good#F9F1FF on #50243F
  • Aa7.48:1 Very good#D7BFE3 on #50243F
  • Aa7.48:1 Very good#50243F on #D7BFE3
  • Aa7.02:1 Very good#F9F1FF on #8B3359
  • Aa7.02:1 Very good#8B3359 on #F9F1FF
  • Aa4.59:1 Good#D7BFE3 on #8B3359
  • Aa4.59:1 Good#8B3359 on #D7BFE3

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* York Plum to Pink Horror — https://swatchly.xyz/palette/d7bfe3-b77e76-50243f-f9f1ff-8b3359 */
:root {
  --york-plum: #d7bfe3;
  --dusty-duchess: #b77e76;
  --murasaki: #50243f;
  --cloud-break: #f9f1ff;
  --pink-horror: #8b3359;
}

Tailwind CSS v4

/* York Plum to Pink Horror — https://swatchly.xyz/palette/d7bfe3-b77e76-50243f-f9f1ff-8b3359 */
@theme {
  --color-york-plum: #d7bfe3;
  --color-york-plum-50: #fcf7ff;
  --color-york-plum-100: #f8ebff;
  --color-york-plum-200: #e8d7f1;
  --color-york-plum-300: #d7bfe3;
  --color-york-plum-400: #b59fc0;
  --color-york-plum-500: #9882a3;
  --color-york-plum-600: #7c6686;
  --color-york-plum-700: #634f6c;
  --color-york-plum-800: #4d3c55;
  --color-york-plum-900: #3b2c42;
  --color-york-plum-950: #251b2a;
  --color-dusty-duchess: #b77e76;
  --color-dusty-duchess-50: #fff4f2;
  --color-dusty-duchess-100: #ffe8e5;
  --color-dusty-duchess-200: #fdd0c9;
  --color-dusty-duchess-300: #ecb9b1;
  --color-dusty-duchess-400: #d19991;
  --color-dusty-duchess-500: #b77e76;
  --color-dusty-duchess-600: #98625b;
  --color-dusty-duchess-700: #7d4b45;
  --color-dusty-duchess-800: #643933;
  --color-dusty-duchess-900: #4e2a25;
  --color-dusty-duchess-950: #321815;
  --color-murasaki: #50243f;
  --color-murasaki-50: #fff0f8;
  --color-murasaki-100: #ffe2f1;
  --color-murasaki-200: #f4c9e0;
  --color-murasaki-300: #e0b1cb;
  --color-murasaki-400: #c390ad;
  --color-murasaki-500: #a87592;
  --color-murasaki-600: #8c5c78;
  --color-murasaki-700: #734761;
  --color-murasaki-800: #5d364d;
  --color-murasaki-900: #50243f;
  --color-murasaki-950: #301827;
  --color-cloud-break: #f9f1ff;
  --color-cloud-break-50: #f9f1ff;
  --color-cloud-break-100: #ede8f1;
  --color-cloud-break-200: #dad4df;
  --color-cloud-break-300: #c4bec9;
  --color-cloud-break-400: #a59eab;
  --color-cloud-break-500: #8a838f;
  --color-cloud-break-600: #706975;
  --color-cloud-break-700: #59525d;
  --color-cloud-break-800: #454049;
  --color-cloud-break-900: #353139;
  --color-cloud-break-950: #211e23;
  --color-pink-horror: #8b3359;
  --color-pink-horror-50: #fff1f5;
  --color-pink-horror-100: #ffe2ec;
  --color-pink-horror-200: #ffc5d9;
  --color-pink-horror-300: #faa4c3;
  --color-pink-horror-400: #de81a4;
  --color-pink-horror-500: #c26589;
  --color-pink-horror-600: #a44b6f;
  --color-pink-horror-700: #8b3359;
  --color-pink-horror-800: #6e2645;
  --color-pink-horror-900: #571a35;
  --color-pink-horror-950: #390d21;
}

Similar palettes