Codes de couleur HTML – Tout sur HEX, RGB, RGBA, HSL et HSLA

Pour plus d’informations sur la manière de modifier la couleur du texte, de l’arrière-plan ou de la bordure, veuillez consulter le chapitre Articles pratiques. Les articles de ce chapitre répondent à des questions courantes et contiennent des exemples en C# qui fournissent les informations nécessaires à l’utilisation de la bibliothèque Aspose.HTML for .NET pour résoudre des tâches spécifiques.

Couleurs HTML

Les couleurs HTML sont les couleurs utilisées pour afficher les pages web. Elles sont étroitement liées aux méthodes de description et de définition de ces couleurs à l’aide de leurs codes de couleur respectifs. Par exemple, les couleurs HTML peuvent être spécifiées sous la forme de noms de couleurs anglais courants ou de valeurs HEX, de triplets RGB, de valeurs HSL, RGBA et HSLA.

Les couleurs jouent un rôle essentiel dans la perception de la valeur d’un contenu web et dans les émotions qu’une personne éprouve en le regardant. En HTML et XHTML, les couleurs peuvent être utilisées pour le texte, l’arrière-plan, les bordures des cadres, les tableaux et les cellules des tableaux individuels.

Noms de couleurs HTML

les noms de couleurs HTML font partie du quotidien de ceux qui travaillent dans le domaine du développement web. La spécification W3C des noms de couleurs distingue les couleurs de base et les couleurs étendues. HTML4 comporte 140 noms de couleurs, dont 16 couleurs de base – aqua, noir, bleu, fuchsia, gris, vert, citron vert, marron, marine, olive, violet, rouge, argent, sarcelle, blanc et jaune. En HTML5, vous pouvez utiliser un total de 147 noms de couleurs HTML, dont 17 couleurs de base. Le nom de couleur supplémentaire en HTML5 est orange.

La figure illustre 16 couleurs de base avec les codes HEX et RGB :

Codes de couleur HTML

Les codes de couleur HTML sont un moyen de représenter un format de couleur qu’un ordinateur peut lire et afficher. Les codes de couleur sont utilisés en HTML et CSS pour créer des schémas de couleurs pour la conception de sites web. Ils sont principalement utilisés par les concepteurs de sites web, les développeurs frontaux, les programmeurs et les illustrateurs numériques.

Couleurs RGB

RGB (Red, Green, Blue) est un modèle de couleur additif qui décrit comment n’importe quelle couleur est codée à l’aide de trois couleurs de base. C’est la base de la couleur affichée par la lumière sur les écrans de télévision, les ordinateurs, les scanners d’images, les vidéoprojecteurs, les appareils photo numériques et les appareils mobiles.

Les valeurs R, G et B représentent l’intensité (dans la plage de 0 à 255), respectivement, des composantes rouge, verte et bleue de la couleur déterminée. Ainsi, un bleu vif peut être défini comme (0,0,255), un rouge comme (255,0,0), un vert vif – (0,255,0), un noir – (0,0,0), et un blanc – (255,255,255). Le RGB est un modèle de code couleur très répandu dans la photographie, la télévision et l’infographie. Il existe 256 options de quantité différentes pour chaque couleur. Il peut donc y avoir 256^3 = 16 777 216 couleurs RGB différentes au total. En mélangeant ces trois couleurs, on obtient un code couleur RGB représenté, par exemple, comme suit : RGB(125,50,210).

L’une des façons les plus typiques de transmettre la couleur est d’utiliser des systèmes visuels tels que des diagrammes ou des modèles graphiques, où chaque couleur possède son propre ensemble de coordonnées. Par exemple, le système de couleurs RGB peut être représenté comme un cube avec 256 points discrets sur chaque face :

Historiquement, le modèle RGB a été choisi comme modèle principal pour le développement web car il est directement lié au fonctionnement des écrans, qui utilisent des pixels rouges, verts et bleus pour afficher les couleurs.

Couleurs HEX

Les codes HEX sont les codes de couleur les plus utilisés. Les codes HEX sont des nombres hexadécimaux de trois octets (six variables). Le numéro de couleur à six chiffres est structuré en trois groupes de deux chiffres qui spécifient la quantité de rouge, de vert et de bleu dans la couleur additive. Chaque paire de deux chiffres hexadécimaux peut avoir une valeur comprise entre 00 et FF. Cela donne plus de 16 millions de couleurs possibles.

