Beefy Pink to Midnight Pie Color Palette

About this palette

Beefy Pink to Midnight Pie is a 5-color cool, monochromatic, gradient palette: #D8BBF7 (Beefy Pink), #B395D6 (Violet Velvet), #7B6790 (Nymph’s Delight), #624F73 (Your Majesty), #3C294E (Midnight Pie). It mixes purple tones and feels cool overall. The strongest text pairing is #D8BBF7 on #3C294E with a contrast ratio of 7.64:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beefy Pink	rgb(216, 187, 247)	hsl(269, 79%, 85%)
Violet Velvet	rgb(179, 149, 214)	hsl(268, 44%, 71%)
Nymph’s Delight	rgb(123, 103, 144)	hsl(269, 17%, 48%)
Your Majesty	rgb(98, 79, 115)	hsl(272, 19%, 38%)
Midnight Pie	rgb(60, 41, 78)	hsl(271, 31%, 23%)

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.

Aa7.64:1 Very good#D8BBF7 on #3C294E
Aa7.64:1 Very good#3C294E on #D8BBF7
Aa5.06:1 Good#B395D6 on #3C294E
Aa5.06:1 Good#3C294E on #B395D6
Aa4.29:1 Poor#D8BBF7 on #624F73
Aa4.29:1 Poor#624F73 on #D8BBF7

Color blindness preview

CSS variables

/* Beefy Pink to Midnight Pie — https://swatchly.xyz/palette/d8bbf7-b395d6-7b6790-624f73-3c294e */
:root {
  --beefy-pink: #d8bbf7;
  --violet-velvet: #b395d6;
  --nymph-s-delight: #7b6790;
  --your-majesty: #624f73;
  --midnight-pie: #3c294e;
}

Tailwind CSS v4

/* Beefy Pink to Midnight Pie — https://swatchly.xyz/palette/d8bbf7-b395d6-7b6790-624f73-3c294e */
@theme {
  --color-beefy-pink: #d8bbf7;
  --color-beefy-pink-50: #fbf8ff;
  --color-beefy-pink-100: #f5edff;
  --color-beefy-pink-200: #e9d5ff;
  --color-beefy-pink-300: #d8bbf7;
  --color-beefy-pink-400: #b69bd2;
  --color-beefy-pink-500: #997db5;
  --color-beefy-pink-600: #7d6297;
  --color-beefy-pink-700: #634b7c;
  --color-beefy-pink-800: #4e3863;
  --color-beefy-pink-900: #3b294d;
  --color-beefy-pink-950: #251832;
  --color-violet-velvet: #b395d6;
  --color-violet-velvet-50: #f9f4ff;
  --color-violet-velvet-100: #f2e8ff;
  --color-violet-velvet-200: #e4cfff;
  --color-violet-velvet-300: #d0b7ef;
  --color-violet-velvet-400: #b395d6;
  --color-violet-velvet-500: #9779b8;
  --color-violet-velvet-600: #7b5f9b;
  --color-violet-velvet-700: #63497f;
  --color-violet-velvet-800: #4e3766;
  --color-violet-velvet-900: #3c2851;
  --color-violet-velvet-950: #261734;
  --color-nymph-s-delight: #7b6790;
  --color-nymph-s-delight-50: #f8f2ff;
  --color-nymph-s-delight-100: #f2e7ff;
  --color-nymph-s-delight-200: #e2d2f3;
  --color-nymph-s-delight-300: #cdbbe1;
  --color-nymph-s-delight-400: #af9bc5;
  --color-nymph-s-delight-500: #9581ab;
  --color-nymph-s-delight-600: #7b6790;
  --color-nymph-s-delight-700: #625075;
  --color-nymph-s-delight-800: #4d3d5e;
  --color-nymph-s-delight-900: #3c2e4a;
  --color-nymph-s-delight-950: #251c2f;
  --color-your-majesty: #624f73;
  --color-your-majesty-50: #f9f2ff;
  --color-your-majesty-100: #f2e5ff;
  --color-your-majesty-200: #e0d1f0;
  --color-your-majesty-300: #ccbadd;
  --color-your-majesty-400: #ae9ac0;
  --color-your-majesty-500: #937fa5;
  --color-your-majesty-600: #78658a;
  --color-your-majesty-700: #624f73;
  --color-your-majesty-800: #4d3d5b;
  --color-your-majesty-900: #3b2e47;
  --color-your-majesty-950: #251c2e;
  --color-midnight-pie: #3c294e;
  --color-midnight-pie-50: #f8f2ff;
  --color-midnight-pie-100: #f1e5ff;
  --color-midnight-pie-200: #e0cff2;
  --color-midnight-pie-300: #cab8df;
  --color-midnight-pie-400: #ac97c2;
  --color-midnight-pie-500: #917ca7;
  --color-midnight-pie-600: #76628b;
  --color-midnight-pie-700: #5e4c71;
  --color-midnight-pie-800: #4a3a5b;
  --color-midnight-pie-900: #3c294e;
  --color-midnight-pie-950: #241a2e;
}