HTML Link Color

Coloring HTML links can be a great way to distinguish them from your regular text, or add a bit of flair to your website. Here we'll demonstrate how to color your HTML links using Hex color codes, RGB and HSL values and HTML color names.

Link color using Hex color codes

To start with we'll use a Hex color code, probably the most common method of adding color to links. In your HTML anchor tag (<a>), after the href attribute, insert a style attribute with the color property set to your Hex color code (in our case #FF0000). 

HTML

<body>
  <a href="http://example.com/" style="color:#FF0000;">Red Link</a>
</body>
Demo on CodePen

Pretty easy, right? If you need a Hex color code or want to browse some color combinations, check out our color picker and color charts.

Link color using HTML color names

HTML color names are often more legible than their Hex code counterparts, and can be used in much the same fashion. Replace the Hex color code with the HTML color name from the previous example and voila, your code is ultra clear. 

HTML

<body>
  <a href="http://example.com/" style="color:red;">Red Link</a>
</body>
Demo on CodePen

Now, there are only 140 named HTML colors, but that should be plenty to get you started; we've even listed them all here if you're curious.

Link color using RGB color values

A third way to style your website link text is by using RGB values. Wrapping the values in rgb() enables them to be used inside a webpage just like a Hex code or color name. 

HTML

<body>
  <a href="http://example.com/" style="color:rgb(255,0,0);">Red Link</a>
</body>
Demo on CodePen

Using RGB values has the added advantage of enabling control over the opacity of the color. Replace rgb() with rgba() and you can specify a fourth value between 0 and 1 (0 for completely transparent, 1 for totally opaque). 

HTML

<body>
  <a href="http://example.com/" style="color:rgba(255,0,0,0.5);">Red Link</a>
</body>
Demo on CodePen

Link color using HSL color values

HSL, which stands for hue, saturation and lightness, are another set of color values supported by most modern browsers (IE9+). Like RGB, you can wrap the HSL values inside hsl() and use them in your webpage, like below. 

HTML

<body>
  <a href="http://example.com/" style="color:hsl(0,100%,50%);">Red Link</a>
</body>
Demo on CodePen

HSL also supports an alpha channel, and follows the same format as RGB; use hsla() instead of hsl(), and add a fourth value for opacity between 0 and 1. 

HTML

<body>
  <a href="http://example.com/" style="color:hsla(0,100%,50%,0.5);">Red Link</a>
</body>
Demo on CodePen