Purple’s Baby Sister to Tardis Blue Color Palette

About this palette

Purple’s Baby Sister to Tardis Blue is a 4-color cool, gradient palette: #ECC6EE (Purple’s Baby Sister), #99A4E6 (Cold Lips), #5073C3 (Serenity’s Reign), #173C74 (Tardis Blue). It mixes pink, purple, blue tones and feels cool overall. The strongest text pairing is #ECC6EE on #173C74 with a contrast ratio of 7.17:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple’s Baby Sister	rgb(236, 198, 238)	hsl(297, 54%, 85%)
Cold Lips	rgb(153, 164, 230)	hsl(231, 61%, 75%)
Serenity’s Reign	rgb(80, 115, 195)	hsl(222, 49%, 54%)
Tardis Blue	rgb(23, 60, 116)	hsl(216, 67%, 27%)

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.

Aa7.17:1 Very good#ECC6EE on #173C74
Aa7.17:1 Very good#173C74 on #ECC6EE
Aa4.55:1 Good#99A4E6 on #173C74
Aa4.55:1 Good#173C74 on #99A4E6
Aa3.03:1 Poor#ECC6EE on #5073C3
Aa3.03:1 Poor#5073C3 on #ECC6EE

Color blindness preview

CSS variables

/* Purple’s Baby Sister to Tardis Blue — https://swatchly.xyz/palette/ecc6ee-99a4e6-5073c3-173c74 */
:root {
  --purple-s-baby-sister: #ecc6ee;
  --cold-lips: #99a4e6;
  --serenity-s-reign: #5073c3;
  --tardis-blue: #173c74;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Tardis Blue — https://swatchly.xyz/palette/ecc6ee-99a4e6-5073c3-173c74 */
@theme {
  --color-purple-s-baby-sister: #ecc6ee;
  --color-purple-s-baby-sister-50: #feedff;
  --color-purple-s-baby-sister-100: #f8e0f9;
  --color-purple-s-baby-sister-200: #ecc6ee;
  --color-purple-s-baby-sister-300: #d2b2d4;
  --color-purple-s-baby-sister-400: #b592b7;
  --color-purple-s-baby-sister-500: #9a779c;
  --color-purple-s-baby-sister-600: #7f5e81;
  --color-purple-s-baby-sister-700: #674968;
  --color-purple-s-baby-sister-800: #523853;
  --color-purple-s-baby-sister-900: #402a41;
  --color-purple-s-baby-sister-950: #28192a;
  --color-cold-lips: #99a4e6;
  --color-cold-lips-50: #f6f7ff;
  --color-cold-lips-100: #ebeeff;
  --color-cold-lips-200: #d4dbff;
  --color-cold-lips-300: #b9c4fc;
  --color-cold-lips-400: #99a4e6;
  --color-cold-lips-500: #7d87c7;
  --color-cold-lips-600: #626ba8;
  --color-cold-lips-700: #4c538b;
  --color-cold-lips-800: #393f70;
  --color-cold-lips-900: #2b2f58;
  --color-cold-lips-950: #191c39;
  --color-serenity-s-reign: #5073c3;
  --color-serenity-s-reign-50: #f0f5ff;
  --color-serenity-s-reign-100: #e5edff;
  --color-serenity-s-reign-200: #cbdcff;
  --color-serenity-s-reign-300: #acc7ff;
  --color-serenity-s-reign-400: #83a7f7;
  --color-serenity-s-reign-500: #688dde;
  --color-serenity-s-reign-600: #5073c3;
  --color-serenity-s-reign-700: #3a5aa4;
  --color-serenity-s-reign-800: #2a4586;
  --color-serenity-s-reign-900: #1d346b;
  --color-serenity-s-reign-950: #0f1f47;
  --color-tardis-blue: #173c74;
  --color-tardis-blue-50: #eff6ff;
  --color-tardis-blue-100: #e0ecff;
  --color-tardis-blue-200: #c0d9ff;
  --color-tardis-blue-300: #9dc2fb;
  --color-tardis-blue-400: #79a1df;
  --color-tardis-blue-500: #5c84c2;
  --color-tardis-blue-600: #4369a3;
  --color-tardis-blue-700: #2f5185;
  --color-tardis-blue-800: #173c74;
  --color-tardis-blue-900: #162f54;
  --color-tardis-blue-950: #0b1c37;
}