La balise couleur en HTML permet de colorer du texte. Le texte du site web s'affiche par défaut en noir, changer la couleur d'un ou plusieurs éléments est utile pour personnaliser le site aux couleurs de la marque, ou encore pour améliorer l'expérience utilisateur. Exemple : si l'arrière-plan d'une page utilise des nuances sombres, colorer le texte en clair améliore la lisibilité; utiliser de la couleur pour le slogan de la marque ou sur un message promotionnel met en valeur ce texte prioritaire.

>> Téléchargez ce guide et découvrez les bases des langages HTML et CSS La balise couleur en HTML, balise < font > accompagnée de l'attribut "color", permettait de changer la couleur du texte affiché à l'écran. HTML5, dernière version du langage de programmation, supprime la balise < font >. Son effet est considéré comme représentatif, or c'est le CSS qui contrôle le style et la mise en forme. Pour colorer un élément texte de la page HTML, le développeur utilise donc le CSS pour s'assurer de l'affichage conforme de la couleur quel que soit le navigateur web depuis lequel le site est consulté.

 

Les noms de couleur

Pour changer la couleur du texte HTML avec CSS, il faut tout d'abord décrire la couleur souhaitée dans un format compréhensible par l'ordinateur. Indiquer le nom de la couleur, en anglais et sans espace, est une façon simple de définir une couleur HTML. Il faut pour cela utiliser un nom parmi les 140 noms de couleur pris en charge par les navigateurs web. Exemples : le nom « red » permet d'afficher le texte en rouge ; le nom « lightskyblue » affiche le texte en bleu ciel clair tandis que le nom « deepskyblue » colore le texte en bleu ciel profond.

Une fois le nom de couleur déterminé, il faut le renseigner dans la feuille de style CSS.

  1. Identifier le texte à mettre en couleur : il est possible de colorer un paragraphe, un titre, un lien hypertexte ou encore une portion de texte.
  2. Insérer l'attribut style dans la balise HTML correspondante. Exemples : pour colorer un paragraphe, insérer l'attribut style dans la balise < p > ; pour changer la couleur d'une portion de texte HTML, insérer une balise < span style >.
  3. Ajouter le nom de la couleur en mentionnant : "color:nom de la couleur".
  4. Si la couleur doit être appliquée à tous les éléments d'une page, par exemple tous les titres ou tous les liens, il est possible d'insérer le code CSS dans la section head de la page HTML.

Exemple de code pour colorer un titre en vert foncé en utilisant le nom de la couleur :

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

Que sont les langages de programmation HTML et CSS ?

Téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de ces deux langages de programmation pour gérer votre site web.

Les valeurs RGB et RGBA

La valeur RGB est une autre façon de définir une couleur en HTML. En comparaison avec l'usage des noms de couleur, les valeurs RGB étendent les possibilités sur la palette de nuances et permettent de trouver la couleur qui correspond exactement aux attentes. RGB est l'acronyme pour Red, Green, Blue. Le terme RVB est également utilisé en français pour Rouge, Vert, Bleu. Avec cette méthode, la couleur du texte est définie en mélangeant les couleurs primaires dans les proportions adaptées. Il faut entrer une valeur, entre 0 et 255, pour chacune des trois couleurs. Exemples : pour afficher du texte en jaune, il faut renseigner la valeur rgb(255, 255, 0) car mélanger le rouge et le vert permet d'obtenir du jaune ; pour colorer le texte dans une teinte de jaune dorée, il faut diminuer la quantité de vert avec une valeur de type rgb(255, 215, 0).

La valeur RGBA ajoute une valeur alpha, qui représente le degré d'opacité du texte de 0 à 1, la valeur 1 indiquant la transparence totale.

Une fois la valeur RGB déterminée, il faut la renseigner dans la feuille de style CSS de la même manière que pour le nom de couleur, en remplaçant le nom de couleur par la valeur RGB.

Exemple de code pour colorer le texte d'un paragraphe en violet en utilisant la valeur RGB :

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

 

Les codes hexadécimaux

Les codes hexadécimaux permettent également de définir la couleur du texte dans un langage compréhensible par l'ordinateur, et les possibilités sont très étendues à l'image de celles offertes par le système des valeurs RGB. Le code hexadécimal est une suite alphanumérique de chiffres de 0 à 9 et de lettres de A à F, précédée du symbole #. Comme pour la valeur RGB, la composition du code hexadécimal se réfère à l'intensité des couleurs rouge, verte et bleue. Exemples : pour afficher du texte en jaune, il faut renseigner la valeur HEX #FFFF00 ; pour colorer le texte en doré, il faut indiquer une valeur de type #FFD700. Des sélecteurs de couleurs en ligne permettent de trouver facilement le code de la teinte exacte recherchée.

Une fois le code hexadécimal identifié, il faut le renseigner dans la feuille de style CSS en insérant l'attribut style dans la balise HTML du texte à colorer.

Exemple de code pour colorer une portion de texte en rose vif en utilisant la valeur hexadécimale :

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

 

Les valeurs HSL et HSLA

Comme le nom de couleur, la valeur RGB et le code hexadécimal, la valeur HSL permet de définir la couleur du texte HTML. HSL est l'acronyme pour Hue, Saturation, Lightness. La valeur Hue, de 0 à 360, détermine la teinte. La valeur Saturation est comprise entre 0 et 100, 0 pour le noir et blanc. La valeur Lightness permet de varier la luminosité de 0 à 100 %. À l'instar de la valeur RGB, la valeur HSL peut être enrichie de la valeur alpha : la valeur HSLA inclut la notion d'opacité.

Dans l'exemple précédent, la couleur rose vif est renseignée en utilisant le code suivant :

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

 

L'ancienne balise < font color >

Obsolète depuis la version HTML5 du langage de programmation, la balise < font > accompagnée de l'attribut "color" permettait de changer la couleur du texte affiché à l'écran, sans utiliser le CSS.

  • Identifier l'élément à colorer dans le fichier HTML.
  • Insérer la balise < font color >.
  • Renseigner la couleur à appliquer au texte, en utilisant au choix : le nom de couleur, la valeur RGB, le code hexadécimal ou la valeur HSL.

     

Exemple de balise couleur HTML :

See the Pen Untitled by HubSpot France (@HubSpot-France) on CodePen.

Communauté HubSpot


Pour aller plus loin, téléchargez ce guide gratuit et découvrez les définitions, les différences et les éléments de code de base de langages de programmation HTML et CSS pour gérer votre site web.Guide d'introduction aux langages HTML et CSS

Publication originale le May 17, 2022 3:09:00 AM, mise à jour le 17 mai 2022

Sujet(s):

HTML