Purple’s Baby Sister to Velvet Cosmos Color Palette

About this palette

Purple’s Baby Sister to Velvet Cosmos is a 4-color cool, monochromatic, gradient palette: #F8BFFA (Purple’s Baby Sister), #C070BC (Lavendless), #8A2AA2 (Pleasant Purple), #4A104D (Velvet Cosmos). It mixes pink, purple tones and feels cool overall. The strongest text pairing is #F8BFFA on #4A104D with a contrast ratio of 9.39:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple’s Baby Sister	rgb(248, 191, 250)	hsl(298, 86%, 86%)
Lavendless	rgb(192, 112, 188)	hsl(303, 39%, 60%)
Pleasant Purple	rgb(138, 42, 162)	hsl(288, 59%, 40%)
Velvet Cosmos	rgb(74, 16, 77)	hsl(297, 66%, 18%)

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.39:1 Very good#F8BFFA on #4A104D
Aa9.39:1 Very good#4A104D on #F8BFFA
Aa4.71:1 Good#F8BFFA on #8A2AA2
Aa4.71:1 Good#8A2AA2 on #F8BFFA
Aa4.27:1 Poor#C070BC on #4A104D
Aa4.27:1 Poor#4A104D on #C070BC

Color blindness preview

CSS variables

/* Purple’s Baby Sister to Velvet Cosmos — https://swatchly.xyz/palette/f8bffa-c070bc-8a2aa2-4a104d */
:root {
  --purple-s-baby-sister: #f8bffa;
  --lavendless: #c070bc;
  --pleasant-purple: #8a2aa2;
  --velvet-cosmos: #4a104d;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Velvet Cosmos — https://swatchly.xyz/palette/f8bffa-c070bc-8a2aa2-4a104d */
@theme {
  --color-purple-s-baby-sister: #f8bffa;
  --color-purple-s-baby-sister-50: #ffedff;
  --color-purple-s-baby-sister-100: #feddff;
  --color-purple-s-baby-sister-200: #f8bffa;
  --color-purple-s-baby-sister-300: #dcacde;
  --color-purple-s-baby-sister-400: #bf8bc1;
  --color-purple-s-baby-sister-500: #a470a6;
  --color-purple-s-baby-sister-600: #88568a;
  --color-purple-s-baby-sister-700: #6f4171;
  --color-purple-s-baby-sister-800: #59315b;
  --color-purple-s-baby-sister-900: #462447;
  --color-purple-s-baby-sister-950: #2d142e;
  --color-lavendless: #c070bc;
  --color-lavendless-50: #fff3fe;
  --color-lavendless-100: #ffe7fd;
  --color-lavendless-200: #ffcafb;
  --color-lavendless-300: #f3aeee;
  --color-lavendless-400: #d98cd4;
  --color-lavendless-500: #c070bc;
  --color-lavendless-600: #a1539d;
  --color-lavendless-700: #843c81;
  --color-lavendless-800: #692a67;
  --color-lavendless-900: #521c51;
  --color-lavendless-950: #350e34;
  --color-pleasant-purple: #8a2aa2;
  --color-pleasant-purple-50: #fcf1ff;
  --color-pleasant-purple-100: #f9e2ff;
  --color-pleasant-purple-200: #f3c7ff;
  --color-pleasant-purple-300: #eca6ff;
  --color-pleasant-purple-400: #d67cef;
  --color-pleasant-purple-500: #bc5fd6;
  --color-pleasant-purple-600: #a144ba;
  --color-pleasant-purple-700: #8a2aa2;
  --color-pleasant-purple-800: #6e1b82;
  --color-pleasant-purple-900: #570e69;
  --color-pleasant-purple-950: #3a0346;
  --color-velvet-cosmos: #4a104d;
  --color-velvet-cosmos-50: #ffefff;
  --color-velvet-cosmos-100: #ffdfff;
  --color-velvet-cosmos-200: #f6c4f7;
  --color-velvet-cosmos-300: #e3abe4;
  --color-velvet-cosmos-400: #c587c6;
  --color-velvet-cosmos-500: #a86aaa;
  --color-velvet-cosmos-600: #8a508d;
  --color-velvet-cosmos-700: #6f3a71;
  --color-velvet-cosmos-800: #572a59;
  --color-velvet-cosmos-900: #4a104d;
  --color-velvet-cosmos-950: #2a102b;
}