Beet Red to Bubblegum Crisis color palette

86203FBeet Red AC498DOur Little Secret C06DB0Super Pink D2B1FEViolet Heaven E6D0FFBubblegum Crisis

About this palette

Beet Red to Bubblegum Crisis is a 5-color warm, gradient palette: #86203F (Beet Red), #AC498D (Our Little Secret), #C06DB0 (Super Pink), #D2B1FE (Violet Heaven), #E6D0FF (Bubblegum Crisis). It mixes red, pink, purple tones and feels warm overall. The strongest text pairing is #86203F on #E6D0FF with a contrast ratio of 6.47:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beet Red	rgb(134, 32, 63)	hsl(342, 61%, 33%)
Our Little Secret	rgb(172, 73, 141)	hsl(319, 40%, 48%)
Super Pink	rgb(192, 109, 176)	hsl(312, 40%, 59%)
Violet Heaven	rgb(210, 177, 254)	hsl(266, 97%, 85%)
Bubblegum Crisis	rgb(230, 208, 255)	hsl(268, 100%, 91%)

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.47:1 Good#86203F on #E6D0FF
Aa6.47:1 Good#E6D0FF on #86203F
Aa5.00:1 Good#86203F on #D2B1FE
Aa5.00:1 Good#D2B1FE on #86203F
Aa3.62:1 Poor#AC498D on #E6D0FF
Aa3.62:1 Poor#E6D0FF on #AC498D

Color blindness preview

CSS variables

/* Beet Red to Bubblegum Crisis — https://swatchly.xyz/palette/86203f-ac498d-c06db0-d2b1fe-e6d0ff */
:root {
  --beet-red: #86203f;
  --our-little-secret: #ac498d;
  --super-pink: #c06db0;
  --violet-heaven: #d2b1fe;
  --bubblegum-crisis: #e6d0ff;
}

Tailwind CSS v4

/* Beet Red to Bubblegum Crisis — https://swatchly.xyz/palette/86203f-ac498d-c06db0-d2b1fe-e6d0ff */
@theme {
  --color-beet-red: #86203f;
  --color-beet-red-50: #fff1f3;
  --color-beet-red-100: #ffe3e7;
  --color-beet-red-200: #ffc4cd;
  --color-beet-red-300: #ff9cb0;
  --color-beet-red-400: #e1778e;
  --color-beet-red-500: #c25871;
  --color-beet-red-600: #a13d56;
  --color-beet-red-700: #86203f;
  --color-beet-red-800: #681b31;
  --color-beet-red-900: #531125;
  --color-beet-red-950: #360715;
  --color-our-little-secret: #ac498d;
  --color-our-little-secret-50: #fff0f9;
  --color-our-little-secret-100: #ffe4f4;
  --color-our-little-secret-200: #ffc7e9;
  --color-our-little-secret-300: #fda4dd;
  --color-our-little-secret-400: #e380c1;
  --color-our-little-secret-500: #c863a7;
  --color-our-little-secret-600: #ac498d;
  --color-our-little-secret-700: #8e3372;
  --color-our-little-secret-800: #73225b;
  --color-our-little-secret-900: #5b1547;
  --color-our-little-secret-950: #3c092e;
  --color-super-pink: #c06db0;
  --color-super-pink-50: #fff2fc;
  --color-super-pink-100: #ffe6f9;
  --color-super-pink-200: #ffc8f2;
  --color-super-pink-300: #f4ace5;
  --color-super-pink-400: #da89c9;
  --color-super-pink-500: #c06db0;
  --color-super-pink-600: #a15192;
  --color-super-pink-700: #843a77;
  --color-super-pink-800: #6a295f;
  --color-super-pink-900: #531c4a;
  --color-super-pink-950: #350e2f;
  --color-violet-heaven: #d2b1fe;
  --color-violet-heaven-50: #f8f4ff;
  --color-violet-heaven-100: #f1e8ff;
  --color-violet-heaven-200: #e2cfff;
  --color-violet-heaven-300: #d2b1fe;
  --color-violet-heaven-400: #b192da;
  --color-violet-heaven-500: #9676be;
  --color-violet-heaven-600: #7a5ba0;
  --color-violet-heaven-700: #624684;
  --color-violet-heaven-800: #4d346b;
  --color-violet-heaven-900: #3c2655;
  --color-violet-heaven-950: #261637;
  --color-bubblegum-crisis: #e6d0ff;
  --color-bubblegum-crisis-50: #faf5ff;
  --color-bubblegum-crisis-100: #f3e9ff;
  --color-bubblegum-crisis-200: #e6d0ff;
  --color-bubblegum-crisis-300: #cdbbe1;
  --color-bubblegum-crisis-400: #ae9ac4;
  --color-bubblegum-crisis-500: #927da8;
  --color-bubblegum-crisis-600: #76638c;
  --color-bubblegum-crisis-700: #5e4d71;
  --color-bubblegum-crisis-800: #4a3a5a;
  --color-bubblegum-crisis-900: #392c47;
  --color-bubblegum-crisis-950: #241a2e;
}