Le code est exprimé comme suit : #RRGGBB, où chacune des valeurs à deux chiffres est une plage de chacune des trois couleurs (rouge, vert, bleu), avec laquelle vous sélectionnez la valeur finale représentant chaque couleur. Par exemple, #00FF00 est affiché comme vert parce que la composante verte est réglée sur sa valeur maximale (FF) et que les autres sont réglées sur 00.

Couleurs RGBA

les valeurs de couleur RGBA (Red, Green, Blue, Alpha) sont une extension des valeurs de couleur RGB avec un canal alpha qui détermine l’opacité de la couleur. Un paramètre alpha est un nombre compris entre 0,0, ce qui signifie “totalement transparent”, et 1,0, ce qui signifie “totalement opaque”. Par exemple, rgba(255, 0, 0) est affiché comme un rouge pur, rgba(255, 0, 0, 0.5) est affiché comme un rouge avec une opacité de 50 %.

La figure montre les valeurs RGBA de la couleur “jaune-vert” avec différentes transparences :

Pour une valeur RGBA, contrairement aux valeurs RGB, il n’y a pas de notation hexadécimale.

Couleurs HSL

De nombreuses personnes considèrent que le code couleur RGB n’est pas intuitif et qu’il est orienté vers le matériel. Le modèle de couleur HSL (Hue, Saturation, Lightness) a été développé dans les années 1970 par des chercheurs en infographie afin de mieux correspondre à la manière dont la vision humaine perçoit les attributs producteurs de couleurs. Dans le modèle HSL, les couleurs de chaque teinte sont disposées en tranches radiales autour d’un axe central de couleurs neutres, allant du noir en bas au blanc en haut. La représentation HSL réorganise les couleurs pour les rendre plus intuitives que la représentation RGB. Elle est souvent utilisée pour des applications graphiques telles que les sélecteurs de couleurs et l’analyse d’images.

La figure montre une interprétation graphique en 3D du modèle HSL (a) ; l’image est tirée de commons.wikimedia.org/wiki/. La figure (b) montre une interprétation graphique en 2D du modèle HSL pour une valeur de luminosité de 50 %.

HSL est une représentation du modèle de couleurs RGB en coordonnées cylindriques. La teinte définit la couleur de base. La teinte correspond à n’importe quelle couleur de la roue chromatique ; il s’agit d’un degré de la roue chromatique de 0 à 360. Ainsi, 0 correspond au rouge, 120 au vert et 240 au bleu. La saturation est l’intensité ou la pureté d’une couleur. Elle détermine le degré de vivacité de la couleur. Zéro pour cent correspond à du gris, et 100 pour cent à une couleur entièrement saturée. La clarté est le degré de luminosité ou de lumière d’une couleur. Elle détermine le degré de noirceur ou de blancheur de la couleur. Par exemple, 50 % n’a pas de teinte, 0 % est entièrement noir et 100 % est entièrement blanc.

Exemples de couleursHSL

Le tableau ci-dessous représente une teinte. Le rouge a été choisi dans le cercle des couleurs. Teinte=0. L’axe X du tableau représente la saturation (100%, 75%, 50%, 25%, 0%). L’axe Y représente la luminosité. 50% est “normal”.

Couleurs HSLA

les valeurs de couleur HSLA (Hue, Saturation, Lightness, Alpha) sont une extension des valeurs de couleur HSL avec un canal alpha qui détermine l’opacité de la couleur. La valeur de couleur HSLA est spécifiée avec la teinte, la saturation, la luminosité et l’alpha, où le paramètre alpha spécifie l’opacité. Le paramètre alpha est un nombre compris entre 0,0, ce qui signifie “totalement transparent”, et 1,0, ce qui signifie “totalement opaque”. Par exemple, hsla(0, 100%, 50%, 1) est affiché comme un rouge pur, hsla(0, 100%, 50%, 0,5) est affiché comme un rouge avec une opacité de 50% :

Pourquoi HTML ne prend-il pas en charge d’autres formats de couleurs ?

HTML et CSS sont conçus pour des contenus web affichés sur des écrans. Les écrans utilisent le modèle de couleurs RGB (rouge, vert, bleu), qui correspond à la manière dont les moniteurs reproduisent les couleurs. RGB et ses dérivés (RGBA, HEX, HSL, HSLA) sont intuitifs pour la représentation des couleurs à l’écran.

