Velvet to Light Pink Color Palette

About this palette

Velvet to Light Pink is a 5-color warm, gradient palette: #751D4C (Velvet), #9251A3 (Vicious Violet), #D86254 (Track and Field), #DF94D0 (Love Dust), #FFCFDF (Light Pink). It mixes red, purple, pink tones and feels warm overall. The strongest text pairing is #751D4C on #FFCFDF with a contrast ratio of 7.48:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet	rgb(117, 29, 76)	hsl(328, 60%, 29%)
Vicious Violet	rgb(146, 81, 163)	hsl(288, 34%, 48%)
Track and Field	rgb(216, 98, 84)	hsl(6, 63%, 59%)
Love Dust	rgb(223, 148, 208)	hsl(312, 54%, 73%)
Light Pink	rgb(255, 207, 223)	hsl(340, 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.

Aa7.48:1 Very good#751D4C on #FFCFDF
Aa7.48:1 Very good#FFCFDF on #751D4C
Aa4.56:1 Good#751D4C on #DF94D0
Aa4.56:1 Good#DF94D0 on #751D4C
Aa3.88:1 Poor#9251A3 on #FFCFDF
Aa3.88:1 Poor#FFCFDF on #9251A3

Color blindness preview

CSS variables

/* Velvet to Light Pink — https://swatchly.xyz/palette/751d4c-9251a3-d86254-df94d0-ffcfdf */
:root {
  --velvet: #751d4c;
  --vicious-violet: #9251a3;
  --track-and-field: #d86254;
  --love-dust: #df94d0;
  --light-pink: #ffcfdf;
}

Tailwind CSS v4

/* Velvet to Light Pink — https://swatchly.xyz/palette/751d4c-9251a3-d86254-df94d0-ffcfdf */
@theme {
  --color-velvet: #751d4c;
  --color-velvet-50: #fff1f6;
  --color-velvet-100: #ffe2ed;
  --color-velvet-200: #ffc4dc;
  --color-velvet-300: #f9a3c9;
  --color-velvet-400: #dd80aa;
  --color-velvet-500: #c26490;
  --color-velvet-600: #a44a75;
  --color-velvet-700: #88365e;
  --color-velvet-800: #751d4c;
  --color-velvet-900: #581a3a;
  --color-velvet-950: #3a0d24;
  --color-vicious-violet: #9251a3;
  --color-vicious-violet-50: #fcf1ff;
  --color-vicious-violet-100: #f9e3ff;
  --color-vicious-violet-200: #f3c7ff;
  --color-vicious-violet-300: #e4aaf4;
  --color-vicious-violet-400: #c888d9;
  --color-vicious-violet-500: #ad6bbf;
  --color-vicious-violet-600: #9251a3;
  --color-vicious-violet-700: #773c86;
  --color-vicious-violet-800: #5f2b6d;
  --color-vicious-violet-900: #4b1e56;
  --color-vicious-violet-950: #301038;
  --color-track-and-field: #d86254;
  --color-track-and-field-50: #fff3f1;
  --color-track-and-field-100: #ffe7e3;
  --color-track-and-field-200: #ffcdc5;
  --color-track-and-field-300: #ffaca0;
  --color-track-and-field-400: #f38071;
  --color-track-and-field-500: #d86254;
  --color-track-and-field-600: #b7463a;
  --color-track-and-field-700: #982f26;
  --color-track-and-field-800: #7b1e17;
  --color-track-and-field-900: #62120d;
  --color-track-and-field-950: #400704;
  --color-love-dust: #df94d0;
  --color-love-dust-50: #ffe3f8;
  --color-love-dust-100: #ffcff4;
  --color-love-dust-200: #f1b3e4;
  --color-love-dust-300: #df94d0;
  --color-love-dust-400: #c078b2;
  --color-love-dust-500: #a66099;
  --color-love-dust-600: #8b497f;
  --color-love-dust-700: #733769;
  --color-love-dust-800: #5e2955;
  --color-love-dust-900: #4c1f45;
  --color-love-dust-950: #32112c;
  --color-light-pink: #ffcfdf;
  --color-light-pink-50: #fff7fa;
  --color-light-pink-100: #ffebf1;
  --color-light-pink-200: #ffcfdf;
  --color-light-pink-300: #e1bac7;
  --color-light-pink-400: #c398a6;
  --color-light-pink-500: #a67b8a;
  --color-light-pink-600: #89606f;
  --color-light-pink-700: #6f4a57;
  --color-light-pink-800: #573743;
  --color-light-pink-900: #442a33;
  --color-light-pink-950: #2c1920;
}