Shades Generator
FreeGenerate tints and shades from any base color in a 10-step scale
shadestintsgeneratescale
All Color ToolsRelated tools
How it works
1
Select
Pick a base color using the color picker or enter a specific value.
2
Generate
The tool calculates a range of lighter tints and darker shades from your base color.
3
Copy
Click any shade to copy its value, or export the full scale for use in your design system.
Frequently asked questions
How are the shades calculated?+
The tool adjusts the lightness component in HSL color space to produce evenly spaced steps from near-white to near-black while keeping the same hue and saturation.
How many shades does it generate?+
It generates a default scale of 10 shades from lightest to darkest. You can adjust the number of steps to create finer or coarser scales.
Is this useful for building a design system?+
Yes. Generating a consistent shade scale for each brand color is a standard practice when building design tokens for a design system.
Does the tool work offline after loading?+
Yes. All shade calculations run locally in your browser. No server requests are made after the page loads.
What is the difference between a tint and a shade?+
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. This tool generates both from your base color.