Lorsqu’il s’agit d’éclabousser des couleurs à l’écran, il existe plusieurs façons de le faire avec l’encodage. Hex, RGBA et HSLA sont trois des systèmes de codage couleur les plus utilisés.
Vous avez peut-être déjà rencontré des codes RVB et hexadécimaux, mais HSL, bien que plus lisible par l’homme, n’est peut-être pas encore sur votre radar. Chaque façon d’écrire des couleurs a du sens dans différentes situations, et tout ce dont vous avez besoin est une compréhension de base de chaque type pour faire le bon choix. Ici, nous allons expliquer la différence entre RGB, HEX et HSL.
Qu’est-ce que le RVB (rouge, vert, bleu)
Il est logique de commencer avec une valeur RVB, car rouge, vertet bleu Il y a trois couleurs que la toile peut utiliser pour produire presque n’importe quelle autre couleur. Cela se fait par “mélange de couleurs additif”, mais vous n’avez pas besoin d’étudier ces connaissances pour comprendre le RVB.
rgb (255, 0, 0) est rouge, car R est maximisé. Si vous définissez G ou B sur 255, vous obtiendrez une pleine couleur verte ou bleue. Réglez tout sur 255 à la fois et vous obtiendrez du blanc (la somme de toutes les couleurs) tout en vous concentrant sur le noir. Si vous ajoutez une quatrième valeur (canal alpha, entrez 0 à 1) Vous pouvez également obtenir la transparence: rgba (0, 0, 0, .5) se traduit par un noir transparent moyen.
C’est simple, oui, mais ce n’est pas si intelligent. L’équilibre RVB peut changer un peu, même si seule la tonalité des couleurs change, ce qui rend très difficile pour les humains de faire des ajustements manuels sans une sorte de générateur RVB (qui, heureusement, il y en a beaucoup).
Qu’est-ce qu’un code couleur hexadécimal?
Hex est une façon différente d’écrire des valeurs RVB. Quelque chose comme # 6a79f7 (bleuet bleuet) correspond directement au RVB (106, 121, 247). 6 est rouge79 est vertet f7 sont bleu.
Tout d’abord, vous devez savoir que dans le système de couleurs hexadécimal, les lettres “af” représentent des nombres de dix à quinze. Deuxièmement, il est hexadécimal, ce qui signifie que tout est en bas. 16. 21 est 2 * 10+ 1 en base 10, mais l’hexagone deviendra 2 * * 16 + 1. Multipliez simplement le premier nombre par 16 et ajoutez 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 certainement le code hexadécimal encore plus douloureux pour les humains que RVB, bien que des combinaisons impressionnantes de lettres et de chiffres soient faciles à copier et à coller.
Vous pouvez également ajouter de la transparence au code hexadécimal en mettant une valeur équivalente à un pourcentage de 255 au début, telle que: # 806a79f7. 80 en hexadécimal = 126, ce qui correspond à environ 50% de la valeur maximale de 255.
Qu’est-ce que HSL (teinte, saturation, légèreté)
HSL est plus ou moins conçu pour la lisibilité humaine et devient de plus en plus populaire, en particulier comme alternative au RVB. Cela fonctionne comme ceci:
Couleur représente la couleur et utilise la note sur la roue chromatique pour indiquer la couleur qu’il porte. Si vous connaissez la roue chromatique et la position de ces couleurs principales, sachez que 45 seront orange et 270 seront violettes juste pour un instant.
0 = rouge60 = jaune120 = vert180 = cyan240 = bleu300 = magenta
Saturation essentiellement la couleur des couleurs. Une saturation de 0% signifie que la couleur ne sera que grise, tandis que 100% signifie qu’elle montrera toute sa force. Si vous souhaitez désactiver sa couleur ou la rendre un peu plus pop, vous pouvez modifier cette valeur.
Le soulagement vous indique à quel point la couleur est foncée ou brillante. Une luminosité de 0% signifie que sa couleur sera noire quel que soit le paramètre de teinte ou de saturation, et une luminosité de 100% la rend blanche. Comme vous l’avez peut-être deviné, 50% fournit la couleur la plus précise.
Avec ces informations, vous devez savoir immédiatement ce que hsl (0, 100%, 50%). Seulement rouge! Voulez-vous un rouge plus foncé et plus riche? essayez-le 0, 70%, 40%. Peut-être que tu veux, mais en bleu? Changez 0 à 240 et vous l’avez! Il a également de la transparence: il fonctionne comme RGB: ajoutez simplement une quatrième valeur (type 0 et 1), comme: hsla (240, 70%, 40%, .5)
HSV / HSB et HSI
De quoi? Plus de modèles de couleurs? Quand ça se termine? Pour la plupart des gens qui travaillent avec la couleur sur un ordinateur, c’est fini. Hex, RGB et HSL sont de loin les moyens les plus courants pour distinguer les couleurs. Cependant, si vous êtes dans un domaine qui implique beaucoup d’images et de couleurs, comme la conception graphique ou l’apprentissage automatique d’images, vous pouvez rencontrer des gens qui utilisent l’un de ces modèles de couleurs plus ésotériques ou même l’un des autres qui ne le font pas. faire. énumérés ici. .
HSB signifie “Hue Saturation Brightness” et HSV signifie Hue Saturation Value. En fait, ce ne sont que des noms différents pour le même modèle, et la plus grande différence pour HSL est la façon dont ils définissent la saturation. HSI (Hue Saturation Intensity) a quelques légères différences avec HSB / HSV, mais il n’est pas largement utilisé, donc vous ne le verrez probablement pas souvent dans la nature.
Quel modèle de couleur dois-je utiliser?
En général, le choix d’un modèle de couleur est une très petite décision de conception, mais les bonnes choses se font avec de nombreuses petites décisions. En général, les codes hexadécimaux facilitent la copie et sont bons dans les situations où les humains peuvent ne pas être très impliqués. RGB / RGBA vaut la peine d’être lu et mieux utilisé quand il serait préférable que les humains changent parfois la transparence. Si un humain a besoin de changer les couleurs manuellement, utilisez HSL / HSLA. C’est aussi une question de préférence, bien que les membres de l’équipe HSL soient généralement plus intelligents et plus attrayants.
Crédit d’image: Saturation du cylindre HSL gris uni, couleur additive, nuancier XTerm, HSL et HSV, Munsell 1943
Avez-vous trouvé cet article utile? Si non
