Skip to main content
Book Consultation →
Create colors100% FreeInstant

Color Shades and Tints Generator: Build a Color Scale

This free generator turns one color into a full scale of tints (mixed with white), shades (mixed with black) or tones (mixed with grey), in 5, 7, 9 or 11 steps with HEX codes.

By Debmedia Technologies LLP · Kolkata, India · Updated

What Is It and When Do You Need It?

A color scale gives you lighter and darker versions of one color that always go together. They are used for backgrounds, borders, hover states and charts. Making them by eye gives uneven jumps, so a generator is faster and more consistent.

Pick the scale type and the number of steps, then copy the list of HEX codes.

How to Use This Tool

  1. Type the base color.
  2. Choose tints, shades, tones or both.
  3. Choose the number of steps.
  4. Press Generate and copy the codes.

How the Calculation Works

Each step mixes the base color with the target (white, black or mid grey) in equal amounts along a straight line in RGB. With tints and shades together, the scale runs from near white through the base color to near black.

Worked Example

With #1d4ed8 and 5 shade steps, the scale runs from the base blue to a very dark navy. With 9 tint and shade steps, the middle step is the base color itself.

Common Uses

  • Design system color scales.
  • Button hover and active colors.
  • Charts and graphs with one hue.
  • Backgrounds and borders.

Tips and Common Mistakes

  • Keep a note of which step is the base.
  • Test text on each background with the contrast checker.
  • Round to named steps such as 100, 200 and 300 for CSS variables.

Next, you may need the color palette generator, color mixer, color contrast checker, gradient generator.

Everything runs in your browser. Nothing you type is uploaded, stored or sent to any outside service.

Frequently Asked Questions

A tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with grey.
Evenly in a straight RGB mix between the color and the target. The base color is kept in the list.
Yes. A scale like 50 to 900 is the base of most design systems. Check text contrast on each step before using it.
Mixing with black lowers saturation as perceived by the eye. For richer darks, shift the hue slightly or raise the saturation in an HSL tool.

Disclaimer: results are calculated in your browser from the numbers you enter. Check important results before you rely on them for money, health, safety or legal decisions.