How to use Shades and Tints Generator
- Choose a base color.
- Choose how many steps you want on each side.
- Copy the HEX codes.
About this tool
A tint mixes the color with white and a shade mixes it with black. A scale of tints and shades is the foundation of most design system color tokens, for example blue-100 to blue-900.
Mixing is done in RGB space with evenly spaced steps.
Frequently Asked Questions
- What is the difference between a tint, a tone and a shade?
- A tint adds white, a shade adds black, and a tone adds gray.
- How many steps do design systems use?
- Nine or ten steps from 50 to 900 are common.
Related tools
- Color Palette GeneratorBuild a harmonious palette starting from a single color.
- Color Contrast CheckerTest whether your text and background colors are readable for everyone.
- Random Color GeneratorPress Generate to see a fresh set of random colors.
- CSS Gradient GalleryPick a ready-made gradient and copy its CSS.
- Color Picker from ImageExtract the main colors from a photo, or click any pixel to get its code.
- Color PickerChoose a color and copy its code in every common format.