← All text tools

Tints and shades generator

Lighter tints, darker shades and softer tones of any colour, with CSS variables.

  • Free
  • No sign-up
  • Works on any device

About Tints and shades generator

Start from one colour and get lighter tints (mixed with white), darker shades (mixed with black) and softer tones (mixed with grey). The steps come as CSS variables ready for a stylesheet. These families are the basis of hover states, borders, backgrounds and disabled buttons.

How to use Tints and shades generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

What is the difference between a tint and a shade?

A tint is a colour mixed with white, so it gets lighter. A shade is the colour mixed with black, so it gets darker. A tone is mixed with grey.

Is Tints and shades generator free?

Yes. Tints and shades generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools