Shadow Purple to Pink Porky Color Palette

About this palette

Shadow Purple to Pink Porky is a 5-color vintage palette: #5A3045 (Shadow Purple), #220F25 (Shot in the Dark), #8C63A0 (Crown Jewels), #FFE8F5 (Fairy Dust), #EB958F (Pink Porky). It mixes red, purple, white tones and feels balanced overall. The strongest text pairing is #220F25 on #FFE8F5 with a contrast ratio of 15.57:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadow Purple	rgb(90, 48, 69)	hsl(330, 30%, 27%)
Shot in the Dark	rgb(34, 15, 37)	hsl(292, 42%, 10%)
Crown Jewels	rgb(140, 99, 160)	hsl(280, 24%, 51%)
Fairy Dust	rgb(255, 232, 245)	hsl(326, 100%, 95%)
Pink Porky	rgb(235, 149, 143)	hsl(4, 70%, 74%)

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.

Aa15.57:1 Super#220F25 on #FFE8F5
Aa15.57:1 Super#FFE8F5 on #220F25
Aa9.32:1 Very good#5A3045 on #FFE8F5
Aa9.32:1 Very good#FFE8F5 on #5A3045
Aa7.93:1 Very good#220F25 on #EB958F
Aa7.93:1 Very good#EB958F on #220F25
Aa4.75:1 Good#5A3045 on #EB958F
Aa4.75:1 Good#EB958F on #5A3045

Color blindness preview

CSS variables

/* Shadow Purple to Pink Porky — https://swatchly.xyz/palette/5a3045-220f25-8c63a0-ffe8f5-eb958f */
:root {
  --shadow-purple: #5a3045;
  --shot-in-the-dark: #220f25;
  --crown-jewels: #8c63a0;
  --fairy-dust: #ffe8f5;
  --pink-porky: #eb958f;
}

Tailwind CSS v4

/* Shadow Purple to Pink Porky — https://swatchly.xyz/palette/5a3045-220f25-8c63a0-ffe8f5-eb958f */
@theme {
  --color-shadow-purple: #5a3045;
  --color-shadow-purple-50: #fff1f7;
  --color-shadow-purple-100: #ffe2ef;
  --color-shadow-purple-200: #f2cbdc;
  --color-shadow-purple-300: #deb2c6;
  --color-shadow-purple-400: #c090a6;
  --color-shadow-purple-500: #a4748b;
  --color-shadow-purple-600: #875a70;
  --color-shadow-purple-700: #6d4558;
  --color-shadow-purple-800: #5a3045;
  --color-shadow-purple-900: #432634;
  --color-shadow-purple-950: #2b1620;
  --color-shot-in-the-dark: #220f25;
  --color-shot-in-the-dark-50: #fdf0ff;
  --color-shot-in-the-dark-100: #f5e5f8;
  --color-shot-in-the-dark-200: #e3d0e6;
  --color-shot-in-the-dark-300: #ceb8d2;
  --color-shot-in-the-dark-400: #b098b4;
  --color-shot-in-the-dark-500: #937b97;
  --color-shot-in-the-dark-600: #76607a;
  --color-shot-in-the-dark-700: #5d4960;
  --color-shot-in-the-dark-800: #473649;
  --color-shot-in-the-dark-900: #342636;
  --color-shot-in-the-dark-950: #220f25;
  --color-crown-jewels: #8c63a0;
  --color-crown-jewels-50: #faf1ff;
  --color-crown-jewels-100: #f6e6ff;
  --color-crown-jewels-200: #edcefe;
  --color-crown-jewels-300: #dbb7ee;
  --color-crown-jewels-400: #bf97d3;
  --color-crown-jewels-500: #a67cba;
  --color-crown-jewels-600: #8c63a0;
  --color-crown-jewels-700: #714c84;
  --color-crown-jewels-800: #5a396a;
  --color-crown-jewels-900: #462954;
  --color-crown-jewels-950: #2d1836;
  --color-fairy-dust: #ffe8f5;
  --color-fairy-dust-50: #fff6fb;
  --color-fairy-dust-100: #ffe8f5;
  --color-fairy-dust-200: #e6d6df;
  --color-fairy-dust-300: #d0bec8;
  --color-fairy-dust-400: #b19da8;
  --color-fairy-dust-500: #95818c;
  --color-fairy-dust-600: #796671;
  --color-fairy-dust-700: #614f59;
  --color-fairy-dust-800: #4c3d46;
  --color-fairy-dust-900: #3b2e36;
  --color-fairy-dust-950: #251c21;
  --color-pink-porky: #eb958f;
  --color-pink-porky-50: #fff8f8;
  --color-pink-porky-100: #ffeeed;
  --color-pink-porky-200: #ffd6d3;
  --color-pink-porky-300: #ffb9b3;
  --color-pink-porky-400: #eb958f;
  --color-pink-porky-500: #c97772;
  --color-pink-porky-600: #a95a56;
  --color-pink-porky-700: #8b433f;
  --color-pink-porky-800: #6f302e;
  --color-pink-porky-900: #562220;
  --color-pink-porky-950: #371211;
}