Color Shades and Tints Generator
Pick a base hex color and get a scale of tints (mixed toward white) and shades (mixed toward black) in equal steps. Choose how many steps you want, then copy any swatch. Everything runs in your browser.
How to generate color shades
- Pick a base color with the swatch or type a hex code.
- Set how many tints and shades you want in each direction.
- Copy any tint or shade hex straight into your CSS or design tool.
Examples
Shades of red
#ff0000 with 4 shades
#bf0000, #800000, #400000, #000000
Tints of red
#ff0000 with 4 tints
#ff4040, #ff8080, #ffbfbf, #ffffff
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a color mixed with white to make it lighter, while a shade is a color mixed with black to make it darker. This tool generates both from a single base color.
How are the steps calculated?
Each step is a linear blend in RGB. For shades the base color is mixed toward black in equal amounts, and for tints it is mixed toward white, so the last step is pure black or pure white.
How many shades should I use?
Five tints and five shades is a common choice and gives a balanced scale, but you can pick any number to make a finer or coarser palette.
Can I use shorthand hex codes?
Yes. Three-digit hex like #f00 is expanded automatically, and a leading hash is optional.
Is my color sent to a server?
No. The whole palette is generated in your browser, so your color values never leave your device.
Related tools
Color Mixer
Mix two hex colors online and get the blend. Set the mix ratio with a slider to find the perfect in-between color, then copy the hex result.
Complementary Color Calculator
Find the complementary color of any hex code online, plus triadic and analogous colors. Pick a color and get a matching palette to copy.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.
Binary to Hex
Convert binary to hexadecimal online. Paste a binary number and get exact hex, with optional uppercase. Handles huge values. Runs in your browser.
Binary Translator
Translate text to binary and binary back to text online. UTF-8 accurate, handles emoji and accents, with a copy button. Runs in your browser, nothing uploaded.
Celsius to Fahrenheit
Convert Celsius to Fahrenheit instantly. Type a temperature in C and get F, with the formula and a quick reference table. Runs in your browser.