Testosterose to Galactic Grapevine color palette

DCA9EETestosterose FF76ABDream Setting CB6195Flirty Rose AE3A50Romantic Embers 662875Galactic Grapevine

Open in generator Export PNG, PDF, ASE…

About this palette

Testosterose to Galactic Grapevine is a 5-color vibrant, warm, gradient palette: #DCA9EE (Testosterose), #FF76AB (Dream Setting), #CB6195 (Flirty Rose), #AE3A50 (Romantic Embers), #662875 (Galactic Grapevine). It mixes purple, pink, red tones and feels warm overall. The strongest text pairing is #DCA9EE on #662875 with a contrast ratio of 5.15:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Testosterose	rgb(220, 169, 238)	hsl(284, 67%, 80%)
Dream Setting	rgb(255, 118, 171)	hsl(337, 100%, 73%)
Flirty Rose	rgb(203, 97, 149)	hsl(331, 50%, 59%)
Romantic Embers	rgb(174, 58, 80)	hsl(349, 50%, 45%)
Galactic Grapevine	rgb(102, 40, 117)	hsl(288, 49%, 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.

Aa5.15:1 Good#DCA9EE on #662875
Aa5.15:1 Good#662875 on #DCA9EE
Aa3.97:1 Poor#FF76AB on #662875
Aa3.97:1 Poor#662875 on #FF76AB
Aa3.11:1 Poor#DCA9EE on #AE3A50
Aa3.11:1 Poor#AE3A50 on #DCA9EE

Color blindness preview

CSS variables

/* Testosterose to Galactic Grapevine — https://swatchly.xyz/palette/dca9ee-ff76ab-cb6195-ae3a50-662875 */
:root {
  --testosterose: #dca9ee;
  --dream-setting: #ff76ab;
  --flirty-rose: #cb6195;
  --romantic-embers: #ae3a50;
  --galactic-grapevine: #662875;
}

Tailwind CSS v4

/* Testosterose to Galactic Grapevine — https://swatchly.xyz/palette/dca9ee-ff76ab-cb6195-ae3a50-662875 */
@theme {
  --color-testosterose: #dca9ee;
  --color-testosterose-50: #fbf0ff;
  --color-testosterose-100: #f7e1ff;
  --color-testosterose-200: #ecc6fa;
  --color-testosterose-300: #dca9ee;
  --color-testosterose-400: #bb8bcc;
  --color-testosterose-500: #a06fb0;
  --color-testosterose-600: #845694;
  --color-testosterose-700: #6b4179;
  --color-testosterose-800: #553162;
  --color-testosterose-900: #43244e;
  --color-testosterose-950: #2b1433;
  --color-dream-setting: #ff76ab;
  --color-dream-setting-50: #fff6f8;
  --color-dream-setting-100: #ffeaf0;
  --color-dream-setting-200: #ffd0de;
  --color-dream-setting-300: #ffaec9;
  --color-dream-setting-400: #ff76ab;
  --color-dream-setting-500: #dd588e;
  --color-dream-setting-600: #bb3972;
  --color-dream-setting-700: #9b2059;
  --color-dream-setting-800: #7d0d45;
  --color-dream-setting-900: #630134;
  --color-dream-setting-950: #40001f;
  --color-flirty-rose: #cb6195;
  --color-flirty-rose-50: #fff2f7;
  --color-flirty-rose-100: #ffe5ef;
  --color-flirty-rose-200: #ffc8df;
  --color-flirty-rose-300: #ffa4cd;
  --color-flirty-rose-400: #e67fb0;
  --color-flirty-rose-500: #cb6195;
  --color-flirty-rose-600: #ab4579;
  --color-flirty-rose-700: #8d3061;
  --color-flirty-rose-800: #721f4c;
  --color-flirty-rose-900: #5a143b;
  --color-flirty-rose-950: #3b0824;
  --color-romantic-embers: #ae3a50;
  --color-romantic-embers-50: #fff1f2;
  --color-romantic-embers-100: #ffe3e5;
  --color-romantic-embers-200: #ffc5ca;
  --color-romantic-embers-300: #ffa1ab;
  --color-romantic-embers-400: #eb7586;
  --color-romantic-embers-500: #cd576a;
  --color-romantic-embers-600: #ae3a50;
  --color-romantic-embers-700: #8f273d;
  --color-romantic-embers-800: #74182d;
  --color-romantic-embers-900: #5d0e21;
  --color-romantic-embers-950: #3d0513;
  --color-galactic-grapevine: #662875;
  --color-galactic-grapevine-50: #fcf1ff;
  --color-galactic-grapevine-100: #f9e2ff;
  --color-galactic-grapevine-200: #f3c4ff;
  --color-galactic-grapevine-300: #e3aaf2;
  --color-galactic-grapevine-400: #c788d7;
  --color-galactic-grapevine-500: #ac6cbd;
  --color-galactic-grapevine-600: #9152a1;
  --color-galactic-grapevine-700: #783e87;
  --color-galactic-grapevine-800: #662875;
  --color-galactic-grapevine-900: #4e2159;
  --color-galactic-grapevine-950: #33123b;
}