Tint, Tone and Shade Generator

Palette

Why Use the Tint, Tone and Shade Generator?

This tint and tone generator shows the three classic ways to vary a color side by side: tints mixed with white, tones mixed with gray and shades mixed with black. Each row steps through 15, 30, 45, 60 and 75 percent, so you can compare a soft pastel, a muted grown-up version and a deep variant of the same color in seconds. It is useful for painters planning mixes, designers building subtle UI states and anyone learning color theory.

How to Use the Tint, Tone and Shade Generator

1. Pick your base color with the picker or type a HEX, rgb(), hsl() or name value into the text field.
2. Read the Tints row to see the color mixed with white at 15, 30, 45, 60 and 75 percent.
3. Compare the Tones row, mixed with mid gray #808080, and the Shades row, mixed with black, at the same five steps.
4. Click any swatch to copy its HEX, or copy the CSS custom properties to use every variation in your project.

Best For

• Choosing a pale tint for alert or card backgrounds that still clearly belongs to the brand color.
• Finding a muted tone for large areas where the full-strength color would feel too loud.
• Picking a shade for text, borders or pressed button states that matches the base hue.
• Studying or teaching color theory with real values for tints, tones and shades of one color.

Pro Tip

For a readable single-hue message box, take three values from this tool: a light tint (60 to 75 percent) for the background, the base color for the border or icon, and a deep shade (60 to 75 percent) for the text. Because all three share the same hue, the component looks intentional, and the large lightness gap between the tint and the shade usually gives strong contrast. Still confirm the text pair reaches at least 4.5:1 in a contrast checker.