Color shades generator
Pick the base color. The tool builds 11 shades, from almost white to almost black, keeping the hue. Tap a shade to copy its code.
How to useShades of a color
Available in: 
Color shades generator: what it is for
Pick a color and the tool generates 11 shades, from almost white to almost black, calculated in the OKLCH color space: the hue stays the same and the lightness changes at each step. The base color goes in, unchanged, at the step with the closest lightness.
Tap a shade to copy its HEX, or copy all the CSS variables or the object for tailwind.config with the name you choose.
How to use
- Pick the base color in the picker or type the HEX.
- Give the color a name.
- Copy a shade, the CSS variables or the scale for Tailwind.
When to use it
- Creating the palette for a website or design system.
- Getting light shades for backgrounds and dark ones for text in the same color.
- Setting up your brand color in Tailwind.
Frequently asked questions
How are the shades calculated?
In the OKLCH color space, which follows how the eye perceives color: the tool keeps the base color's hue, changes the lightness at each step and reduces saturation at the ends so light and dark shades don't look garish.
Where does my color sit on the scale?
The base color is placed on the step with the closest lightness, and that step uses exactly your color. It's marked.
How do I use it in Tailwind or CSS?
Copy the CSS variables (--color-50 to --color-950) or the object for tailwind.config. Change the color name in the name field.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.