Lighten or Darken a Color
Pick a starting color, then directly adjust its HSL lightness component with the slider (a value from 0 to 100, not a relative percentage) to lighten or darken it. 100% local processing in your browser — nothing is sent to a server.
How It Works
Unlike a simple mix with white or black, adjusting the lightness (L) of the HSL model keeps the original hue (H) and saturation (S) exactly intact: the color preserves its chromatic identity across the whole slider, from absolute black (L=0) to absolute white (L=100), passing through the pure hue in the middle (L=50). This is the method used by most professional color pickers to generate consistent shades of a single hue.
Why doesn't this slider show a lightening percentage?
A relative percentage (“+20% brightness”) depends on the starting value and quickly becomes ambiguous near the extremes. Here, the slider directly sets the absolute value of L in HSL space (0 to 100), giving a predictable and repeatable result regardless of the starting color.
Do hue (H) and saturation (S) change too?
No, only the lightness is changed. If you want a more or less vivid color, change the starting color via the picker, which redefines hue and saturation before you adjust lightness.
No data leaves your device: the HSL calculation runs entirely in JavaScript in your browser.