HTML

HTML Link Colors

Hyperlinks play a crucial role in web navigation, connecting users to resources across the web. But links don’t have to just be functional; they can also boost the visual experience of your site. By customizing link colors, you can make your design more cohesive and help users easily navigate your content.

Default HTML Link Colors

Browsers automatically assign default colors to different link states to help users distinguish between them:

Link State	Description	Default Color	Appearance
Unvisited Links	Links that haven’t been clicked yet	Blue (`#0000FF`)	Underlined, Blue
Visited Links	Links that have already been clicked by the user	Purple (`#800080`)	Underlined, Purple
Active Links	Links that are currently being clicked	Red (`#FF0000`)	Underlined, Red

These default colors may not always match your website’s design, but with CSS, you can easily customize them to suit your style.

Customizing Link Colors with CSS

By applying CSS, you can style your links to match your site’s aesthetic and provide a more engaging user experience.

Example Custom Link Colors:

a:link {
  color: #1a73e8; /* Custom unvisited link color */
}
a:visited {
  color: #6a0dad; /* Custom visited link color */
}
a:active {
  color: #ff4500; /* Custom active link color */
}

In this example:

The unvisited links are styled with a custom blue color (#1a73e8).
Once visited, links turn purple (#6a0dad).
Active links, clicked by the user, are styled in bright orange-red (#ff4500).

Using HTML Hex Codes

Hexadecimal (Hex) codes are one of the most precise ways to define colors in HTML. They allow you to control the exact shade you want for your links. Here’s an example of using a Hex code to style a link on SitePoint:

<a href="https://www.sitepoint.com/" style="color:#FF5733;">Visit
SitePoint</a>

Output:

Visit SitePoint

In this example, the link text will appear in a vibrant orange-red color (#FF5733), offering a bold look that grabs attention.

Using HTML Color Names

HTML color names are straightforward and easy to use, making them perfect for quick adjustments. They don't require you to remember hex or RGB codes, and there are over 140 color names to choose from.

<a href="https://www.sitepoint.com/" style="color:DarkOliveGreen;">
Explore SitePoint</a>

Output:

Explore SitePoint

Using DarkOliveGreen in this example provides a more muted, professional tone to the link.

Using HTML RGB Values

RGB values give you fine-tuned control over your link colors by specifying the red, green, and blue components. For even more flexibility, you can use RGBA to add transparency.

<a href="https://www.sitepoint.com/blog/"
style="color:rgb(0,128,255);">Read SitePoint Articles</a>
<br>
<a href="https://www.sitepoint.com/premium/library/all/htmlcss/"
style="color:rgba(0,128,255,0.5);">Learn on SitePoint</a>

Output:

Read SitePoint Articles
Learn on SitePoint

In these examples:

The RGB value creates a bright blue (rgb(0,128,255)).
The RGBA version makes it semi-transparent, with an alpha level of 0.5, perfect for a more subtle design.

Using HTML HSL Values

HSL (Hue, Saturation, Lightness) allows you to define colors based on their hue, intensity, and brightness. This method offers intuitive control over color adjustments, and HSLA adds transparency.

<a href="https://www.sitepoint.com/html/"
style="color:hsl(120,100%,50%);">Discover SitePoint HTML Tutorials</a>
<br>
<a href="https://www.sitepoint.com/community/c/html-css/25"
style="color:hsla(120,100%,50%,0.5);">Browse SitePoint HTML Community</a>

Output:

Discover SitePoint HTML Tutorials
Browse SitePoint HTML Community

In this case:

The HSL example gives the link a vivid green tone.
The HSLA version makes the color semi-transparent, adding depth to your design.

Customizing link colors using any of these methods helps enhance the look and feel of your website, aligning them with your brand and making your links more engaging for users.

Styling HTML Links as Buttons

Turning links into buttons is a great way to enhance your website’s user interface, making important calls-to-action more noticeable. You can easily style HTML links to look like buttons using CSS. Here's an example of how to transform a hyperlink on SitePoint into a button:

<a href="https://www.sitepoint.com/premium/library/books/htmlcss/"
class="button-link">Explore SitePoint HTML Books</a>

<style>
.button-link {
  background-color: #f44336;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  transition: background-color 0.3s;
}
.button-link:hover {
  background-color: darkred;
}
</style>

Output:

Explore SitePoint HTML Books

In this example, the link to SitePoint is styled with a red background, white text, and rounded corners. On hover, the background transitions to a darker red, providing a sleek, interactive button effect.

In HTML and CSS, hover refers to the state when a user moves their cursor over a specific element, usually a link or button, without clicking it. The :hover pseudo-class in CSS is used to define styles that will be applied to an element when the mouse pointer is placed over it.

FAQ on HTML Link Colors

How do I make my HTML link a different color?

You can change the color of an HTML link by using the color property in CSS. For example:

a:link {
  color: green;
}

How to change the link underline color in HTML?

You can customize the underline color by removing the default text-decoration and adding a border-bottom style to simulate an underline with your chosen color:

a {
  text-decoration: none;
  border-bottom: 2px solid red;
}

What is the default color code for hyperlinks in HTML?

HTML hyperlinks have default colors that vary depending on their state (unvisited, visited, or active). These colors help users identify which links they have already clicked on or are currently clicking.

Link State	Default Color	HEX Code
Unvisited Link	Blue	`#0000FF`
Visited Link	Purple	`#800080`
Active Link	Red	`#FF0000`

How to change the link color when hovering over a link in HTML?

To change the link color on hover, use the :hover pseudo-class. This helps highlight the link when users hover over it, creating a dynamic visual effect:

a:hover {
  color: orange;
}

Previous Next