Melodramatic Magenta to Pastel Magenta Color Palette

About this palette

Melodramatic Magenta to Pastel Magenta is a 4-color vibrant, warm, neon palette: #E1219E (Melodramatic Magenta), #C00785 (Vibrant Velvet), #D474FF (Venus Slipper Orchid), #FF94CA (Pastel Magenta). It mixes pink, red, purple tones and feels warm overall. The strongest text pairing is #C00785 on #FF94CA with a contrast ratio of 2.86:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Melodramatic Magenta	rgb(225, 33, 158)	hsl(321, 76%, 51%)
Vibrant Velvet	rgb(192, 7, 133)	hsl(319, 93%, 39%)
Venus Slipper Orchid	rgb(212, 116, 255)	hsl(281, 100%, 73%)
Pastel Magenta	rgb(255, 148, 202)	hsl(330, 100%, 79%)

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.

Color blindness preview

CSS variables

/* Melodramatic Magenta to Pastel Magenta — https://swatchly.xyz/palette/e1219e-c00785-d474ff-ff94ca */
:root {
  --melodramatic-magenta: #e1219e;
  --vibrant-velvet: #c00785;
  --venus-slipper-orchid: #d474ff;
  --pastel-magenta: #ff94ca;
}

Tailwind CSS v4

/* Melodramatic Magenta to Pastel Magenta — https://swatchly.xyz/palette/e1219e-c00785-d474ff-ff94ca */
@theme {
  --color-melodramatic-magenta: #e1219e;
  --color-melodramatic-magenta-50: #fff0f7;
  --color-melodramatic-magenta-100: #ffe1ef;
  --color-melodramatic-magenta-200: #ffc1e0;
  --color-melodramatic-magenta-300: #ff9acf;
  --color-melodramatic-magenta-400: #ff50ba;
  --color-melodramatic-magenta-500: #e1219e;
  --color-melodramatic-magenta-600: #bb0081;
  --color-melodramatic-magenta-700: #960066;
  --color-melodramatic-magenta-800: #770050;
  --color-melodramatic-magenta-900: #5d003e;
  --color-melodramatic-magenta-950: #3d0027;
  --color-vibrant-velvet: #c00785;
  --color-vibrant-velvet-50: #fff1f7;
  --color-vibrant-velvet-100: #ffe2f0;
  --color-vibrant-velvet-200: #ffc5e1;
  --color-vibrant-velvet-300: #ff9fd1;
  --color-vibrant-velvet-400: #fc5ebb;
  --color-vibrant-velvet-500: #e039a0;
  --color-vibrant-velvet-600: #c00785;
  --color-vibrant-velvet-700: #9b006a;
  --color-vibrant-velvet-800: #7a0053;
  --color-vibrant-velvet-900: #600040;
  --color-vibrant-velvet-950: #3f0029;
  --color-venus-slipper-orchid: #d474ff;
  --color-venus-slipper-orchid-50: #fbf3ff;
  --color-venus-slipper-orchid-100: #f6e6ff;
  --color-venus-slipper-orchid-200: #edcbff;
  --color-venus-slipper-orchid-300: #e3aaff;
  --color-venus-slipper-orchid-400: #d474ff;
  --color-venus-slipper-orchid-500: #b656df;
  --color-venus-slipper-orchid-600: #9838bf;
  --color-venus-slipper-orchid-700: #7d20a0;
  --color-venus-slipper-orchid-800: #640d83;
  --color-venus-slipper-orchid-900: #4f0269;
  --color-venus-slipper-orchid-950: #330045;
  --color-pastel-magenta: #ff94ca;
  --color-pastel-magenta-50: #ffedf5;
  --color-pastel-magenta-100: #ffddec;
  --color-pastel-magenta-200: #ffbddc;
  --color-pastel-magenta-300: #ff94ca;
  --color-pastel-magenta-400: #dc77ab;
  --color-pastel-magenta-500: #c05b90;
  --color-pastel-magenta-600: #a14276;
  --color-pastel-magenta-700: #852e5f;
  --color-pastel-magenta-800: #6c1f4b;
  --color-pastel-magenta-900: #57153b;
  --color-pastel-magenta-950: #390925;
}