Generate tint and shade scales from any base color — get 10 steps from light to dark, ready for design systems and CSS custom properties. Click any swatch to copy the HEX.
A tint adds white to a color (increasing lightness), while a shade adds black (decreasing lightness). Design systems typically use a 10-step scale — numbered 50 through 950 or 100 through 900 — giving designers a predictable range of light to dark values for backgrounds, borders, text and hover states. Generating scales in HSL keeps hue constant while varying lightness, which produces more natural-looking results than simple RGB interpolation. Exporting your scale as CSS custom properties (e.g. --blue-400: #60a5fa) makes the whole palette available across your entire codebase from a single source of truth.