Color Shades Generator
Turn any color into a complete scale of tints and shades — from near-white to near-black — and copy any HEX code with one click. Free and instant, everything runs in your browser.
Lightest tint on the left, darkest shade on the right — click any swatch to copy its HEX code.
How to generate shades of a color
- Pick a base color. Use the color picker or type a HEX code (3 or 6 digits, with or without the #).
- Choose the scale size. Set how many steps to generate in each direction — 6 steps each way builds a 13-color scale including your base.
- Copy or export. Click any swatch to copy its HEX code, copy the whole list at once, or download the scale as ready-to-use CSS custom properties or JSON.
About this tool
This free color shades generator builds a complete monochromatic scale from a single color: tints are created by mixing the base with increasing amounts of white, and shades by mixing it with increasing amounts of black, in even steps that stop just short of pure white and pure black. That is exactly how design-system color ramps (like the 50–900 scales in Tailwind CSS or Material Design) are structured, so you can use the output for button states, backgrounds, borders, charts, heat maps and dark-mode variants that all stay on brand.
The CSS export gives you numbered custom properties from lightest to darkest with the base marked, and the JSON export includes each color's HEX, RGB and mix percentage. Everything is generated locally in your browser — nothing is uploaded. To fine-tune a single tint or shade by an exact percentage, try the Lighten Color and Darken Color tools, or mix two different colors with Blend Colors.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is your color mixed with white, a shade is your color mixed with black, and a tone is your color mixed with gray. This tool generates the tints and shades; together they form a monochromatic color scale.
How are the steps calculated?
With n steps each way, step i mixes the base color with white (or black) at a ratio of i ÷ (n + 1). The scale is evenly spaced and never reaches pure white or pure black, so every swatch keeps a trace of the original hue.
How do I use the CSS variables export?
The downloaded file contains a :root block with numbered variables from lightest to darkest, e.g. --shade-1 through --shade-13, with the base color marked by a comment. Paste it into your stylesheet and reference the variables with var(--shade-7).
Why do very light tints of my color look almost identical?
Near white, the human eye distinguishes small differences poorly, and rounding to 8-bit RGB channels can make adjacent steps land on nearly the same value. Reduce the number of steps to spread the scale out, or start from a more saturated base color.