Drop in any brand color and get a perceptually-uniform OKLCH scale you can ship as CSS variables, Tailwind colors, SCSS, or design tokens.
:root {
--brand-50: #f9f9ff;
--brand-100: #f4f4ff;
--brand-200: #e5e5fd;
--brand-300: #cecdef;
--brand-400: #b3b2df;
--brand-500: #938ddc;
--brand-600: #7567d4;
--brand-700: #5b3fc4;
--brand-800: #431aa2;
--brand-900: #2a0172;
--brand-950: #130040;
--brand-999: #040019;
}