Change color lightness
JavaScript, String, Browser, Regexp · Oct 31, 2020

Changes the lightness value of an hsl()
color string.
- Use
String.prototype.match()
to get an array of 3 strings with the numeric values. - Use
Array.prototype.map()
in combination withNumber
to convert them into an array of numeric values. - Make sure the lightness is within the valid range (between
0
and100
), usingMath.max()
andMath.min()
. - Use a template literal to create a new
hsl()
string with the updated value.
const changeLightness = (delta, hslStr) => { const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number); const newLightness = Math.max( 0, Math.min(100, lightness + parseFloat(delta)) ); return `hsl(${hue}, ${saturation}%, ${newLightness}%)`; }; changeLightness(10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 60%)' changeLightness(-10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 40%)'