Create progressively darker variations of any color

Create darker HSL variants by stepping lightness downward from a base colour.

freeworks offlinenothing uploaded
ToolColor Shades
Input
Output
—

How it works

The base becomes HSL and each shade lowers lightness by a fraction of its current value before converting back to RGB and hex. Hue and saturation remain constant while count controls steps.

  • Five steps form the initial scale.
  • The scale is a screen-lightness model, not pigment mixing.

Worked example

Shades of Blue
Generate 5 progressively darker shades of blue
Input
											#3498DB
Output
												#3498DB
#217BB8
#185D8A
#103E5C
#081F2E

When to use this

Design systems build darker states, charts derive lower-lightness variants, and lessons compare HSL steps.

Edge cases

  • Black cannot become visibly darker.
  • Low-lightness colours quickly converge.
  • HSL lightness is not perceptual brightness.

References