Change color lightness

OSCC · 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 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%)'

Recommended snippets & collections

  • Working with color in JavaScript

    Snippet collection

    Working with color in JavaScript requires some understanding of color formats and conversions. Luckily, this snippet collection's got you covered.

  • HSL to object

    JavaScript, String

    Converts an hsl() color string to an object with the values of each color.

  • HSL to array

    JavaScript, String

    Converts an hsl() color string to an array of values.

  • RGB to object

    JavaScript, String

    Converts an rgb() color string to an object with the values of each color.