Testosterose to Long Passionate Night Color Palette

About this palette

Testosterose to Long Passionate Night is a 5-color cool, monochromatic palette: #D8ABEE (Testosterose), #745583 (Dr Who), #A580B2 (Heart Potion), #FAD2FF (Sugar Chic), #563A62 (Long Passionate Night). It mixes purple, pink tones and feels cool overall. The strongest text pairing is #FAD2FF on #563A62 with a contrast ratio of 7.22:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Testosterose	rgb(216, 171, 238)	hsl(280, 66%, 80%)
Dr Who	rgb(116, 85, 131)	hsl(280, 21%, 42%)
Heart Potion	rgb(165, 128, 178)	hsl(284, 25%, 60%)
Sugar Chic	rgb(250, 210, 255)	hsl(293, 100%, 91%)
Long Passionate Night	rgb(86, 58, 98)	hsl(282, 26%, 31%)

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.22:1 Very good#FAD2FF on #563A62
Aa7.22:1 Very good#563A62 on #FAD2FF
Aa5.04:1 Good#D8ABEE on #563A62
Aa5.04:1 Good#563A62 on #D8ABEE
Aa4.67:1 Good#745583 on #FAD2FF
Aa4.67:1 Good#FAD2FF on #745583
Aa3.26:1 Poor#D8ABEE on #745583
Aa3.26:1 Poor#745583 on #D8ABEE

Color blindness preview

CSS variables

/* Testosterose to Long Passionate Night — https://swatchly.xyz/palette/d8abee-745583-a580b2-fad2ff-563a62 */
:root {
  --testosterose: #d8abee;
  --dr-who: #745583;
  --heart-potion: #a580b2;
  --sugar-chic: #fad2ff;
  --long-passionate-night: #563a62;
}

Tailwind CSS v4

/* Testosterose to Long Passionate Night — https://swatchly.xyz/palette/d8abee-745583-a580b2-fad2ff-563a62 */
@theme {
  --color-testosterose: #d8abee;
  --color-testosterose-50: #faf0ff;
  --color-testosterose-100: #f5e2ff;
  --color-testosterose-200: #e9c7fa;
  --color-testosterose-300: #d8abee;
  --color-testosterose-400: #b78dcc;
  --color-testosterose-500: #9c71b0;
  --color-testosterose-600: #815894;
  --color-testosterose-700: #684379;
  --color-testosterose-800: #533262;
  --color-testosterose-900: #41254e;
  --color-testosterose-950: #291533;
  --color-dr-who: #745583;
  --color-dr-who-50: #faf1ff;
  --color-dr-who-100: #f5e1ff;
  --color-dr-who-200: #e3c9f1;
  --color-dr-who-300: #cdafdc;
  --color-dr-who-400: #ad8dbd;
  --color-dr-who-500: #9070a0;
  --color-dr-who-600: #745583;
  --color-dr-who-700: #5d426a;
  --color-dr-who-800: #4a3255;
  --color-dr-who-900: #3a2643;
  --color-dr-who-950: #24162b;
  --color-heart-potion: #a580b2;
  --color-heart-potion-50: #fcf3ff;
  --color-heart-potion-100: #f9e8ff;
  --color-heart-potion-200: #edd1f7;
  --color-heart-potion-300: #dbbbe6;
  --color-heart-potion-400: #be9bcb;
  --color-heart-potion-500: #a580b2;
  --color-heart-potion-600: #886494;
  --color-heart-potion-700: #6d4d79;
  --color-heart-potion-800: #563a60;
  --color-heart-potion-900: #432b4b;
  --color-heart-potion-950: #2a1930;
  --color-sugar-chic: #fad2ff;
  --color-sugar-chic-50: #fce4ff;
  --color-sugar-chic-100: #fad2ff;
  --color-sugar-chic-200: #e3c4e6;
  --color-sugar-chic-300: #cfadd4;
  --color-sugar-chic-400: #b38fb7;
  --color-sugar-chic-500: #99759d;
  --color-sugar-chic-600: #7f5c83;
  --color-sugar-chic-700: #67486c;
  --color-sugar-chic-800: #523756;
  --color-sugar-chic-900: #402943;
  --color-sugar-chic-950: #29182b;
  --color-long-passionate-night: #563a62;
  --color-long-passionate-night-50: #fbf1ff;
  --color-long-passionate-night-100: #f6e3ff;
  --color-long-passionate-night-200: #e6cdf1;
  --color-long-passionate-night-300: #d2b6de;
  --color-long-passionate-night-400: #b496c2;
  --color-long-passionate-night-500: #9a7ba7;
  --color-long-passionate-night-600: #7f628c;
  --color-long-passionate-night-700: #684d74;
  --color-long-passionate-night-800: #563a62;
  --color-long-passionate-night-900: #422d4a;
  --color-long-passionate-night-950: #2a1b30;
}