Royal Purple
See how #65379B looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Royal Purple Base */
--color-primary: #65379B;
--color-primary-rgb: 101 55 155;
--color-primary-hsl: 268 48% 41%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f2ecf8;
--color-primary-100: #d8c6eb;
--color-primary-200: #bda1de;
--color-primary-300: #a37bd1;
--color-primary-400: #8955c3;
--color-primary-500: #6f3caa;
--color-primary-600: #562e84;
--color-primary-700: #3e215e;
--color-primary-800: #251439;
--color-primary-900: #0c0713;
}