HSL Tint / Shade Generator
Adjust Hue, Saturation, and Lightness to generate tints and shades. Click any swatch to copy its color code.
Tints (add white)
Tones (add gray)
Shades (add black)
Frequently Asked Questions
Learn more about Tints, Shades, and HSL.
What is an HSL Generator?
It is a specialized tool that allows you to start with a base color and systematically generate lighter tints and darker shades by automatically stepping the Lightness (L) value up or down.
What are Tints and Shades?
A tint is created by adding white to a pure hue, increasing its lightness. A shade is created by adding black, decreasing its lightness. Utilizing tints and shades is the best way to create a flawless monochromatic palette for UI design.
How many swatches can I generate?
By default, the tool mathematically calculates a smooth ramp of 9 distinct tints and 9 distinct shades. This ensures you have perfectly spaced intermediate steps for interactive states like hovers, borders, and backgrounds.