Couleurs HWB
Que sont les couleurs HWB ?
La couleur HWB est un modèle de couleur qui décrit une couleur à l’aide de trois valeurs :
- Hue / Teinte : Il s’agit de l’angle sur la roue chromatique qui définit la couleur primaire (par exemple, rouge, vert, bleu). Il est mesuré en degrés (0 à 360).
- Whiteness / Blancheur : C’est le pourcentage de blanc ajouté à la teinte principale. Il est mesuré en pourcentage (de 0 à 100).
- Blackness / Noirceur : C’est le pourcentage de noir ajouté à la teinte principale. Il est mesuré en pourcentage (de 0 à 100).
Il aide à déterminer avec précision la couleur, compte tenu de la quantité de couleur blanche ou noire qu’elle contient.
Comment cela fonctionne-t-il ?
Imaginez que vous avez une couleur pure (par exemple, le rouge) et que vous souhaitez la rendre plus claire ou plus foncée. Si vous ajoutez plus de blanc, la couleur devient plus claire (moins saturée). Si vous ajoutez plus de noir, la couleur devient plus foncée (plus saturée).
Où les couleurs HWB sont-elles utilisées ?
La couleur HWB est utilisée dans divers domaines où il est nécessaire de décrire les couleurs avec précision et intuitivement :
- Conception graphique : Pour créer des palettes de couleurs harmonieuses, choisissez des couleurs pour les sites Web, les logos, les illustrations, etc.
- Développement Web : Pour spécifier les couleurs des éléments de la page Web à l’aide de CSS.
- Traitement d’image : pour modifier les couleurs des photos, créer des effets de couleur, etc.
Le modèle HWB est une alternative aux modèles de couleurs plus populaires tels que RGB ou HSL, car il est très facile de travailler avec la saturation des couleurs (si vous souhaitez rendre la couleur plus claire ou plus foncée).
Avantages de HWB
- Facilité d’utilisation : HWB offre un moyen pratique de contrôler les couleurs sans calculs mathématiques compliqués. HWB permet de créer facilement différentes nuances simplement en changeant les valeurs de blancheur et de noirceur.
- Approche simple : la plupart des gens comprennent intuitivement ce que signifie ajouter du blanc ou du noir à la couleur principale. HWB est simple et facile à utiliser, en particulier pour les personnes qui n’ont pas une connaissance approfondie de la théorie des couleurs.
- Convivial pour les concepteurs : HWB vous offre plus de contrôle des couleurs que certains autres modèles comme RGB. Si vous voulez rendre la couleur un peu plus claire ou plus foncée, c’est très facile à faire dans HWB.
Inconvénients du HWB
- Limitations : HWB ne couvre pas toutes les couleurs possibles qui existent dans la nature.
- Toutes les applications ne prennent pas en charge HWB : certaines applications graphiques peuvent ne pas prendre en charge HWB.
- Moins populaire : HWB n’est pas aussi courant que d’autres modèles de couleurs tels que RGB ou HSL, il peut donc parfois être plus difficile de trouver de l’aide ou des ressources pour travailler avec.
- Peut-être inexact : Par rapport à d’autres modèles, le HWB peut ne pas fournir la même précision lors de la reproduction des couleurs.
Exemples d’utilisation des couleurs HWB
- Création d’une palette de couleurs pour un site Web : vous pouvez sélectionner une teinte primaire (Teinte) et modifier les valeurs de blancheur et de noirceur pour créer différentes nuances pour les boutons, les arrière-plans, le texte, etc.
- Retouche photo : Vous pouvez utiliser HWB pour modifier la luminosité et le contraste de l’image, la rendre plus chaude ou plus froide.
- Conception de logo : Vous pouvez utiliser HWB pour créer une couleur de logo unique qui se démarquera des autres.
Exemple
Utilisation des couleurs HWB lors de la mise en forme d’une page Web :
body {
background-color: hwb(240, 5%, 50%); /* Fond bleu */
color: hwb(60 5% 0%); /* Texte jaune */
}
HWB (Hue, Whiteness, Blackness) est une norme suggérée pour CSS4.
Comment obtenez-vous la couleur HWB ?
Pour obtenir une couleur HWB, vous pouvez utiliser le calculateur HWB.
Calculatrice HWB
Prise en charge HTML
HWB n’est pas (encore) pris en charge en HTML, mais il est suggéré comme nouveau standard en CSS4.
En attendant CSS4, vous pouvez inclure la bibliothèque de couleurs de W3Schools et utiliser HWB comme attribut HTML comme ceci :
Exemple
<div data-w3-color="hwb(60, 50%, 0)">
<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<script src="/lib/w3color.js"></script>
Try It Yourself »
Conclusion. Ainsi, HWB est un modèle pratique pour travailler avec les couleurs, surtout si vous avez besoin d’ajuster rapidement la luminosité ou l’obscurité d’une couleur.
Bibliothèque de couleurs W3Schools
La bibliothèque JavaScript utilisée dans l’exemple ci-dessus peut être téléchargée à partir de
https://www.w3schools.com/lib/w3color.js
Vous pouvez également utiliser un téléchargement alternatif sur notre site Web W3SchoolsFR. Le meilleur au lien : https://w3schoolsua.github.io/lib/w3color.js
