Design Studio · Bench
Shades & Tints
Generate a tonal scale from any color
About this bench
About Shades & Tints
Generate a full tonal scale of shades and tints from any colour — perfect for design systems.
Input
Adjust the visual controls or paste the design value requested by the bench.
Result
A live preview plus a value or CSS snippet you can copy into your own work.
Limits
Rendering can vary between browser engines. Check the result in every browser and accessibility mode your product supports.
How to use Shades & Tints
- 01Pick a base colour.
- 02See the lighter tints and darker shades.
- 03Adjust the steps if needed.
- 04Copy the colour values.
Frequently asked questions
Is it free?
Yes — it is free with no sign-up, no watermark and no account-based quota. Your browser, device memory and the bench's stated file limits still determine how much it can process at once.
Is my data private?
Nothing is uploaded. This tool runs entirely in your browser, so your data is processed on your own device and never sent to a server.
What is the difference between a tint and a shade?
A tint mixes the base colour toward white, while a shade mixes it toward black; the tool generates both sides of the tonal scale.