background

Discover how to change the color of your HTML links using Hex color codes, HTML color names, RGB values, and HSL values.

HTML Link Color

Coloring HTML links is an excellent way to distinguish them from regular text and add flair to your website. In this guide, we will show you how to style your HTML links using Hex color codes, RGB and HSL values, and HTML color names. By mastering these techniques, you can enhance the user experience on your website, making links more visually appealing and easily recognizable.

Link Color Using Hex Color Codes

We'll start with Hex color codes, which are the most common method for adding color to links. These six-digit codes represent the intensity of red, green, and blue in a color. In your HTML anchor tag (<a>), after the href attribute, insert a style attribute with the color property set to your Hex color code (for example, #FF0000). This straightforward method allows for precise color specification.

html

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

Pretty simple, right? If you need a Hex color code or want to explore some color combinations, check out our color picker and color charts, which provide an extensive selection of hues to choose from.

Link Color Using HTML Color Names

HTML color names are often easier to read than Hex codes and can be used in much the same way. Simply replace the Hex color code from the previous example with the corresponding HTML color name (like red), and voilà—your code becomes clearer and more maintainable, making it easier for others to understand your styling choices.

html

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

There are 140 named HTML colors available, which should be sufficient to get you started. You can find the complete list of colors <cp>here</cp>, allowing you to quickly select a color that fits your design.

Link Color Using RGB Color Values

Another way to style your links is by using RGB values, which provide a way to define colors based on their red, green, and blue components. Wrapping the values in rgb() allows you to use them in your webpage just like Hex codes or color names, giving you flexibility in defining your colors.

html

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

Using RGB values also lets you control the color's opacity. Replace rgb() with rgba() and specify a fourth value between 0 and 1 (0 for completely transparent, 1 for fully opaque). This feature enables you to create interesting visual effects, such as overlays or ghosted text.

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, is another set of color values supported by most modern browsers (IE9+). This method allows for intuitive color selection, as you can easily adjust the hue, how vivid the color is (saturation), and how light or dark the color appears (lightness). Similar to RGB, you can wrap the HSL values inside hsl() and use them on your webpage.

html

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

HSL also supports an alpha channel, allowing for opacity adjustments. Use hsla() instead of hsl() and add a fourth value for opacity between 0 and 1. This gives you even more control over how your links appear in relation to the background and other elements on your page.

html

<body>
  <a href="http://example.com/" style="color:hsla(0,100%,50%,0.5);">Red Link</a>
</body>
Share with your friends!
  • Tweet
  • Post
  • LinkedIn
  • Reddit