diff --git a/snippets/changeLightness.md b/snippets/changeLightness.md new file mode 100644 index 000000000..559957b1e --- /dev/null +++ b/snippets/changeLightness.md @@ -0,0 +1,29 @@ +--- +title: changeLightness +tags: string,browser,regexp,intermediate +--- + +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 with `Number` to convert them into an array of numeric values. +- Make sure the lightness is within the valid range (between `0` and `100`), using `Math.max()` and `Math.min()`. +- Use a template literal to create a new `hsl()` string with the updated value. + +```js +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}%)`; +}; +``` + +```js +changeLightness(10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 60%)' +changeLightness(-10, 'hsl(330, 50%, 50%)'); // 'hsl(330, 50%, 40%)' +```