Meteorite
See how #3A1C71 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Meteorite Base */
--color-primary: #3A1C71;
--color-primary-rgb: 58 28 113;
--color-primary-hsl: 261 60% 28%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f0ebfa;
--color-primary-100: #d2c2f0;
--color-primary-200: #b499e6;
--color-primary-300: #9670db;
--color-primary-400: #7847d1;
--color-primary-500: #5e2eb8;
--color-primary-600: #49248f;
--color-primary-700: #341a66;
--color-primary-800: #1f0f3d;
--color-primary-900: #0a0514;
}