Generate tints, shades and tones from any HEX, RGB, CMYK or HSV color.
How to use Color Tone Generator
Enter a color in any format or pick one.
Choose how many steps to generate.
Click a swatch to copy it, or copy the color in another format.
Worked example
Starting from #3B82F6, the tints give light backgrounds, the shades give hover and text colors, and the tones give muted borders for the same brand blue.
What is the difference between tints, shades and tones?
Tints mix the color with white, shades mix it with black, and tones mix it with gray.
Can I enter CMYK or HSV?
Yes. Type cmyk(0, 50, 100, 0) or hsv(30, 100%, 100%) and the color is converted for you.
Put this guide into practice
Color Tone Generator — Generate tints, shades and tones from any HEX, RGB, CMYK or HSV color.