Heliotrope
See how #F093FB looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Heliotrope Base */
--color-primary: #F093FB;
--color-primary-rgb: 240 147 251;
--color-primary-hsl: 294 93% 78%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #fce6fe;
--color-primary-100: #f5b5fc;
--color-primary-200: #ef84fb;
--color-primary-300: #e853f9;
--color-primary-400: #e222f7;
--color-primary-500: #c808dd;
--color-primary-600: #9c06ac;
--color-primary-700: #6f047b;
--color-primary-800: #43034a;
--color-primary-900: #160119;
}