Conversion de HSL en RGB avec JavaScript

Introduction

Dans ce laboratoire, nous allons plonger dans le monde de la programmation JavaScript et découvrir la conversion de HSL en RGB. Vous allez être présenté à la formule de conversion de HSL en RGB et à la manière d'utiliser cette formule pour convertir des tuples de couleurs HSL au format RGB. À la fin de ce laboratoire, vous aurez acquis une compréhension plus approfondie de la manière de travailler avec les couleurs en JavaScript et de manipuler les valeurs HSL pour créer de belles palettes de couleurs.

Convertir HSL en RGB à l'aide de JavaScript

Pour convertir un tuple de couleur au format HSL en RGB, suivez ces étapes :

1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
2. Utilisez la formule de conversion de HSL en RGB pour convertir le tuple de couleur au format approprié.
3. Assurez-vous que les paramètres d'entrée sont dans les plages suivantes : H : [0, 360], S : [0, 100], L : [0, 100].
4. Les valeurs de sortie devraient être dans la plage [0, 255].

Voici le code JavaScript pour la formule de conversion de HSL en RGB :

const HSLToRGB = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = (n) => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = (n) =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};

Pour utiliser la fonction, fournissez les valeurs de H, S et L en tant qu'arguments :

HSLToRGB(13, 100, 11); // [56.1, 12.155, 0]

Résumé

Félicitations ! Vous avez terminé le laboratoire sur la conversion de HSL en RGB. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.