Convertisseur HSL → RGB

HSL décrit une couleur par la teinte sur la roue, la saturation comme le caractère vif de la couleur, et la luminosité comme sa proximité du noir ou du blanc. Ce convertisseur prend trois nombres — teinte en degrés de zéro à trois cent soixante, saturation et luminosité en pourcentages de zéro à cent — et renvoie des canaux RGB entiers, une chaîne CSS rgb() et un code hex en minuscules, en suivant le même chemin de forme fermée que les navigateurs utilisent pour hsl() en CSS. Une teinte hors de l'intervalle fermé de zéro à trois cent soixante est rejetée avec une erreur de validation claire afin que les jetons erronés ne s'enroulent jamais en silence.

Comment HSL se projette sur le rouge, le vert et le bleu

La teinte est un angle sur la roue des couleurs : zéro degré est un rouge pur, cent vingt un vert pur, deux cent quarante un bleu pur, et trois cent soixante referme le cercle sur le rouge. La saturation étire un gris de la luminosité choisie vers la couleur pleinement chromatique à cette teinte ; zéro pour cent de saturation est toujours un gris, noir ou blanc achromatique qui ne dépend que de la luminosité.

La luminosité va du noir à zéro pour cent, passe par le ton moyen pur près de cinquante pour cent, jusqu'au blanc à cent pour cent.

L'algorithme de conversion utilisé ici suit le CSS Color Module et la formulation W3C : on met saturation et luminosité à l'échelle de l'intervalle unitaire, on calcule les bornes de chroma intermédiaires p et q à partir de la luminosité et de la saturation, puis on échantillonne trois positions décalées sur le cercle unitaire avec le classique auxiliaire hue2rgb pour les canaux rouge, vert et bleu.

Quand la saturation est nulle, les trois canaux s'effondrent sur le même gris dérivé de la luminosité, ce qui est à la fois un raccourci de performance et un gain de stabilité numérique. Chaque canal de l'intervalle unitaire est multiplié par deux cent cinquante-cinq et arrondi à l'entier le plus proche pour que le résultat corresponde aux attentes des framebuffers huit bits et de CSS rgb().

Saturation et luminosité doivent chacune se situer entre zéro et cent pour cent inclus, comme les pourcentages que les designers saisissent dans les feuilles de style.

Ce que vous envoyez et ce que vous recevez

Envoyez trois nombres finis sous les champs h, s et l. Le champ h est la teinte en degrés et est obligatoire ; il doit se situer entre zéro et trois cent soixante inclus. Les champs s et l sont la saturation et la luminosité en pourcentages de zéro à cent.

Lorsque la teinte est hors de la bande légale, la réponse explique que h doit être entre zéro et trois cent soixante degrés afin que le client puisse borner ou corriger le jeton avant de réessayer.

En cas de succès, la réponse renvoie les valeurs h, s et l nettoyées, des canaux entiers r, g et b chacun de zéro à deux cent cinquante-cinq, une chaîne rgb imprimable de la forme rgb(R, G, B), une chaîne hex en minuscules de la forme #rrggbb, et une courte note de formule nommant le chemin CSS et W3C.

Les contrôles classiques incluent le rouge pur avec teinte zéro, saturation cent et luminosité cinquante donnant deux cent cinquante-cinq, zéro, zéro ; le gris moyen avec n'importe quelle teinte, saturation zéro et luminosité cinquante donnant cent vingt-huit sur chaque canal ; et les verts profonds près de la teinte cent vingt avec forte saturation et luminosité modeste.

Où la conversion HSL vers RGB apparaît dans le travail réel

Les design systems stockent les rampes de marque et les jetons sémantiques en HSL afin que les équipes produit puissent faire tourner la teinte pour les thèmes tout en gardant des marches de luminosité favorables au contraste ; la livraison vers les propriétés personnalisées CSS, les couleurs natives mobiles et les styles de remplissage de canvas exige encore un RGB et un hex fiables.

Les bibliothèques de visualisation de données génèrent des palettes catégorielles en faisant progresser la teinte à saturation et luminosité fixes, puis convertissent chaque pas en RGB pour les moteurs SVG, WebGL et de graphiques. Les modèles d'e-mail et les générateurs PDF n'acceptent souvent que hex ou rgb(), si bien que les pipelines d'automatisation marketing convertissent une fois les spécifications HSL de marque et mettent en cache le triplet de canaux.

Les flux d'accessibilité calculent les ratios de contraste sur RGB ou luminance relative ; partir de HSL pour des ajustements perceptuels de luminosité aboutit toujours aux valeurs de canaux que ce convertisseur fournit. Les cursus et les cours de bootcamp enseignent les modèles de couleur côte à côte et ont besoin d'un oracle de confiance unique qui correspond au rendu CSS pour les corrigés.

Si vous avez ensuite besoin d'une conversion multi-format entre HEX, LAB et CMYK, de l'inverse RGB vers HSL ou de contrôles de contraste WCAG, traitez-les comme des intentions de recherche et des pages d'atterrissage distinctes plutôt que de surcharger cette page dédiée au convertisseur HSL vers RGB.