Color Shades & Tints — free online tool

You picked one nice color for your design, and now you need lighter and darker versions of it that still look like the same family. Mixing those by eye is fiddly, and you never quite know if they match. We added a free tool that does it for you — Color Shades & Tints — right in your browser.

What it does

Enter a base HEX color and you get a full 50–900 scale, the same kind you see in Tailwind: lighter tints stepping toward white, darker shades stepping toward black. Each step is a swatch, and clicking any swatch copies its HEX code so you can paste it straight into your code or design tool.

Nothing leaves your device

Everything runs inside your browser. Your color is never uploaded, and nothing is saved on a server. When you close the tab, it's gone — there's no account and no history kept anywhere.

How to use it

  1. Open Color Shades & Tints and type or paste your base HEX color.
  2. Look over the 50–900 scale it builds, from the palest tint to the deepest shade.
  3. Click the swatch you want to copy its HEX, then paste it where you need it.

It's free with no limit. There are more small tools on the Apps page.

Get new posts

Soon you'll be able to drop your email and get new posts — no account, no spam.

Email sign-up isn't live yet — nothing is collected for now.