Meteorite
See how #3C1F76 looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Meteorite Base */
--color-primary: #3C1F76;
--color-primary-rgb: 60 31 118;
--color-primary-hsl: 260 58% 29%;
/* Foreground text color based on contrast */
--color-primary-foreground: #ffffff;
/* Shades */
--color-primary-50: #f0ebfa;
--color-primary-100: #d1c3ef;
--color-primary-200: #b39ae4;
--color-primary-300: #9472da;
--color-primary-400: #764acf;
--color-primary-500: #5d30b5;
--color-primary-600: #48258d;
--color-primary-700: #331b65;
--color-primary-800: #1f103c;
--color-primary-900: #0a0514;
}