Menu

gitpiper

changeLightness javascript Code Snippet in 2023

stringbrowserregexpintermediate

Last Updated: 4 February 2023

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.
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%)'

javascript snippet similar to changeLightness For You in February 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️