Start generating

Purple’s Baby Sister to Purple Ink color palette

F4C3ECPurple’s Baby SisterFFF5FDWalkie Chalkie821C82Hello Darkness My Old FriendC391C6Violaceous440F42Velvet CosmosA52BA2Purple Ink
Open in generator Export PNG, PDF, ASE…

About this palette

Purple’s Baby Sister to Purple Ink is a 6-color cool, monochromatic palette: #F4C3EC (Purple’s Baby Sister), #FFF5FD (Walkie Chalkie), #821C82 (Hello Darkness My Old Friend), #C391C6 (Violaceous), #440F42 (Velvet Cosmos), #A52BA2 (Purple Ink). It mixes pink, white, purple tones and feels cool overall. The strongest text pairing is #FFF5FD on #440F42 with a contrast ratio of 14.17:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Purple’s Baby Sisterrgb(244, 195, 236)hsl(310, 69%, 86%)
Walkie Chalkiergb(255, 245, 253)hsl(312, 100%, 98%)
Hello Darkness My Old Friendrgb(130, 28, 130)hsl(300, 65%, 31%)
Violaceousrgb(195, 145, 198)hsl(297, 32%, 67%)
Velvet Cosmosrgb(68, 15, 66)hsl(302, 64%, 16%)
Purple Inkrgb(165, 43, 162)hsl(301, 59%, 41%)

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.

  • Aa14.17:1 Super#FFF5FD on #440F42
  • Aa14.17:1 Super#440F42 on #FFF5FD
  • Aa9.95:1 Very good#F4C3EC on #440F42
  • Aa9.95:1 Very good#440F42 on #F4C3EC
  • Aa8.09:1 Very good#FFF5FD on #821C82
  • Aa8.09:1 Very good#821C82 on #FFF5FD
  • Aa5.88:1 Good#C391C6 on #440F42
  • Aa5.88:1 Good#440F42 on #C391C6

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Purple’s Baby Sister to Purple Ink — https://swatchly.xyz/palette/f4c3ec-fff5fd-821c82-c391c6-440f42-a52ba2 */
:root {
  --purple-s-baby-sister: #f4c3ec;
  --walkie-chalkie: #fff5fd;
  --hello-darkness-my-old-friend: #821c82;
  --violaceous: #c391c6;
  --velvet-cosmos: #440f42;
  --purple-ink: #a52ba2;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Purple Ink — https://swatchly.xyz/palette/f4c3ec-fff5fd-821c82-c391c6-440f42-a52ba2 */
@theme {
  --color-purple-s-baby-sister: #f4c3ec;
  --color-purple-s-baby-sister-50: #ffedfc;
  --color-purple-s-baby-sister-100: #fedef8;
  --color-purple-s-baby-sister-200: #f4c3ec;
  --color-purple-s-baby-sister-300: #d9b0d2;
  --color-purple-s-baby-sister-400: #bc8fb5;
  --color-purple-s-baby-sister-500: #a1749a;
  --color-purple-s-baby-sister-600: #855b7f;
  --color-purple-s-baby-sister-700: #6c4667;
  --color-purple-s-baby-sister-800: #563552;
  --color-purple-s-baby-sister-900: #442740;
  --color-purple-s-baby-sister-950: #2b1729;
  --color-walkie-chalkie: #fff5fd;
  --color-walkie-chalkie-50: #fff5fd;
  --color-walkie-chalkie-100: #f2ecf1;
  --color-walkie-chalkie-200: #ded7dd;
  --color-walkie-chalkie-300: #c8c0c6;
  --color-walkie-chalkie-400: #a89fa6;
  --color-walkie-chalkie-500: #8c838b;
  --color-walkie-chalkie-600: #716970;
  --color-walkie-chalkie-700: #5a5359;
  --color-walkie-chalkie-800: #474045;
  --color-walkie-chalkie-900: #363135;
  --color-walkie-chalkie-950: #221e21;
  --color-hello-darkness-my-old-friend: #821c82;
  --color-hello-darkness-my-old-friend-50: #fff0fe;
  --color-hello-darkness-my-old-friend-100: #ffe0fd;
  --color-hello-darkness-my-old-friend-200: #ffbdfc;
  --color-hello-darkness-my-old-friend-300: #f49af1;
  --color-hello-darkness-my-old-friend-400: #d775d5;
  --color-hello-darkness-my-old-friend-500: #ba56b9;
  --color-hello-darkness-my-old-friend-600: #9b3a9a;
  --color-hello-darkness-my-old-friend-700: #821c82;
  --color-hello-darkness-my-old-friend-800: #661666;
  --color-hello-darkness-my-old-friend-900: #510c51;
  --color-hello-darkness-my-old-friend-950: #350435;
  --color-violaceous: #c391c6;
  --color-violaceous-50: #fef2ff;
  --color-violaceous-100: #fee3ff;
  --color-violaceous-200: #f2cbf3;
  --color-violaceous-300: #deb3e1;
  --color-violaceous-400: #c391c6;
  --color-violaceous-500: #a675a9;
  --color-violaceous-600: #895b8c;
  --color-violaceous-700: #6f4572;
  --color-violaceous-800: #58345b;
  --color-violaceous-900: #452647;
  --color-violaceous-950: #2c162d;
  --color-velvet-cosmos: #440f42;
  --color-velvet-cosmos-50: #fff0fd;
  --color-velvet-cosmos-100: #ffe0fc;
  --color-velvet-cosmos-200: #f5c6f1;
  --color-velvet-cosmos-300: #e2acdd;
  --color-velvet-cosmos-400: #c388be;
  --color-velvet-cosmos-500: #a56ba1;
  --color-velvet-cosmos-600: #875083;
  --color-velvet-cosmos-700: #6b3a67;
  --color-velvet-cosmos-800: #52294f;
  --color-velvet-cosmos-900: #440f42;
  --color-velvet-cosmos-950: #250e24;
  --color-purple-ink: #a52ba2;
  --color-purple-ink-50: #fff0fd;
  --color-purple-ink-100: #ffdffc;
  --color-purple-ink-200: #ffbefa;
  --color-purple-ink-300: #fd93f7;
  --color-purple-ink-400: #e06cdb;
  --color-purple-ink-500: #c34bbf;
  --color-purple-ink-600: #a52ba2;
  --color-purple-ink-700: #871685;
  --color-purple-ink-800: #6d026c;
  --color-purple-ink-900: #560055;
  --color-purple-ink-950: #380037;
}

Similar palettes