HSL to Array

Introduction

In this lab, we will be exploring how to convert an hsl() color string to an array of values using JavaScript. We will be using a combination of regular expressions and array methods to extract the numeric values from the string and convert them into an array of numeric values. This lab will help you understand how to work with color values in JavaScript and improve your skills with regular expressions and array manipulation.

Skills Graph

Convert HSL to Array

To convert an hsl() color string to an array of values, follow these steps:

1. Open the Terminal/SSH and type node to start practicing coding.
2. Use String.prototype.match() to get an array of 3 strings with the numeric values.
3. Use Array.prototype.map() in combination with Number to convert them into an array of numeric values.

Here's the code to convert an hsl() color string to an array of numeric values:

const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);

Example usage:

toHSLArray("hsl(50, 10%, 10%)"); // [50, 10, 10]

Summary

Congratulations! You have completed the HSL to Array lab. You can practice more labs in LabEx to improve your skills.