Portage
See how #8F94FB looks when applied to real interface components.
Use lighter tints for backgrounds to maintain readability while keeping brand identity.
:root {
/* Portage Base */
--color-primary: #8F94FB;
--color-primary-rgb: 143 148 251;
--color-primary-hsl: 237 93% 77%;
/* Foreground text color based on contrast */
--color-primary-foreground: #000000;
/* Shades */
--color-primary-50: #e6e8fe;
--color-primary-100: #b5b9fc;
--color-primary-200: #848afb;
--color-primary-300: #535bf9;
--color-primary-400: #222cf7;
--color-primary-500: #0813dd;
--color-primary-600: #060fac;
--color-primary-700: #040a7b;
--color-primary-800: #03064a;
--color-primary-900: #010219;
}