Tint and Shade Generator
Color scale
Tints · mixed with white
Base · your color
Shades · mixed with black
About
In color theory, tints are created by mixing a color with white and shades by mixing it with black. This tool mixes the sRGB channel values in even 10% steps, which gives a simple, predictable scale - but not a perceptually uniform one, so some steps can look like bigger jumps than others.
How to use
1.
Enter a base color as hex, rgb() or hsl(), or click the swatch to pick one
2.
Browse the Tints (mixed with white), your Base color and the Shades (mixed with black), each labelled with its percentage
3.
Pick HEX, RGB or HSL in the Color scale header, then tap a swatch to copy its value, or click Copy all for the whole scale
Common uses
▸
Building a complete color scale for a design system or component library
▸
Finding a hover, active, or disabled state color for a UI element
▸
Exploring lighter and darker variants of a brand color
Frequently asked questions
How is each step calculated?
Each red, green and blue channel is moved toward 255 (for a tint) or 0 (for a shade) by the step percentage, then rounded. For #3B82F6, Tint 20% is #629BF8 (20% white) and Shade 20% is #2F68C5 (20% black).
How many steps are generated?
The tool generates 9 tints progressively lighter than the base color and 9 shades progressively darker, in 10% steps. With your base color in the middle, that is a 19-step scale from near-white to near-black.
Is this the same as opacity?
No. Tints and shades mix the color with white or black and stay fully opaque. Reducing opacity makes a color transparent over whatever is behind it, which looks different on colored backgrounds.
Can I copy individual color values?
Tap any swatch (or focus it with Tab and press Enter) to copy its value in the format selected in the Color scale header - HEX, RGB or HSL. Copy all copies the whole 19-step scale, lightest to darkest with your base color in the middle, one value per line.
Is my data sent to a server?
No. All generation runs in your browser, and no color data is sent anywhere.