Violet
See how #2F0743 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Violet Base */
--color-primary: #2F0743;
--color-primary-rgb: 47 7 67;
--color-primary-hsl: 280 81% 15%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f6e8fd;
--color-primary-100: #e3baf8;
--color-primary-200: #d08cf3;
--color-primary-300: #be5dee;
--color-primary-400: #ab2fe9;
--color-primary-500: #9216d0;
--color-primary-600: #7111a2;
--color-primary-700: #510c73;
--color-primary-800: #310745;
--color-primary-900: #100217;
}