Coloring HTML links is a terrific method to distinguish them from plain text or to add some flair to your website. Here’s how to color HTML links with Hex color codes, RGB and HSL values, and HTML color names.
Using Hex color codes, link color
Using a Hex color code will be our first step, as this is likely the most popular way to add color to links. Place a style attribute with the color property set to your Hex color code (in our example, #FF0000) after the href attribute in your HTML anchor tag (<a>).
<body>
<a href="http://example.com/" style="color:##FF0000;">Red Link</a>
</body>Using HTML color names, link color
Similar in usage, HTML color names are frequently easier to read than their Hex code equivalents. Your code will now be quite evident if you swap out the Hex color code with the HTML color name from the previous example.
<body>
<a href="http://example.com/" style="color:red;">Red Link</a>
</body>Using HTML color names, link color
Similar in usage, HTML color names are frequently easier to read than their Hex code equivalents. Your code will now be quite evident if you swap out the Hex color code with the HTML color name from the previous example.
Using RGB color values, link color
Using RGB values is a third style method for your website link text. When values are wrapped with rgb(), they can be utilized inside a webpage in the same way as color names or Hex codes.
<body>
<a href="http://example.com/" style="color:rgb(255,0,0);">Red Link</a>
</body>One other benefit of using RGB values is that it allows you to alter the color’s opacity. To specify a fourth number between 0 and 1, substitute rgba() for rgb(). (0 represents completely transparent, and 1 represents absolutely opaque).
<body>
<a href="http://example.com/" style="color:rgba(255,0,0,0.5);">Red Link</a>
</body>Using HSL color values, link color
The majority of contemporary browsers (IE9+) offer HSL, which stands for hue, saturation, and lightness, as an additional set of color values. Similar to RGB, you can use the HSL values on your webpage by wrapping them inside hsl(), as shown below.
<body>
<a href="http://example.com/" style="color:hsl(0,100%,50%);">Red Link</a>
</body>The format for HSL is the same as RGB; instead of using hsl(), use hsla(), and add a fourth value for opacity between 0 and 1. HSL also allows an alpha channel.
<body>
<a href="http://example.com/" style="color:hsla(0,100%,50%,0.5);">Red Link</a>
</body>
