Violet
See how #240B36 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Violet Base */
--color-primary: #240B36;
--color-primary-rgb: 36 11 54;
--color-primary-hsl: 275 66% 13%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f4eafb;
--color-primary-100: #ddc0f2;
--color-primary-200: #c695e9;
--color-primary-300: #b06be1;
--color-primary-400: #9941d8;
--color-primary-500: #7f27be;
--color-primary-600: #631e94;
--color-primary-700: #47166a;
--color-primary-800: #2a0d3f;
--color-primary-900: #0e0415;
}