Color Models Feature


Lorsqu’il s’agit d’éclabousser la couleur sur l’écran, il existe plusieurs façons de le faire avec l’encodage. Hex, RGBA et HSLA sont trois des systèmes de code couleur les plus largement 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’a peut-être pas encore été sur votre radar. Chaque façon d’écrire les 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 prendre une décision éclairée. Ici, nous expliquerons les différences entre RVB, HEX et HSL.

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

Il est logique de commencer par les valeurs RVB, car Rouge, VertOui Bleu ce sont les trois couleurs que les écrans peuvent utiliser pour produire pratiquement n’importe quelle autre couleur. Il le fait en mélangeant des couleurs additives, mais vous n’avez pas besoin de vous plonger dans la science pour comprendre le RVB.

rgb(255, 0, 0) est rouge, puisque R est au maximum. Si vous réglez le G ou le B sur 255, vous obtiendrez un vert complet ou un bleu complet. Réglez-les tous sur 255 à la fois et vous obtenez du blanc (la somme de toutes les couleurs), tandis que les régler sur zéro les rend noirs. 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 ce n’est vraiment pas si intuitif. L’équilibre RVB peut changer un peu même si vous changez simplement la teinte 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, heureusement, il y en a beaucoup).

Qu’est-ce qu’un code couleur hexadécimal ?

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 rouge79 est le vertet f7 est le bleu.

Tout d’abord, vous devez savoir que dans le système de couleurs hexadécimal, les lettres af représentent les nombres dix à quinze. Deuxièmement, votre hexadécimalce 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 chiffre par 16 et d’ajouter le deuxième chiffre, c’est aussi simple que ça ! 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 le RVB, bien qu’ils soient faciles à copier et coller et puissent avoir des combinaisons mémorables de lettres et de chiffres.

Vous pouvez également ajouter de la transparence aux codes hexadécimaux en mettant une valeur égale à un 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 (Teinte, Saturation, Luminosité) ?

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

Teinte représente la couleur et utilise les degrés de la roue chromatique pour vous indiquer la couleur sur laquelle vous vous trouvez. Si vous connaissez la roue chromatique et les positions de ces couleurs principales, vous devriez être en mesure de dire que 45 apparaîtront orange et 270 apparaîtront violet simplement en y réfléchissant une seconde.

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

Saturation c’est essentiellement à quel point la couleur est colorée. 0 % de saturation signifie que la couleur ne sera qu’une nuance de gris, tandis que 100 % signifie qu’elle apparaîtra à pleine puissance. Si vous souhaitez assourdir votre couleur ou la faire ressortir un peu plus, vous pouvez modifier cette valeur.

Légèreté vous indique à quel point la couleur est foncée ou claire. 0 % de luminosité signifie que sa couleur sera noire, quel que soit le paramètre de teinte ou de saturation, et 100 % de luminosité le rendra blanc. Comme vous l’avez peut-être deviné, 50% vous donne la couleur la plus précise.

Avec cette information, vous devriez être en mesure de savoir instantanément ce que hsl(0, 100%, 50%) moyen. C’est juste rouge ! Vous voulez un rouge plus foncé et plus riche ? Tester 0, 70%, 40%. Peut-être que tu veux ça, mais en bleu ? Changez simplement 0 en 240 et vous l’avez ! Il a de la transparence, il fonctionne aussi comme RVB : il suffit d’ajouter une quatrième valeur (entre 0 et 1), comme ceci : hsla(240, 70%, 40%, .5).

VHS/HSB et HSI

Quoi? Plus de modèles de couleurs ? Quand ça se termine ? Pour la plupart des gens qui travaillent avec les couleurs sur ordinateur, c’est fini. Hex, RVB et HSL sont de loin les moyens les plus courants d’annoter 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 dans les images, vous pourriez rencontrer des personnes qui utilisent l’un de ces modèles de couleurs plus ésotériques, voire l’un des autres. ne sont pas répertoriés ici.

HSB signifie Hue Saturation Brightness et HSV signifie Hue Saturation Value. Ce ne sont vraiment que des noms différents pour le même modèle, et leur plus grande différence avec HSL est la façon dont ils définissent la saturation. HSI (Hue Saturation Intensity) présente quelques différences mineures par rapport à HSB/HSV, mais il n’est pas largement utilisé, vous ne le verrez donc probablement pas beaucoup dans la nature.

Quel modèle de couleur dois-je utiliser ?

Généralement, le choix d’un modèle de couleur est une décision de conception assez mineure, mais de bonnes choses sont faites à partir 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 très impliqués. RGB/RGBA est correct pour la lisibilité et est mieux utilisé quand ce serait bien si un humain pouvait modifier la transparence. Si un humain a besoin de changer manuellement la couleur, optez pour HSL/HSLA. En dehors de cela, c’est plus ou moins 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 Unie Cylindre Gris Saturation, couleur additive, Tableau des couleurs XTerm, HSL et VHS, Munsell 1943

Cet article est-il utile ?

Abonnez-vous à notre newsletter!

Nos derniers tutos envoyés directement dans votre boite mail

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici