Code couleur: Quelle est la différence entre Hex, RGB et HSL?

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)

Modèle de couleurs RVB

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.

Modèle de couleur RVBA

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?

Motif de couleur hexagonal sans soudure

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.

Modèle de couleur de table hexagonale

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√©)

Modèle de couleur HSL

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.

Roue chromatique RVB

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.

Modèle de couleur HSLA

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

Modèle couleur HSV

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

Articles Liés

Back to top button