HEX
#DAF7A6
RGB
218, 247, 166

CSS Link Color

It's easy to enhance your website with some colorful links. In this guide, we'll show you how to use HEX codes and the CSS color property to give your anchor tags a much-needed visual boost. As a bonus, we'll also demonstrate how to use CSS to change the link color on hover. Shall we begin?

CSS link color using an HTML tag

When it comes to CSS color, links, or <a> tags, function just like regular text. This means that to change a link's color, you just need to apply the CSS color property to the anchor tag with any color HEX you prefer. In the example below, we use red.

For the examples in this guide, we will use a HEX code, but don't forget there are many other valid CSS color values. Check out our other CSS guide for a summary of all the different ways to use color in your stylesheets.

HTML
<head>
  <style>
    a { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a href="http://example.com">A Red Link</a>
</body>

CSS link color using an ID

IDs are another way to style an <a> tag with CSS. You have likely seen them before; IDs are prefixed with a '#' symbol in CSS and are typically intended for single use on any given webpage.

HTML
<head>
  <style>
    #link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a id="link" href="http://example.com">A Red Link</a>
</body>

CSS link color using a class

Classes, in contrast, are designed to be reused across a webpage and are far more common than IDs. CSS classes are prefixed with a '.' and you can even attach multiple classes to a single HTML element. Here, we use a class with the same red HEX code.

HTML
<head>
  <style>
    .link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a class="link" href="http://example.com/one">A Red Link</a>
  <a class="link" href="http://example.com/two">Another Red Link</a>
</body>

Changing link color on hover using CSS

You've likely observed links changing color when you hover your cursor over them. This stylish effect is very simple to achieve with CSS. To alter your link's color on hover, use the :hover pseudo-property on the link's class and assign it a different color.

The hover property can be applied in the same way to both IDs and the elements themselves, as shown earlier in this tutorial. Color is just one of many properties you can modify with :hover; for fun, try experimenting with underlines, border colors, and backgrounds.

SCSS
.link { color: #FF0000; } 
.link:hover { color: #00FF00; }