Generate lighter and darker variations of any color
:root {
--color-50: #c2cbf7;
--color-100: #abb8f3;
--color-200: #94a5f0;
--color-300: #7d91ed;
--color-400: #667eea;
--color-500: #667eea; /* base */
--color-600: #576bc7;
--color-700: #4758a4;
--color-800: #384581;
--color-900: #29325e;
--color-950: undefined;
}Toggle to reset text contrast
Use the 500 variant as your primary color, 100-300 for backgrounds, and 700-900 for text or emphasis.