Generate lighter tints and darker shades of any color. Click any swatch to copy its hex code.
Created by mixing a color with white. Each step increases lightness. Used for hover states, backgrounds, and soft UI elements.
Created by mixing a color with black. Each step decreases lightness. Used for text on colored backgrounds, depth, and dark mode.
Use the generated scale as CSS custom properties for a consistent color system — same approach Tailwind and Material Design use.