Start generating

Light Pink to Velvet color palette

FFCFE8Light PinkFF9FCDViolet KissF562C2Eosin PinkCB0896Rrosy-Fingered Dawn8D4467Grape Kiss700055Velvet
Open in generator Export PNG, PDF, ASE…

About this palette

Light Pink to Velvet is a 6-color vibrant, warm, neon, monochromatic, gradient palette: #FFCFE8 (Light Pink), #FF9FCD (Violet Kiss), #F562C2 (Eosin Pink), #CB0896 (Rrosy-Fingered Dawn), #8D4467 (Grape Kiss), #700055 (Velvet). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFCFE8 on #700055 with a contrast ratio of 8.43:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Light Pinkrgb(255, 207, 232)hsl(329, 100%, 91%)
Violet Kissrgb(255, 159, 205)hsl(331, 100%, 81%)
Eosin Pinkrgb(245, 98, 194)hsl(321, 88%, 67%)
Rrosy-Fingered Dawnrgb(203, 8, 150)hsl(316, 92%, 41%)
Grape Kissrgb(141, 68, 103)hsl(331, 35%, 41%)
Velvetrgb(112, 0, 85)hsl(314, 100%, 22%)

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.

  • Aa8.43:1 Very good#FFCFE8 on #700055
  • Aa8.43:1 Very good#700055 on #FFCFE8
  • Aa6.09:1 Good#FF9FCD on #700055
  • Aa6.09:1 Good#700055 on #FF9FCD
  • Aa4.86:1 Good#FFCFE8 on #8D4467
  • Aa4.86:1 Good#8D4467 on #FFCFE8
  • Aa4.07:1 Poor#F562C2 on #700055
  • Aa4.07:1 Poor#700055 on #F562C2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Light Pink to Velvet — https://swatchly.xyz/palette/ffcfe8-ff9fcd-f562c2-cb0896-8d4467-700055 */
:root {
  --light-pink: #ffcfe8;
  --violet-kiss: #ff9fcd;
  --eosin-pink: #f562c2;
  --rrosy-fingered-dawn: #cb0896;
  --grape-kiss: #8d4467;
  --velvet: #700055;
}

Tailwind CSS v4

/* Light Pink to Velvet — https://swatchly.xyz/palette/ffcfe8-ff9fcd-f562c2-cb0896-8d4467-700055 */
@theme {
  --color-light-pink: #ffcfe8;
  --color-light-pink-50: #fff8fb;
  --color-light-pink-100: #ffebf5;
  --color-light-pink-200: #ffcfe8;
  --color-light-pink-300: #e1bace;
  --color-light-pink-400: #c398ae;
  --color-light-pink-500: #a67b92;
  --color-light-pink-600: #896076;
  --color-light-pink-700: #6e495d;
  --color-light-pink-800: #573748;
  --color-light-pink-900: #442938;
  --color-light-pink-950: #2c1823;
  --color-violet-kiss: #ff9fcd;
  --color-violet-kiss-50: #fff1f7;
  --color-violet-kiss-100: #ffe3ef;
  --color-violet-kiss-200: #ffc5df;
  --color-violet-kiss-300: #ff9fcd;
  --color-violet-kiss-400: #da81ad;
  --color-violet-kiss-500: #be6491;
  --color-violet-kiss-600: #a04a76;
  --color-violet-kiss-700: #83365e;
  --color-violet-kiss-800: #6a264a;
  --color-violet-kiss-900: #541a39;
  --color-violet-kiss-950: #370d24;
  --color-eosin-pink: #f562c2;
  --color-eosin-pink-50: #fff1f8;
  --color-eosin-pink-100: #ffe2f2;
  --color-eosin-pink-200: #ffc3e5;
  --color-eosin-pink-300: #ff9cd8;
  --color-eosin-pink-400: #f562c2;
  --color-eosin-pink-500: #d544a5;
  --color-eosin-pink-600: #b52389;
  --color-eosin-pink-700: #96036f;
  --color-eosin-pink-800: #770058;
  --color-eosin-pink-900: #5d0044;
  --color-eosin-pink-950: #3d002b;
  --color-rrosy-fingered-dawn: #cb0896;
  --color-rrosy-fingered-dawn-50: #fff0f8;
  --color-rrosy-fingered-dawn-100: #ffe4f3;
  --color-rrosy-fingered-dawn-200: #ffc9e7;
  --color-rrosy-fingered-dawn-300: #ffa5d9;
  --color-rrosy-fingered-dawn-400: #ff67c8;
  --color-rrosy-fingered-dawn-500: #e93bb0;
  --color-rrosy-fingered-dawn-600: #cb0896;
  --color-rrosy-fingered-dawn-700: #a30078;
  --color-rrosy-fingered-dawn-800: #81005e;
  --color-rrosy-fingered-dawn-900: #650048;
  --color-rrosy-fingered-dawn-950: #41002e;
  --color-grape-kiss: #8d4467;
  --color-grape-kiss-50: #fff1f6;
  --color-grape-kiss-100: #ffe2ee;
  --color-grape-kiss-200: #ffc7df;
  --color-grape-kiss-300: #f3adcb;
  --color-grape-kiss-400: #d98daf;
  --color-grape-kiss-500: #bf7295;
  --color-grape-kiss-600: #a4597c;
  --color-grape-kiss-700: #8d4467;
  --color-grape-kiss-800: #713351;
  --color-grape-kiss-900: #59243e;
  --color-grape-kiss-950: #3b1427;
  --color-velvet: #700055;
  --color-velvet-50: #fff0f9;
  --color-velvet-100: #ffe1f3;
  --color-velvet-200: #ffc2e7;
  --color-velvet-300: #fc9cd8;
  --color-velvet-400: #df76ba;
  --color-velvet-500: #c1589e;
  --color-velvet-600: #a13d81;
  --color-velvet-700: #832868;
  --color-velvet-800: #700055;
  --color-velvet-900: #530f3f;
  --color-velvet-950: #360628;
}

Similar palettes