Codes de couleur: Quelle est la différence entre Hex, RVB et TSL?

En ce qui concerne les éclaboussures de couleur sur l’écran, il existe plusieurs façons de le faire avec le codage. Hex, RGBA et HSLA sont trois des systèmes de code couleur les plus couramment utilisés.

Vous avez probablement rencontré des codes hexadécimaux et RVB dans le passé, mais HSL, bien qu’il soit plus lisible par l’homme, n’est peut-être pas encore sur votre radar. Chaque façon d’écrire les couleurs a un sens dans différentes situations, et tout ce dont vous avez besoin est une compréhension de base de chaque type pour prendre une décision éclairée. Ici, nous allons expliquer les différences entre RVB, HEX et HSL.

Qu’est-ce que RVB (rouge, vert, bleu)

Il est logique de commencer par les valeurs RVB, car rouge, Vert, et Bleu sont les trois couleurs que les écrans peuvent utiliser pour produire à peu près toutes les autres couleurs. Il le fait en utilisant un «mélange de couleurs additif», mais vous n’avez pas besoin de vous plonger dans la science pour comprendre RVB.

rgb(255, 0, 0) est rouge, puisque le R est au maximum. Si vous définissez le G ou le B sur 255, vous obtiendrez du vert ou du bleu. Réglez-les tous sur 255 à la fois et vous obtiendrez du blanc (la somme de toutes les couleurs), tandis que leur remise à zéro rend le noir. Si vous ajoutez une quatrième valeur (le canal alpha, entre 0 et 1), vous pouvez également obtenir de la transparence: rgba(0, 0, 0, .5) se traduit par un noir semi-transparent.

C’est simple, oui, mais pas vraiment intuitif. La balance RVB peut changer un peu même si vous ne faites que changer la nuance d’une couleur, ce qui rend très difficile pour les humains de faire des ajustements manuels sans une sorte de générateur RVB (dont il y en a, heureusement, beaucoup).

Que sont les codes de couleur hexadécimaux

Les hexagones ne sont qu’une manière différente d’écrire les valeurs RVB. Quelque chose comme #6a79f7 (bleu bleuet) correspond directement à rgb(106, 121, 247). 6a est le rouge, 79 est le vert, et f7 est le bleu.

Tout d’abord, vous devez savoir que dans le système de couleur hexadécimal, les lettres «af» représentent les nombres de dix à quinze. Deuxièmement, c’est hexadécimal, ce qui signifie que tout est en base 16. 21 est 2 * 10 + 1 en base 10, mais en hexadécimal ce serait 2 * 16 + 1. Il suffit de multiplier le premier nombre par 16 et d’ajouter le deuxième nombre – c’est aussi simple que cela! 6a = 6 * 16 + 10 ou 106. 79 = 7 * 16 + 9 ou 121.

Bien que les mathématiques soient amusantes, elles rendent évidemment les codes hexadécimaux encore plus pénibles pour les humains que RVB, bien qu’ils soient faciles à copier-coller et puissent avoir des combinaisons de lettres / chiffres mémorables.

Vous pouvez également ajouter de la transparence aux codes hexadécimaux en mettant une valeur équivalente à un certain pourcentage de 255 au début, comme ceci: #806a79f7. 80 en hexadécimal = 126, ce qui est proche de 50% de la valeur maximale de 255.

Qu’est-ce que HSL (Hue, Saturation, Lightness)

HSL a été à peu près conçu pour la lisibilité humaine et gagne en popularité, en particulier en tant qu’alternative RVB. Cela fonctionne comme ceci:

Teinte signifie couleur, et il utilise les degrés de la roue chromatique pour vous dire de quelle couleur vous êtes. Si vous connaissez la roue chromatique et les positions de ces couleurs principales, vous devriez être en mesure de dire que 45 semblera orange et 270 semblera violet juste en y pensant pendant une seconde.

• 0 = rouge
• 60 = jaune
• 120 = vert
• 180 = cyan
• 240 = bleu
• 300 = magenta

Saturation est essentiellement la couleur de la couleur. 0% de saturation signifie que la couleur sera juste une nuance de gris, tandis que 100% signifie qu’elle apparaîtra à pleine puissance. Si vous souhaitez désactiver votre couleur ou la faire ressortir un peu plus, vous pouvez simplement modifier cette valeur.

Légèreté vous indique à quel point la couleur est sombre ou brillante. 0% de luminosité signifie que votre couleur sera noire, quels que soient les paramètres de teinte ou de saturation, et 100% de luminosité vous donnera du blanc. Comme vous l’avez peut-être deviné, 50% vous donne la couleur la plus précise.

Avec ces informations, vous devriez être en mesure de dire instantanément ce que hsl(0, 100%, 50%) moyens. C’est juste rouge! Vous voulez un rouge plus foncé et plus riche? Essayer 0, 70%, 40%. Peut-être que vous voulez ça, mais en bleu? Changez simplement de 0 à 240 et vous l’avez! Il a aussi de la transparence – cela fonctionne comme RVB: ajoutez simplement une quatrième valeur (entre 0 et 1), comme ceci: hsla(240, 70%, 40%, .5).

HSV / HSB et HSI

Quelle? Plus de modèles de couleurs? Quand cela se termine-t-il? Pour la plupart des gens qui travaillent avec des couleurs sur des ordinateurs, c’est déjà fini. Hex, RVB et TSL sont de loin les moyens les plus courants de noter les couleurs. Si vous êtes dans un domaine impliquant beaucoup d’images et de couleurs, comme la conception graphique ou l’apprentissage automatique sur les images, vous pouvez rencontrer des personnes utilisant l’un de ces modèles de couleurs plus ésotériques, ou même l’un des autres non répertoriés ici.

HSB signifie «Hue Saturation Brightness» et HSV signifie Hue Saturation Value. Ce ne sont en fait que des noms différents pour le même modèle, et leur plus grande différence par rapport à HSL réside dans la façon dont ils définissent la saturation. HSI (Hue Saturation Intensity) présente quelques différences mineures par rapport au HSB / HSV, mais il n’est pas largement utilisé, il y a donc de fortes chances que vous ne le voyiez pas beaucoup dans la nature.

Quel modèle de couleur dois-je utiliser?

En règle générale, le choix d’un modèle de couleur est une décision de conception assez mineure, mais de bonnes choses sont prises avec de nombreuses petites décisions. En général, les codes hexadécimaux facilitent le copier-coller et sont parfaits dans les situations où les humains ne seront probablement pas beaucoup impliqués. RGB / RGBA est décent pour la lisibilité et il est préférable de l’utiliser quand il serait bien qu’un humain puisse parfois modifier la transparence. Si un humain doit changer manuellement la couleur, optez pour HSL / HSLA. À part cela, c’est à peu près une question de préférence, bien que les membres de l’équipe HSL aient tendance à être plus intelligents et plus beaux.

Crédits image: HSL Couleur Solide Cylindre Saturation Gris, Couleur additive, Nuancier XTerm, HSL et HSV, Munsell 1943