Comment changer la couleur de texte en HTML ?

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.

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 couleur-html_nom by HubSpot France (@HubSpot-France) on CodePen.

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 couleur-html_rgb 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 couleur-html_hexadecimal 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 couleur-html_hsl 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 couleur-html_font-color by HubSpot France (@HubSpot-France) on CodePen.

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.