Color Shade Generator
Generate shades, tints & tones with a visual grid.
About Color Shade Generator
Enter any color to build a professional scale of shades, tints or tones. Pick a step from the visual grid to copy its HEX, RGB, HSL and HSV, or export the whole palette as CSS variables.
The Color Shade Generator turns one base color into a balanced design-system scale of shades, tints and tones with copyable HEX/RGB/HSL/HSV and CSS-variable export.
Frequently asked questions
A shade mixes a color with black, a tint mixes it with white, and a tone mixes it with gray. This tool generates all three as even scales.