HTML et CSS ne prennent pas en charge d’autres formats de couleurs tels que CMYK, HSV, HWB, Lab, Oklab, LCH, Oklch et XYZ pour un certain nombre de raisons. Examinons-en quelques-unes :

1. Le modèle de couleurs CMYK est principalement utilisé pour l’impression et montre comment les encres se mélangent sur le papier. Il ne convient pas aux écrans numériques qui utilisent la lumière pour afficher les couleurs.
2. Les formats de couleur HSV, HWB, Lab, Oklab, LCH, Oklch et XYZ sont plus courants dans les domaines de la conception graphique, du traitement des images et de la science des couleurs. Ils sont utilisés pour les tâches qui nécessitent une manipulation précise des couleurs, mais sont moins pertinents pour le développement web.
3. La prise en charge de plusieurs modèles de couleurs obligera les navigateurs à effectuer des conversions entre ces modèles et le RGB pour l’affichage, ce qui entraînera une surcharge de travail et des problèmes de performance potentiels.
4. La simplicité des modèles de couleurs et leur limitation à quelques options compréhensibles (RGB, HEX, HSL) réduisent la complexité pour les développeurs. Cela garantit que la plupart des cas d’utilisation peuvent être traités sans qu’il soit nécessaire de comprendre ou de convertir entre différents modèles de couleurs.

Bien que le CSS traditionnel ne prenne pas en charge les modèles de couleurs avancés, le CSS Color Module Level 4 et les versions ultérieures introduisent des espaces colorimétriques complexes tels que lab(), lch() et oklab(). Ces innovations ne sont pas encore largement prises en charge par tous les navigateurs, mais elles indiquent une évolution vers la prise en charge d’espaces colorimétriques supplémentaires à mesure que le besoin d’un contrôle plus précis des couleurs se fait sentir.

Conclusion

Les couleurs HTML peuvent être définies par un nom, des valeurs RGB, RGBA, HEX, HSL ou HSLA et appliquées à l’arrière-plan ou au texte dans les documents HTML.

La figure ci-dessous illustre comment spécifier une couleur sarcelle par son nom, ses valeurs RGB, RGBA, HEX, HSL et HSLA :

Les langages HTML et CSS sont conçus pour des contenus web affichés sur des écrans. Les écrans utilisent le modèle de couleurs RGB (rouge, vert, bleu), qui correspond directement à la façon dont les moniteurs produisent les couleurs. RGB et ses dérivés (RGBA, HEX, HSL, HSLA) sont intuitifs pour la représentation des couleurs à l’écran. Toutefois, l’évolution des spécifications CSS pourrait progressivement conduire à la prise en charge d’espaces colorimétriques supplémentaires et à une gestion plus complexe des couleurs à l’avenir.

Voir aussi

• Découvrez le monde des noms de couleurs HTML ! Apprenez à utiliser les noms de couleur HTML dans la conception de sites web et quand choisir une alternative.
• L’article Comment changer la couleur du texte en HTML? montre comment utiliser la bibliothèque Aspose.HTML for .NET pour contrôler la couleur du texte dans un document HTML.
• Dans l’article Comment changer la couleur d’arrière-plan en HTML?, vous trouverez des exemples en C# démontrant différentes façons de définir ou de changer la couleur d’arrière-plan pour l’ensemble du document HTML et pour ses éléments individuels.
• L’article Comment changer la couleur des bordures en HTML? présente différentes façons de définir ou de changer la couleur des bordures dans les fichiers HTML à l’aide de la bibliothèque Aspose.HTML for .NET for .NET.

Aspose.HTML propose un Sélecteur de roues chromatiques gratuit en ligne qui vous permet de créer un ensemble de couleurs dans le code couleur HEX. Vous pouvez utiliser cette application gratuite en ligne pour trouver des harmonies de couleurs en utilisant les règles de combinaisons de couleurs, mais il est également essentiel d’expérimenter avec les couleurs. Sélecteur de roues chromatiques propose un excellent moyen d’expérimenter avec les couleurs et de créer des combinaisons de couleurs passionnantes de manière indépendante. L’application fonctionne sur les ordinateurs, les tablettes et les appareils mobiles. Créez votre propre palette pour n’importe quel projet !