Color Shades Generator
Generate a 10-step shade scale from any base color by mixing toward black.
Loading tool…
About this tool
Design systems need more than one version of a brand color — hover states, borders, and dark surfaces all want darker variants. This generator mixes your base color toward black in 10 even steps.
Click any step to copy its hex, or copy the whole scale at once for your design tokens.
How to use
- Enter or pick your base color.
- Browse the 10-step shade scale.
- Click any shade to copy its hex.
Frequently asked questions
A shade mixes the color toward black (darker); a tint mixes it toward white (lighter). This tool makes shades — see the tints generator for the lighter direction.
Each step blends the base RGB channels toward 0 (black) by an increasing fraction, from 0% at step 1 to 100% at step 10, which is pure black.
Hover and active states, gradients, dark-mode surfaces, and data-visualization ranges all need consistent darker variants of a base color.
Related tools
Color Palette Generator
Enter a base color to generate complementary, analogous, triadic, and more palettes.