Light Pink to Velvet Black Color Palette

About this palette

Light Pink to Velvet Black is a 5-color warm, vintage, monochromatic, gradient palette: #FFD1DD (Light Pink), #E896AB (Passion Potion), #AD6C77 (Never Forget), #6C3146 (Siren), #2C1C1F (Velvet Black). It mixes pink, red, gray tones and feels warm overall. The strongest text pairing is #FFD1DD on #2C1C1F with a contrast ratio of 11.92:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Light Pink	rgb(255, 209, 221)	hsl(344, 100%, 91%)
Passion Potion	rgb(232, 150, 171)	hsl(345, 64%, 75%)
Never Forget	rgb(173, 108, 119)	hsl(350, 28%, 55%)
Siren	rgb(108, 49, 70)	hsl(339, 38%, 31%)
Velvet Black	rgb(44, 28, 31)	hsl(349, 22%, 14%)

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.

Aa11.92:1 Very good#FFD1DD on #2C1C1F
Aa11.92:1 Very good#2C1C1F on #FFD1DD
Aa7.26:1 Very good#E896AB on #2C1C1F
Aa7.26:1 Very good#2C1C1F on #E896AB
Aa7.12:1 Very good#FFD1DD on #6C3146
Aa7.12:1 Very good#6C3146 on #FFD1DD
Aa4.33:1 Poor#E896AB on #6C3146
Aa4.33:1 Poor#6C3146 on #E896AB

Color blindness preview

CSS variables

/* Light Pink to Velvet Black — https://swatchly.xyz/palette/ffd1dd-e896ab-ad6c77-6c3146-2c1c1f */
:root {
  --light-pink: #ffd1dd;
  --passion-potion: #e896ab;
  --never-forget: #ad6c77;
  --siren: #6c3146;
  --velvet-black: #2c1c1f;
}

Tailwind CSS v4

/* Light Pink to Velvet Black — https://swatchly.xyz/palette/ffd1dd-e896ab-ad6c77-6c3146-2c1c1f */
@theme {
  --color-light-pink: #ffd1dd;
  --color-light-pink-50: #fff8fa;
  --color-light-pink-100: #ffecf1;
  --color-light-pink-200: #ffd1dd;
  --color-light-pink-300: #e1bcc5;
  --color-light-pink-400: #c39aa4;
  --color-light-pink-500: #a67c88;
  --color-light-pink-600: #89616c;
  --color-light-pink-700: #6e4b55;
  --color-light-pink-800: #573841;
  --color-light-pink-900: #442a32;
  --color-light-pink-950: #2b191e;
  --color-passion-potion: #e896ab;
  --color-passion-potion-50: #ffe6eb;
  --color-passion-potion-100: #ffd3dd;
  --color-passion-potion-200: #f9b4c5;
  --color-passion-potion-300: #e896ab;
  --color-passion-potion-400: #c87a8f;
  --color-passion-potion-500: #ae6276;
  --color-passion-potion-600: #924b5f;
  --color-passion-potion-700: #79394c;
  --color-passion-potion-800: #632b3c;
  --color-passion-potion-900: #51202f;
  --color-passion-potion-950: #35121c;
  --color-never-forget: #ad6c77;
  --color-never-forget-50: #fff0f2;
  --color-never-forget-100: #ffe1e5;
  --color-never-forget-200: #fbc4cc;
  --color-never-forget-300: #e8abb4;
  --color-never-forget-400: #ca8893;
  --color-never-forget-500: #ad6c77;
  --color-never-forget-600: #90535e;
  --color-never-forget-700: #763f4a;
  --color-never-forget-800: #5f3039;
  --color-never-forget-900: #4b232b;
  --color-never-forget-950: #31141a;
  --color-siren: #6c3146;
  --color-siren-50: #fff1f5;
  --color-siren-100: #ffe3ea;
  --color-siren-200: #fdc6d6;
  --color-siren-300: #ebaec0;
  --color-siren-400: #cf8ea2;
  --color-siren-500: #b47287;
  --color-siren-600: #98596e;
  --color-siren-700: #7f4558;
  --color-siren-800: #6c3146;
  --color-siren-900: #522736;
  --color-siren-950: #361621;
  --color-velvet-black: #2c1c1f;
  --color-velvet-black-50: #fef1f3;
  --color-velvet-black-100: #f5e7e9;
  --color-velvet-black-200: #e3d3d5;
  --color-velvet-black-300: #cebbbe;
  --color-velvet-black-400: #b09b9f;
  --color-velvet-black-500: #958084;
  --color-velvet-black-600: #7a676a;
  --color-velvet-black-700: #635154;
  --color-velvet-black-800: #4f3f42;
  --color-velvet-black-900: #3e3133;
  --color-velvet-black-950: #2c1c1f;
}