Tint, shade and tone
A tint is your colour mixed with white; a shade is the same colour mixed with black. This tool interpolates in RGB, so step i of n moves each channel a fraction i / (n + 1) of the way toward 255 for tints or toward 0 for shades. A third variant, a tone, mixes with grey and desaturates instead — useful for muted UI states.
Once you are done here, the colour palette generator picks up where this leaves off.
Turning a ramp into a design system
Most component libraries need roughly nine steps: two or three tints for backgrounds and hover fills, the base for primary actions, and three or four shades for pressed states, borders and text on light surfaces. Name them numerically (100, 200, 300...) rather than by adjective so the scale survives a rebrand. If you would rather control the ramp by lightness percentage, generate the steps in HSL with the HSL to hex converter.
For a closely related job, the colour picker does it in one click.
Watch the far ends
The lightest tints of a saturated blue can look faintly purple, and the darkest shades often go muddy because all three channels approach zero at different rates. Always verify text steps against your surfaces with the contrast checker instead of assuming a ramp is accessible.
All the blending happens in your browser, so nothing you enter is uploaded or stored.
Frequently asked questions
- What is the difference between a tint and a shade?
- A tint mixes the colour with white to lighten it; a shade mixes it with black to darken it.
- How many steps should a palette have?
- Nine to eleven is typical — enough for backgrounds, borders, fills, hovers and text without redundant near-duplicates.
- Why do my darkest shades look muddy?
- RGB blending toward black reduces saturation as well as lightness. Darkening in HSL keeps the hue purer.
- Can I use more than five steps?
- Yes, the tool accepts 2 to 10 steps in each direction, giving up to 21 colours.
- Do the tints stay accessible as text colours?
- Not automatically — a tint two steps above your base is usually already too light for body copy on white. Only the darker half of a ramp is safe for text; check each candidate against its real background rather than trusting the step number.