Couleur de Texte HTML

Ajouter de la couleur à votre texte HTML est facile! Dans ce court tutoriel nous allons couvrir comment changer la couleur de votre texte HTML utilisant des codes Hex de couleurs, les noms de couleurs RGB et HTML, les valeurs HSL.

La couleur du texte en utilisant des codes de couleurs Hex

La façon la plus courante de coloration texte HTML est d'utiliser des codes de couleur hexadécimal (Hex de code pour faire court). Il suffit d'ajouter un attribut de style à l'élément de texte que vous voulez à la couleur – un paragraphe dans l'exemple ci-dessous – et utiliser la propriété de couleur avec votre code Hex. 

HTML

<body>
  <p style="color:#FF0000";>Red paragraph text</p>
</body>
Démo sur Codepen

Ne pas avoir un code Hex? Ne vous inquiétez pas, utilisez notre sélecteur de couleur pour parcourir des millions de couleurs avec des codes de couleur Hex, et bien plus encore.

La couleur du texte en utilisant des noms de couleur HTML

Une autre consiste à la couleur de texte de votre site Web en utilisant un nom de couleur HTML. Le code HTML est similaire, il suffit de remplacer le code Hex de l'étape précédente avec le nom de la couleur que vous souhaitez utiliser (rouge dans notre exemple). Il y a 140 couleurs nommées à choisir, et nous avons compilé une liste que vous pouvez consulter ici. 

HTML

<body>
  <p style="color:red;">Red paragraph text</p>
</body>
Démo sur Codepen

La couleur du texte en utilisant les valeurs des couleurs RGB

En utilisant les valeurs RGB est à la mode ces jours-ci, mais il est tout aussi facile que de codes Hex ou des noms de couleurs. Insérez vos valeurs RGB dans le paramètre rgb() suit la propriété de couleur. Vous pouvez utiliser notre sélecteur de couleur pour obtenir des valeurs RGB en plus de codes Hex. 

HTML

<body>
  <p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>
Démo sur Codepen

Lorsque vous utilisez une valeur RGB dans votre site Web, vous pouvez également spécifier l'opacité. Au lieu de rgb() utilizer rgba() – l'un est pour l'alpha, le canal de couleur qui contrôle l'opacité – et après vos trois valeurs de couleur ajoutent un quatrième pour l'opacité, sur une échelle de 0 – 1 (0 pour complètement transparent, 1 pour totalement opaque). 

HTML

<body>
  <p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>
Démo sur Codepen

La couleur du texte à l'aide des valeurs de couleur HSL

Une quatrième méthode pour ajouter de la couleur est en utilisant des valeurs HSL. Similaire à la syntaxe RGB décrite ci-dessus, HSL utilise le préfixe hsl() et trois valeurs pour la teinte, saturation et luminosité. Hue est représentée sur une échelle de 0 à 360, tandis que la saturation et la luminosité sont chacun un pourcentage compris entre 0% et 100%. 

HTML

<body>
  <p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>
Démo sur Codepen

À l'instar de RGB, lors de l'utilisation de HSL, vous pouvez modifier le droit d'opacité de couleur dans la propriété color. Utilisez le préfixe hsla() et inclure une quatrième valeur comprise entre 0 et 1 pour le niveau d'opacité dont vous avez besoin. 

HTML

<body>
  <p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>
Démo sur Codepen