Color Shades Generator creates practical tint and shade steps from a HEX color. Use it to build UI palettes, hover states, borders, and accessible color systems without opening a design app.
50
100
200
300
400
500
600
700
800
900
950
Yes. The tool is free and runs directly in your browser with no account required.
No. Processing happens locally in the browser tab. Your base color is never sent to a server.
11 steps — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — following the same lightness-step convention used by Tailwind CSS color scales.
Your base HEX color is converted to HSL, then each step reuses the same hue and saturation while setting lightness to a fixed value (from 97% for the 50 step down to 12% for the 950 step).
Yes — click 'Copy as CSS variables' to get a ready-to-paste :root block with --color-50 through --color-950 custom properties.
Step 500 is generated at a fixed 50% lightness in HSL, so it will differ slightly from your original HEX value unless that value already sits at exactly 50% lightness.
Yes, each shade row shows its HEX and RGB equivalent, and clicking any swatch or value copies the HEX code to your clipboard.
