Convertisseur HSL vers HWB

HSL décrit une couleur par la teinte sur la roue, la saturation comme le caractère vif du mélange, et la luminosité comme sa proximité du noir ou du blanc. HWB reprend cette même teinte, puis nomme combien de blanc et de noir se mêlent à la teinte pure. Les designers qui choisissent déjà les couleurs en HSL ont souvent besoin de HWB pour écrire les fonctions hwb() du CSS Color Module, parler aux outils d'illustration qui exposent des curseurs de blancheur et de noirceur, ou documenter un échantillon comme une teinte plus une ombre. Ce convertisseur prend la teinte en degrés de zéro à trois cent soixante et la saturation et la luminosité en pourcentages de zéro à cent, puis renvoie le triplet HWB correspondant avec une chaîne CSS hwb().

Comment HSL se projette sur teinte, blancheur et noirceur

La teinte est partagée par HSL et HWB : 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. HSL stocke ensuite la saturation comme l'ampleur dont un gris de la luminosité choisie est étiré vers la couleur pleinement chromatique à cette teinte, et la luminosité comme le mélange entre le noir à zéro pour cent, un ton moyen près de cinquante pour cent et le blanc à cent pour cent.

HWB nomme la même couleur comme une teinte pure mélangée à une quantité de blanc et une quantité de noir. Sur l'intervalle unitaire, le mapping est de forme fermée et n'a pas besoin d'un passage par le RGB entier : le chroma vaut un moins la valeur absolue de deux fois la luminosité moins un, le tout multiplié par la saturation ; la blancheur est la luminosité moins la moitié du chroma ; la noirceur est un moins la luminosité moins la moitié du chroma.

C'est la même chose que de prendre le canal RGB minimal comme blanc et un moins le canal RGB maximal comme noir, ce qui est la définition de HWB dans le CSS Color Module Level Four. Quand la saturation est nulle, le chroma disparaît, si bien que blancheur et noirceur deviennent des pourcentages complémentaires qui somment à cent et décrivent un gris, un noir ou un blanc.

Quand la luminosité est de cinquante pour cent et la saturation de cent pour cent, le chroma vaut un et le blanc comme le noir s'effondrent à zéro, ce qui est la teinte pure. La teinte doit se situer dans l'intervalle fermé de zéro à trois cent soixante ; saturation et luminosité doivent chacune se situer entre zéro et cent pour cent inclus.

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 parce que HSL et HWB partagent cet angle et que ce convertisseur n'inventera pas d'enroulement. Les champs s et l sont la saturation et la luminosité en pourcentages de zéro à cent.

Lorsque la saturation sort de zéro à cent, la réponse explique que s doit être un pourcentage dans cette bande fermée afin qu'un client puisse borner ou corriger le jeton avant de réessayer ; la même règle s'applique à la luminosité.

En cas de succès, la réponse renvoie les valeurs h, s et l nettoyées, indique la blancheur w et la noirceur b en pourcentages, imbrique l'objet hsl source et l'objet hwb résultat, émet une chaîne CSS imprimable de la forme hwb(H W% B%) et inclut une courte note de formule qui reformule les identités de chroma.

Les contrôles classiques incluent le bleu-cyan de ton moyen à teinte deux cent dix, saturation quatre-vingts et luminosité quarante-cinq, qui se projette sur neuf pour cent de blanc et dix-neuf pour cent de noir ; le rouge pur à teinte zéro, saturation cent et luminosité cinquante, qui se projette sur zéro de blanc et zéro de noir ; et n'importe quelle teinte à saturation nulle, qui s'effondre en un mélange achromatique dont la blancheur plus la noirceur valent cent.

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

Les design systems rédigent souvent les rampes de marque en HSL afin que les équipes produit puissent échelonner la luminosité pour un contraste accessible tout en gardant stables la teinte et une bande de saturation ; pourtant les feuilles de style modernes, les applications d'illustration et plusieurs sélecteurs natifs exposent désormais HWB, car mélanger une teinte pure avec du blanc et du noir correspond à la façon dont les peintres parlent de teintes et d'ombres.

Les ingénieurs front-end qui migrent un jeton de propriétés personnalisées hsl() vers hwb() ont besoin d'un oracle déterministe qui ne dépende pas de la sérialisation du style calculé d'un navigateur particulier. Les outils de visualisation de données et d'art génératif qui construisent des palettes catégorielles en faisant progresser la teinte à saturation et luminosité fixes doivent encore déverser du HWB lorsqu'un moteur de rendu ou un pipeline d'impression demande blancheur et noirceur plutôt qu'un troisième axe de luminosité.

Les cursus et les cours de bootcamp enseignent les modèles cylindriques côte à côte et ont besoin d'une clé de confiance unique pour les devoirs, qui corresponde aux identités du CSS Color Module plutôt qu'à une capture d'un sélecteur de couleur. Si vous avez ensuite besoin de HSL vers RGB, HSL vers HSV, d'une conversion multi-format HEX LAB CMYK 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 HWB.