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>
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>
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>
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>
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>
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>