Velvet to Fairy Dust Color Palette

About this palette

Velvet to Fairy Dust is a 4-color warm, monochromatic, gradient palette: #6D114D (Velvet), #CA4F8F (Twinkly Pinkily), #D98FB1 (Pomelo Red), #FFE9F4 (Fairy Dust). It mixes red, pink, white tones and feels warm overall. The strongest text pairing is #6D114D on #FFE9F4 with a contrast ratio of 9.91:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet	rgb(109, 17, 77)	hsl(321, 73%, 25%)
Twinkly Pinkily	rgb(202, 79, 143)	hsl(329, 54%, 55%)
Pomelo Red	rgb(217, 143, 177)	hsl(332, 49%, 71%)
Fairy Dust	rgb(255, 233, 244)	hsl(330, 100%, 96%)

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.

Aa9.91:1 Very good#6D114D on #FFE9F4
Aa9.91:1 Very good#FFE9F4 on #6D114D
Aa4.63:1 Good#6D114D on #D98FB1
Aa4.63:1 Good#D98FB1 on #6D114D
Aa3.62:1 Poor#CA4F8F on #FFE9F4
Aa3.62:1 Poor#FFE9F4 on #CA4F8F

Color blindness preview

CSS variables

/* Velvet to Fairy Dust — https://swatchly.xyz/palette/6d114d-ca4f8f-d98fb1-ffe9f4 */
:root {
  --velvet: #6d114d;
  --twinkly-pinkily: #ca4f8f;
  --pomelo-red: #d98fb1;
  --fairy-dust: #ffe9f4;
}

Tailwind CSS v4

/* Velvet to Fairy Dust — https://swatchly.xyz/palette/6d114d-ca4f8f-d98fb1-ffe9f4 */
@theme {
  --color-velvet: #6d114d;
  --color-velvet-50: #fff0f8;
  --color-velvet-100: #ffe2f0;
  --color-velvet-200: #ffc3e2;
  --color-velvet-300: #f8a0d0;
  --color-velvet-400: #db7cb1;
  --color-velvet-500: #bd5e95;
  --color-velvet-600: #9e4479;
  --color-velvet-700: #802f60;
  --color-velvet-800: #6d114d;
  --color-velvet-900: #51153a;
  --color-velvet-950: #340a24;
  --color-twinkly-pinkily: #ca4f8f;
  --color-twinkly-pinkily-50: #fff0f6;
  --color-twinkly-pinkily-100: #ffe0ed;
  --color-twinkly-pinkily-200: #ffc1dc;
  --color-twinkly-pinkily-300: #ff99c9;
  --color-twinkly-pinkily-400: #e86eab;
  --color-twinkly-pinkily-500: #ca4f8f;
  --color-twinkly-pinkily-600: #ab3475;
  --color-twinkly-pinkily-700: #8d205d;
  --color-twinkly-pinkily-800: #73104a;
  --color-twinkly-pinkily-900: #5c0639;
  --color-twinkly-pinkily-950: #3d0124;
  --color-pomelo-red: #d98fb1;
  --color-pomelo-red-50: #fff5f9;
  --color-pomelo-red-100: #ffe8f2;
  --color-pomelo-red-200: #ffcce2;
  --color-pomelo-red-300: #f1b2ce;
  --color-pomelo-red-400: #d98fb1;
  --color-pomelo-red-500: #ba7394;
  --color-pomelo-red-600: #9b5778;
  --color-pomelo-red-700: #7f415f;
  --color-pomelo-red-800: #65304a;
  --color-pomelo-red-900: #4f2239;
  --color-pomelo-red-950: #331223;
  --color-fairy-dust: #ffe9f4;
  --color-fairy-dust-50: #fff6fb;
  --color-fairy-dust-100: #ffe9f4;
  --color-fairy-dust-200: #e6d6de;
  --color-fairy-dust-300: #d0bec7;
  --color-fairy-dust-400: #b19da7;
  --color-fairy-dust-500: #95818b;
  --color-fairy-dust-600: #796670;
  --color-fairy-dust-700: #605058;
  --color-fairy-dust-800: #4c3e45;
  --color-fairy-dust-900: #3b2f35;
  --color-fairy-dust-950: #251c21;
}