Pick any color and get tints, shades, complementary, triadic and analogous palettes with CSS variables.
Tints (lighter)
Shades (darker)
Full Scale (50–950)
Complementary
Triadic
Analogous
:root {
--color-100: #e7e7fe;
--color-200: #b7b8fb;
--color-300: #6e71f7;
--color-400: #262af2;
--color-500: #0d10d9;
--color-600: #0a0ca9;
--color-700: #070978;
--color-800: #040548;
--color-900: #030430;
--color-1000: #010218;
}