Beefy Pink to Hot Chocolate color palette

D9BCF8Beefy Pink BD99D3Turnip Crown B8739EPinky Pickle 6D4D6EHibernation 623845Hot Chocolate

About this palette

Beefy Pink to Hot Chocolate is a 5-color cool, vintage palette: #D9BCF8 (Beefy Pink), #BD99D3 (Turnip Crown), #B8739E (Pinky Pickle), #6D4D6E (Hibernation), #623845 (Hot Chocolate). It mixes purple, pink, red tones and feels cool overall. The strongest text pairing is #D9BCF8 on #623845 with a contrast ratio of 5.76:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beefy Pink	rgb(217, 188, 248)	hsl(269, 81%, 85%)
Turnip Crown	rgb(189, 153, 211)	hsl(277, 40%, 71%)
Pinky Pickle	rgb(184, 115, 158)	hsl(323, 33%, 59%)
Hibernation	rgb(109, 77, 110)	hsl(298, 18%, 37%)
Hot Chocolate	rgb(98, 56, 69)	hsl(341, 27%, 30%)

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.

Aa5.76:1 Good#D9BCF8 on #623845
Aa5.76:1 Good#623845 on #D9BCF8
Aa4.26:1 Poor#D9BCF8 on #6D4D6E
Aa4.26:1 Poor#6D4D6E on #D9BCF8
Aa3.99:1 Poor#BD99D3 on #623845
Aa3.99:1 Poor#623845 on #BD99D3

Color blindness preview

CSS variables

/* Beefy Pink to Hot Chocolate — https://swatchly.xyz/palette/d9bcf8-bd99d3-b8739e-6d4d6e-623845 */
:root {
  --beefy-pink: #d9bcf8;
  --turnip-crown: #bd99d3;
  --pinky-pickle: #b8739e;
  --hibernation: #6d4d6e;
  --hot-chocolate: #623845;
}

Tailwind CSS v4

/* Beefy Pink to Hot Chocolate — https://swatchly.xyz/palette/d9bcf8-bd99d3-b8739e-6d4d6e-623845 */
@theme {
  --color-beefy-pink: #d9bcf8;
  --color-beefy-pink-50: #fcf9ff;
  --color-beefy-pink-100: #f6eeff;
  --color-beefy-pink-200: #e9d6ff;
  --color-beefy-pink-300: #d9bcf8;
  --color-beefy-pink-400: #b69cd2;
  --color-beefy-pink-500: #9a7eb6;
  --color-beefy-pink-600: #7d6298;
  --color-beefy-pink-700: #644b7c;
  --color-beefy-pink-800: #4e3863;
  --color-beefy-pink-900: #3b294d;
  --color-beefy-pink-950: #251832;
  --color-turnip-crown: #bd99d3;
  --color-turnip-crown-50: #fbf5ff;
  --color-turnip-crown-100: #f7eaff;
  --color-turnip-crown-200: #ecd1fc;
  --color-turnip-crown-300: #d8baeb;
  --color-turnip-crown-400: #bd99d3;
  --color-turnip-crown-500: #9f7cb4;
  --color-turnip-crown-600: #836197;
  --color-turnip-crown-700: #694a7b;
  --color-turnip-crown-800: #533862;
  --color-turnip-crown-900: #40294d;
  --color-turnip-crown-950: #281731;
  --color-pinky-pickle: #b8739e;
  --color-pinky-pickle-50: #fff2f9;
  --color-pinky-pickle-100: #ffe5f4;
  --color-pinky-pickle-200: #ffc8e9;
  --color-pinky-pickle-300: #eeb0d5;
  --color-pinky-pickle-400: #d28fb8;
  --color-pinky-pickle-500: #b8739e;
  --color-pinky-pickle-600: #9a5881;
  --color-pinky-pickle-700: #7e4268;
  --color-pinky-pickle-800: #653052;
  --color-pinky-pickle-900: #4f233f;
  --color-pinky-pickle-950: #331328;
  --color-hibernation: #6d4d6e;
  --color-hibernation-50: #ffefff;
  --color-hibernation-100: #fae2fa;
  --color-hibernation-200: #eaceea;
  --color-hibernation-300: #d6b7d7;
  --color-hibernation-400: #b997ba;
  --color-hibernation-500: #9e7c9f;
  --color-hibernation-600: #846385;
  --color-hibernation-700: #6d4d6e;
  --color-hibernation-800: #563b57;
  --color-hibernation-900: #432d44;
  --color-hibernation-950: #2b1b2b;
  --color-hot-chocolate: #623845;
  --color-hot-chocolate-50: #fff1f4;
  --color-hot-chocolate-100: #ffe3ea;
  --color-hot-chocolate-200: #f3ccd6;
  --color-hot-chocolate-300: #e0b4c0;
  --color-hot-chocolate-400: #c394a1;
  --color-hot-chocolate-500: #a97987;
  --color-hot-chocolate-600: #8d606d;
  --color-hot-chocolate-700: #744b57;
  --color-hot-chocolate-800: #623845;
  --color-hot-chocolate-900: #4b2c35;
  --color-hot-chocolate-950: #301a21;
}