The Variations section generates three useful families from the selected color: shades, tints, and tones.
- Shades move the color toward black and are useful for dark states, deep backgrounds, and strong text.
- Tints move the color toward white and are useful for soft backgrounds, badges, and subtle surfaces.
- Tones move the color toward gray and are useful when the original color feels too intense.
How to use them
Click a variation swatch to copy it. Use a shade for hover or pressed states, a tint for background surfaces, and a tone when you need a calmer version of the same color.