Alterar a Luminosidade de uma Cor HSL com JavaScript - Tutorial e Prática

Introdução

Neste laboratório, exploraremos como alterar a luminosidade de uma string de cor hsl() usando JavaScript. Ao alavancar a manipulação de strings, métodos de array e funções matemáticas, aprenderemos como modificar o valor da luminosidade, garantindo que ele permaneça dentro da faixa válida de 0 a 100. Essa habilidade será útil no desenvolvimento de aplicações web que exigem manipulações dinâmicas de cores com base nas interações do usuário.

Como Alterar a Luminosidade de uma Cor HSL

Para alterar o valor da luminosidade de uma string de cor hsl(), siga estes passos:

Abra o Terminal/SSH e digite node para começar a praticar a codificação.
Use String.prototype.match() para obter um array de três strings com os valores numéricos da string hsl().
Use Array.prototype.map() em combinação com Number para converter as strings em um array de valores numéricos.
Certifique-se de que o valor da luminosidade esteja dentro da faixa válida (entre 0 e 100) usando Math.max() e Math.min().
Use um template literal para criar uma nova string hsl() com o valor de luminosidade atualizado.

Aqui está um trecho de código de exemplo que implementa esses passos:

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}%)`;
};

Você pode então chamar a função changeLightness() com um valor delta e uma string hsl() para obter uma nova string hsl() com o valor de luminosidade atualizado. Por exemplo:

changeLightness(10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 60%)'
changeLightness(-10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 40%)'

Alterar a Luminosidade da Cor

Introdução

Como Alterar a Luminosidade de uma Cor HSL

Resumo