toHSLObject

JavaScript, String, Browser, Regexp

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

  • Use String.prototype.match() to get an array of 3 string with the numeric values.
  • Use Array.prototype.map() in combination with Number to convert them into an array of numeric values.
  • Use array destructuring to store the values into named variables and create an appropriate object from them.
const toHSLObject = hslStr => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
  return { hue, saturation, lightness };
};
toHSLObject('hsl(50, 10%, 10%)'); // { hue: 50, saturation: 10, lightness: 10 }

Recommended snippets & collections

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

  • toRGBObject

    JavaScript, String

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

  • toHSLArray

    JavaScript, String

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

  • changeLightness

    JavaScript, String

    Changes the lightness value of an hsl() color string.