Lavendless to Purple’s Baby Sister color palette

B575B9Lavendless 523956Purple Prose E99EECDiva Mecha 784D81Ninja Princess F2C5FCPurple’s Baby Sister

Open in generator Export PNG, PDF, ASE…

About this palette

Lavendless to Purple’s Baby Sister is a 5-color cool, monochromatic palette: #B575B9 (Lavendless), #523956 (Purple Prose), #E99EEC (Diva Mecha), #784D81 (Ninja Princess), #F2C5FC (Purple’s Baby Sister). It mixes pink, purple tones and feels cool overall. The strongest text pairing is #523956 on #F2C5FC with a contrast ratio of 6.82:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lavendless	rgb(181, 117, 185)	hsl(296, 33%, 59%)
Purple Prose	rgb(82, 57, 86)	hsl(292, 20%, 28%)
Diva Mecha	rgb(233, 158, 236)	hsl(298, 67%, 77%)
Ninja Princess	rgb(120, 77, 129)	hsl(290, 25%, 40%)
Purple’s Baby Sister	rgb(242, 197, 252)	hsl(289, 90%, 88%)

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.

Aa6.82:1 Good#523956 on #F2C5FC
Aa6.82:1 Good#F2C5FC on #523956
Aa5.08:1 Good#523956 on #E99EEC
Aa5.08:1 Good#E99EEC on #523956
Aa4.46:1 Poor#784D81 on #F2C5FC
Aa4.46:1 Poor#F2C5FC on #784D81
Aa3.33:1 Poor#E99EEC on #784D81
Aa3.33:1 Poor#784D81 on #E99EEC

Color blindness preview

CSS variables

/* Lavendless to Purple’s Baby Sister — https://swatchly.xyz/palette/b575b9-523956-e99eec-784d81-f2c5fc */
:root {
  --lavendless: #b575b9;
  --purple-prose: #523956;
  --diva-mecha: #e99eec;
  --ninja-princess: #784d81;
  --purple-s-baby-sister: #f2c5fc;
}

Tailwind CSS v4

/* Lavendless to Purple’s Baby Sister — https://swatchly.xyz/palette/b575b9-523956-e99eec-784d81-f2c5fc */
@theme {
  --color-lavendless: #b575b9;
  --color-lavendless-50: #fff2ff;
  --color-lavendless-100: #fee6ff;
  --color-lavendless-200: #fbcafd;
  --color-lavendless-300: #e9b2ec;
  --color-lavendless-400: #ce91d2;
  --color-lavendless-500: #b575b9;
  --color-lavendless-600: #97599b;
  --color-lavendless-700: #7b427f;
  --color-lavendless-800: #623065;
  --color-lavendless-900: #4c224f;
  --color-lavendless-950: #311233;
  --color-purple-prose: #523956;
  --color-purple-prose-50: #fdf0ff;
  --color-purple-prose-100: #f7e4fa;
  --color-purple-prose-200: #e5cfe9;
  --color-purple-prose-300: #d1b7d5;
  --color-purple-prose-400: #b397b7;
  --color-purple-prose-500: #987c9c;
  --color-purple-prose-600: #7c6281;
  --color-purple-prose-700: #654c68;
  --color-purple-prose-800: #523956;
  --color-purple-prose-900: #3e2c41;
  --color-purple-prose-950: #271b29;
  --color-diva-mecha: #e99eec;
  --color-diva-mecha-50: #ffecff;
  --color-diva-mecha-100: #fedbff;
  --color-diva-mecha-200: #f7bdf9;
  --color-diva-mecha-300: #e99eec;
  --color-diva-mecha-400: #c781ca;
  --color-diva-mecha-500: #ac65af;
  --color-diva-mecha-600: #8f4c93;
  --color-diva-mecha-700: #753879;
  --color-diva-mecha-800: #5f2862;
  --color-diva-mecha-900: #4b1d4e;
  --color-diva-mecha-950: #310f33;
  --color-ninja-princess: #784d81;
  --color-ninja-princess-50: #fdf0ff;
  --color-ninja-princess-100: #fae2ff;
  --color-ninja-princess-200: #efcbf6;
  --color-ninja-princess-300: #ddb5e5;
  --color-ninja-princess-400: #c195ca;
  --color-ninja-princess-500: #a87bb1;
  --color-ninja-princess-600: #8e6297;
  --color-ninja-princess-700: #784d81;
  --color-ninja-princess-800: #5f3b67;
  --color-ninja-princess-900: #4b2b51;
  --color-ninja-princess-950: #301935;
  --color-purple-s-baby-sister: #f2c5fc;
  --color-purple-s-baby-sister-50: #fcf0ff;
  --color-purple-s-baby-sister-100: #fae2ff;
  --color-purple-s-baby-sister-200: #f2c5fc;
  --color-purple-s-baby-sister-300: #d7b2e0;
  --color-purple-s-baby-sister-400: #b990c3;
  --color-purple-s-baby-sister-500: #9e75a7;
  --color-purple-s-baby-sister-600: #825b8b;
  --color-purple-s-baby-sister-700: #694671;
  --color-purple-s-baby-sister-800: #54345b;
  --color-purple-s-baby-sister-900: #412747;
  --color-purple-s-baby-sister-950: #2a172e;
}