HTML Link Color
Customizing the color of HTML links is an excellent way to make them stand out from regular text or add a unique touch to your website. Here, we'll cover how to color your HTML links with HEX codes, RGB/HSL values, and HTML color names.
Link color using HEX color codes
We'll start with a HEX color code, which is likely the most widespread method for coloring links. Inside your HTML anchor tag (<a>), following the href attribute, add a style attribute with the color property set to your HEX code (we're using #FF0000).
Quite simple, isn't it? If you need a HEX code or want to see some color combinations, visit our color picker and color charts.
HTML
<body>
<a href="http://example.com/" style="color:#FF0000;">Red Link</a>
</body>Link color using HTML color names
HTML color names are frequently more readable than their HEX code equivalents and can be used in the same fashion. Just replace the HEX code from the last example with an HTML color name, and your code becomes exceptionally clear.
Currently, there are only 140 named HTML colors, but that's plenty to get you going. We've even compiled a list of them all here if you're interested.
HTML
<body>
<a href="http://example.com/" style="color:red;">Red Link</a>
</body>Link color using RGB color values
A third option for styling your website's link text is to use RGB values. By enclosing the values within rgb(), you can apply them on a webpage just like a HEX code or color name.
Using RGB values offers the additional advantage of controlling the color's opacity. Change rgb() to rgba(), and you can provide a fourth value between 0 (for completely transparent) and 1 (for totally opaque).
HTML
<body>
<a href="http://example.com/" style="color:rgb(255,0,0);">Red Link</a>
</body>HTML
<body>
<a href="http://example.com/" style="color:rgba(255,0,0,0.5);">Red Link</a>
</body>Link color using HSL color values
HSL, which is short for hue, saturation, and lightness, is another set of color values that most modern browsers (IE9+) support. Like RGB, you can enclose the HSL values within hsl() and apply them to your webpage, as shown below.
HSL also supports an alpha channel and utilizes the same format as RGB; use hsla() instead of hsl() and provide a fourth value for opacity between 0 and 1.
HTML
<body>
<a href="http://example.com/" style="color:hsl(0,100%,50%);">Red Link</a>
</body>HTML
<body>
<a href="http://example.com/" style="color:hsla(0,100%,50%,0.5);">Red Link</a>
</body>