AbraCalc

Color Shades Generator

Generate a palette of 5 lighter tints and 5 darker shades from any hex color.

Embed this tool on your site

How to use this tool

  1. Enter your base hex color.
  2. Choose the number of steps (1–10) in each direction.
  3. The output lists tints (lighter), the base, then shades (darker).

Enter a hex color to generate a full palette of lighter tints and darker shades, useful for building design systems.

Frequently asked questions

What is the difference between a tint and a shade?
A tint is a color mixed with white (lighter); a shade is a color mixed with black (darker). A tone mixes with grey.
How are the steps calculated?
Each step linearly interpolates the RGB channels toward white (for tints) or black (for shades) by an equal fraction.

References & sources