3AM Breakup to Sugarwinkle color palette

320E0E3AM Breakup 5E325ELong Passionate Night B33C5CCry of a Rose E180C7Pink Punk FFC9DDSugarwinkle

About this palette

3AM Breakup to Sugarwinkle is a 5-color warm, gradient palette: #320E0E (3AM Breakup), #5E325E (Long Passionate Night), #B33C5C (Cry of a Rose), #E180C7 (Pink Punk), #FFC9DD (Sugarwinkle). It mixes brown, purple, red, pink tones and feels warm overall. The strongest text pairing is #320E0E on #FFC9DD with a contrast ratio of 12.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
3AM Breakup	rgb(50, 14, 14)	hsl(0, 56%, 13%)
Long Passionate Night	rgb(94, 50, 94)	hsl(300, 31%, 28%)
Cry of a Rose	rgb(179, 60, 92)	hsl(344, 50%, 47%)
Pink Punk	rgb(225, 128, 199)	hsl(316, 62%, 69%)
Sugarwinkle	rgb(255, 201, 221)	hsl(338, 100%, 89%)

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.

Aa12.16:1 Super#320E0E on #FFC9DD
Aa12.16:1 Super#FFC9DD on #320E0E
Aa7.00:1 Good#5E325E on #FFC9DD
Aa7.00:1 Good#FFC9DD on #5E325E
Aa6.73:1 Good#320E0E on #E180C7
Aa6.73:1 Good#E180C7 on #320E0E
Aa3.94:1 Poor#B33C5C on #FFC9DD
Aa3.94:1 Poor#FFC9DD on #B33C5C

Color blindness preview

CSS variables

/* 3AM Breakup to Sugarwinkle — https://swatchly.xyz/palette/320e0e-5e325e-b33c5c-e180c7-ffc9dd */
:root {
  --c-3am-breakup: #320e0e;
  --long-passionate-night: #5e325e;
  --cry-of-a-rose: #b33c5c;
  --pink-punk: #e180c7;
  --sugarwinkle: #ffc9dd;
}

Tailwind CSS v4

/* 3AM Breakup to Sugarwinkle — https://swatchly.xyz/palette/320e0e-5e325e-b33c5c-e180c7-ffc9dd */
@theme {
  --color-c-3am-breakup: #320e0e;
  --color-c-3am-breakup-50: #fff2f0;
  --color-c-3am-breakup-100: #ffe4e2;
  --color-c-3am-breakup-200: #f3cdca;
  --color-c-3am-breakup-300: #e0b5b2;
  --color-c-3am-breakup-400: #c39491;
  --color-c-3am-breakup-500: #a67875;
  --color-c-3am-breakup-600: #895d5b;
  --color-c-3am-breakup-700: #6e4745;
  --color-c-3am-breakup-800: #573533;
  --color-c-3am-breakup-900: #422725;
  --color-c-3am-breakup-950: #320e0e;
  --color-long-passionate-night: #5e325e;
  --color-long-passionate-night-50: #ffeffe;
  --color-long-passionate-night-100: #ffe0fe;
  --color-long-passionate-night-200: #f0c9ef;
  --color-long-passionate-night-300: #ddb1dc;
  --color-long-passionate-night-400: #c090bf;
  --color-long-passionate-night-500: #a574a4;
  --color-long-passionate-night-600: #895b89;
  --color-long-passionate-night-700: #704670;
  --color-long-passionate-night-800: #5e325e;
  --color-long-passionate-night-900: #472847;
  --color-long-passionate-night-950: #2e172e;
  --color-cry-of-a-rose: #b33c5c;
  --color-cry-of-a-rose-50: #fff1f3;
  --color-cry-of-a-rose-100: #ffe3e7;
  --color-cry-of-a-rose-200: #ffc7d0;
  --color-cry-of-a-rose-300: #ffa3b4;
  --color-cry-of-a-rose-400: #ee7791;
  --color-cry-of-a-rose-500: #d25876;
  --color-cry-of-a-rose-600: #b33c5c;
  --color-cry-of-a-rose-700: #942847;
  --color-cry-of-a-rose-800: #781836;
  --color-cry-of-a-rose-900: #600c28;
  --color-cry-of-a-rose-950: #3f0418;
  --color-pink-punk: #e180c7;
  --color-pink-punk-50: #fff3fb;
  --color-pink-punk-100: #ffe5f7;
  --color-pink-punk-200: #ffc8ee;
  --color-pink-punk-300: #f9a6e1;
  --color-pink-punk-400: #e180c7;
  --color-pink-punk-500: #c164a9;
  --color-pink-punk-600: #a3488c;
  --color-pink-punk-700: #853272;
  --color-pink-punk-800: #6b225b;
  --color-pink-punk-900: #541647;
  --color-pink-punk-950: #360a2d;
  --color-sugarwinkle: #ffc9dd;
  --color-sugarwinkle-50: #fff4f8;
  --color-sugarwinkle-100: #ffe6ef;
  --color-sugarwinkle-200: #ffc9dd;
  --color-sugarwinkle-300: #e2b5c5;
  --color-sugarwinkle-400: #c493a6;
  --color-sugarwinkle-500: #a8778a;
  --color-sugarwinkle-600: #8b5d6f;
  --color-sugarwinkle-700: #714758;
  --color-sugarwinkle-800: #5a3644;
  --color-sugarwinkle-900: #462834;
  --color-sugarwinkle-950: #2d1720;
}