Color Shades & Tints Generator
Generate tints and shades of any color for a full light-to-dark scale.
Pick a base color and get a full range of tints (mixed toward white) and shades (mixed toward black). Handy for building UI palettes, hover and active states, or a light-to-dark scale from one brand color. Click any swatch to copy it. Runs entirely in your browser.
About Color Shades & Tints Generator
Pick a base color and get a scale of tints (steps toward white) and shades (steps toward black). It's the quickest way to turn one brand color into a usable palette - hover and active states, borders, backgrounds, or a full 50-to-900 style scale. Choose how many steps you want on each side, switch the output between HEX, RGB, and HSL, and click any swatch to copy it. Everything runs in your browser.
Tints vs shades
A tint is your color mixed with white, so it gets lighter and softer. A shade is your color mixed with black, so it gets darker and deeper. Together they give you a single-hue scale that runs from very light to very dark, with your original color sitting in the middle. It's the same idea behind the numbered color scales in design systems like Tailwind or Material.
How the steps work
Each step is mixed an even amount toward white or black, spread between your base color and pure white or pure black. Ask for 5 steps and you get 5 tints above the base and 5 shades below it. More steps means finer gradations. The base color always stays exactly as you entered it.
When this helps
- Building hover, active, and disabled states from one button color
- Generating a full color scale from a single brand color
- Picking a lighter background tint and a darker border from the same hue
- Creating a monochromatic palette that's guaranteed to harmonize
- Copying the whole scale at once into your CSS variables or design tokens