Color shades generator

Generate tints and shades of a color, ready for CSS.

  • Development
  • 100% free
  • No sign-up
  • Runs in your browser
Color shades generator
Reset

What is the color shades generator?

The color shades generator mixes a color with white to create tints and with black to create shades, in as many steps as you need. Click any swatch to copy its HEX code, or copy the whole palette as CSS custom properties.

Tints and shades of one brand color give a design consistent hover states, backgrounds, borders and text colors.

How to use the color shades generator

  1. 1Pick or type a color.
  2. 2Choose the number of steps.
  3. 3Click a swatch to copy it, or copy the CSS variables.

Features

Tints and shades

Lighter and darker variations in equal steps.

Click to copy

Every swatch copies its HEX code.

CSS variables

The palette as custom properties.

Live

Updates while you change the color.

Frequently asked questions

What is the difference between a tint and a shade?

A tint is a color mixed with white; a shade is a color mixed with black.

How many steps should I use?

9 or 10 steps match the scales used by most design systems.

Can I use RGB or HSL input?

Yes, HEX, RGB, HSL and common color names are accepted.

Will the shades pass contrast checks?

Not automatically. Check text colors with the color contrast checker.