Handitab

Color Shades Generator

Generate 3 to 15 shades of one base color from light to dark, keeping its hue and saturation, with a HEX code and swatch for each step.

About Color Shades Generator

A shade scale is a series of lighter and darker versions of one color, used for backgrounds, borders, and hover states in a design system. This tool converts the base color to HSL, keeps its hue and saturation, and spreads lightness evenly from 95 percent down to 10 percent over 3 to 15 steps. The base color itself appears in the scale only if its lightness falls on one of those steps.

How to use Color Shades Generator

  1. Fill in "Base color" and "Number of steps".
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about Color Shades Generator

What is the difference between a tint, a shade, and a tone?

In color theory a tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with grey. This tool varies HSL lightness, giving tints at the light end and shades at the dark end.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Animation GeneratorGenerate a CSS keyframe animation such as fade, slide, zoom, bounce, pulse, shake, or spin with duration, delay, and easing options.CSS Background Pattern GeneratorGenerate a repeating CSS background pattern (stripes, dots, grid lines, checkerboard, or diagonal lines) from two colors and a size.CSS Checkbox GeneratorGenerate CSS for a custom styled checkbox with your own size, corner radius, and colors that still uses a real, accessible input element.CSS Clip Path GeneratorPick a shape such as a triangle, hexagon, star, arrow, or circle and get the matching CSS clip-path value with a live preview.CSS Cubic Bezier GeneratorSet the two control points of a cubic-bezier() easing curve, see the curve drawn, and copy the CSS transition-timing-function.CSS Gradient GeneratorGenerate a CSS linear or radial gradient from two colors and an angle with a live preview, then copy the background declaration.