Couleur de Lien HTML

Coloriage liens HTML peut être un excellent moyen de les distinguer de votre texte régulier, ou ajouter un peu de style à votre site web. Ici, nous allons vous montrer comment la couleur de vos liens HTML en utilisant des codes de couleur hexadécimal, les valeurs RGB et HSL et noms de couleur HTML.

Couleur des liens en utilisant des codes de couleurs Hex

Pour commencer, nous allons utiliser un code de couleur Hex, probablement la méthode la plus courante d'ajouter de la couleur à des liens. Dans votre balise d'ancrage HTML (<a>), après l'attribut href, insérer un attribut de style avec la propriété de couleur mis à votre code Hex de la couleur (dans notre cas #FF0000). 

HTML

<body>
  <a href="http://example.com/" style="color:#FF0000;">Red Link</a>
</body>
Démo sur Codepen

Assez facile, non? Si vous avez besoin d'un code de couleur Hex ou souhaitez parcourir quelques combinaisons de couleurs, consultez nos sélecteur de couleur and tableau de couleur.

Couleur des liens en utilisant des noms de couleur HTML

Noms de couleurs HTML sont souvent plus lisible que leurs homologues de code Hex, et peuvent être utilisés de la même façon. Remplacez le code de couleur Hex avec le nom de la couleur de HTML à partir de l'exemple précédent et voila, votre code est ultra clair. 

HTML

<body>
  <a href="http://example.com/" style="color:red;">Red Link</a>
</body>
Démo sur Codepen

Maintenant, il y a seulement 140 couleurs HTML appelées, mais cela devrait être l'abondance pour vous faire commencer; nous avons même énuméré eux tous ici si vous êtes curieux.

Couleur des liens en utilisant les valeurs des couleurs RGB

Une troisième façon de coiffer votre site Web le texte du lien est d'utiliser les valeurs RGB. Envelopper les valeurs rgb() leur permet d'être utilisé à l'intérieur d'une page Web comme un code hex ou le nom de la couleur. 

HTML

<body>
  <a href="http://example.com/" style="color:rgb(255,0,0);">Red Link</a>
</body>
Démo sur Codepen

Utilisation valeurs RGB a l'avantage supplémentaire de permettre le contrôle de l'opacité de la couleur. Remplacer rgb() avec rgba() et vous pouvez spécifier une quatrième valeur entre 0 et 1 (0 pour complètement transparent, 1 pour totalement opaque). 

HTML

<body>
  <a href="http://example.com/" style="color:rgba(255,0,0,0.5);">Red Link</a>
</body>
Démo sur Codepen

Couleur de Link à l'aide des valeurs de couleur HSL

HSL, qui se tient pour la teinte, la saturation et la luminosité, sont un autre ensemble de valeurs de couleur pris en charge par la plupart des navigateurs modernes (IE9). Comme RGB, vous pouvez envelopper les valeurs HSL intérieur hsl() et les utiliser dans votre page Web, comme ci-dessous. 

HTML

<body>
  <a href="http://example.com/" style="color:hsl(0,100%,50%);">Red Link</a>
</body>
Démo sur Codepen

HSL prend également en charge un canal alpha, et suit le même format que RGB; utiliser hsla() au lieu de hsl(), et d'ajouter une quatrième valeur pour l'opacité entre 0 et 1. 

HTML

<body>
  <a href="http://example.com/" style="color:hsla(0,100%,50%,0.5);">Red Link</a>
</body>
Démo sur Codepen