Dibya Web

HTML Link Colors: CSS Styles, States & Best Guide

Learn how to change HTML link colors using CSS. Understand link states, hover effects, visited styles, accessibility tips, and best practices.

HTML Link Colors: Complete Guide with Examples, Codes, and Best Practices

Hyperlinks are one of the most important elements in web design. They connect pages, guide users, and improve navigation. But beyond functionality, link colors play a crucial role in user experience, accessibility, and design consistency.

In this detailed guide, you will learn everything about HTML link colors — including default colors, how to change them using CSS, hover effects, visited links, accessibility standards, and modern best practices.

What Are HTML Link Colors?

HTML link colors define how hyperlinks appear on a web page. These colors change based on the link’s state, such as:

  • Normal (unvisited)
  • Visited
  • Hover
  • Active

By default, browsers automatically apply standard colors to these states, but developers can fully customize them using CSS.

Default HTML Link Colors

When you create a simple hyperlink using the <a> tag:

<a href="https://example.com">Visit Example</a>

Browsers apply these default colors:

Link StateDefault ColorDescription
UnvisitedBlueNormal link
VisitedPurpleLink already clicked
ActiveRedWhen being clicked

These default styles may slightly vary depending on the browser, but traditionally:

  • Blue = unvisited
  • Purple = visited
  • Red = active

Understanding Link States in HTML and CSS

To customize link colors, you must understand the four main CSS pseudo-classes:

1. a:link

Represents a normal, unvisited link.

2. a:visited

Represents a link that the user has already clicked.

3. a:hover

Represents a link when the mouse pointer is over it.

4. a:active

Represents a link while it is being clicked.

How to Change HTML Link Colors Using CSS

The modern way to change link colors is through CSS.

Basic Example

<style>
a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}
</style>

This code customizes all link states.

The Correct Order of Link Styling (LVHA Rule)

When styling links, CSS order matters.

Use this order:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

This is known as the LVHA rule.

If you change the order, some styles may not apply correctly.

Using Inline HTML Attributes (Old Method)

In earlier versions of HTML, developers used the <body> tag to define link colors:

<body link="blue" vlink="purple" alink="red">

Where:

  • link = unvisited
  • vlink = visited
  • alink = active

However, this method is outdated and not recommended in modern web development. Always use CSS instead.

Custom Link Colors with Hex, RGB, and HSL

You can define colors in multiple formats.

Hex Color Example

a {
  color: #1a73e8;
}

RGB Example

a {
  color: rgb(26, 115, 232);
}

HSL Example

a {
  color: hsl(217, 90%, 52%);
}

All these produce a modern blue shade.

Adding Hover Effects for Better UX

Hover effects improve user experience by giving visual feedback.

Example with Underline and Color Change

a {
  text-decoration: none;
  color: #0077cc;
}

a:hover {
  text-decoration: underline;
  color: #005999;
}

This creates a smooth, professional look.

Styling Specific Links Using Classes

You can assign different colors to different types of links.

Example

<a href="#" class="primary-link">Primary</a>
<a href="#" class="secondary-link">Secondary</a>


.primary-link {
  color: green;
}

.secondary-link {
  color: orange;
}

This helps in creating structured designs.

Removing Underline from Links

By default, links are underlined. To remove it:

a {
  text-decoration: none;
}

To add it back on hover:

a:hover {
  text-decoration: underline;
}

Accessibility and Link Color Contrast

Choosing link colors is not just about design. It also affects accessibility.

Important Guidelines:

  • Ensure sufficient contrast between link text and background.
  • Follow WCAG contrast ratio standards:
    • Minimum 4.5:1 for normal text
    • Minimum 3:1 for large text

Why This Matters

Poor contrast makes links difficult to see, especially for users with visual impairments.

Best Practice Tip

Do not rely only on color to distinguish links. Use:

  • Underlines
  • Bold text
  • Background highlight
  • Icons

Modern Design Trends in Link Colors

Modern websites often use:

  • Brand color links
  • Minimal underlines
  • Subtle hover animations
  • Transition effects

Example with Smooth Transition

a {
  color: #ff6600;
  transition: color 0.3s ease;
}

a:hover {
  color: #cc5200;
}

This creates a smooth color shift effect.

Link Colors in Navigation Menus

Navigation menus often require different styling.

Example:

.navbar a {
  color: white;
}

.navbar a:hover {
  color: yellow;
}

This overrides global link styling for specific sections.

Using CSS Variables for Link Colors

Modern CSS allows variables:

:root {
  --link-color: #0066cc;
  --hover-color: #004999;
}

a {
  color: var(--link-color);
}

a:hover {
  color: var(--hover-color);
}

This makes theme management easier.

Dark Mode Link Colors

In dark mode, link colors must be adjusted for readability.

Example:

body.dark-mode a {
  color: #4da6ff;
}

Lighter shades work better on dark backgrounds.

Common Mistakes in Link Color Design

  1. Removing underline without visual alternative
  2. Using low contrast colors
  3. Making visited links indistinguishable
  4. Ignoring mobile touch feedback
  5. Styling links inconsistently across pages

Avoid these to improve usability.

HTML Link Color Best Practices Checklist

  • Use CSS instead of old HTML attributes
  • Follow LVHA order
  • Ensure contrast accessibility
  • Maintain consistent branding
  • Provide hover and focus states
  • Test across browsers
  • Support dark mode

Example: Complete Modern Link Styling

<style>
:root {
  --primary-link: #1a73e8;
  --visited-link: #6a1b9a;
  --hover-link: #0b57d0;
  --active-link: #d93025;
}

a {
  color: var(--primary-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:visited {
  color: var(--visited-link);
}

a:hover {
  color: var(--hover-link);
  text-decoration: underline;
}

a:active {
  color: var(--active-link);
}
</style>

This is clean, modern, and accessible.

Conclusion

HTML link colors are more than decorative choices. They directly influence usability, navigation clarity, accessibility, and overall user experience.

While browsers provide default link colors, modern web development relies on CSS for complete control. By understanding link states, following the LVHA rule, ensuring proper contrast, and applying thoughtful design principles, you can create links that are both functional and visually appealing.

Whether you’re building a simple blog or a large website, mastering HTML link colors helps you design better and more user-friendly web pages.

Frequently Asked Questions (FAQs)

1. What are the default HTML link colors?

By default, unvisited links appear blue, visited links appear purple, and active links appear red in most browsers.

2. How can I change link colors in HTML?

You can change link colors using CSS pseudo-classes like a:link, a:visited, a:hover, and a:active.

3. Why is the LVHA order important in link styling?

The LVHA order (Link, Visited, Hover, Active) ensures CSS styles apply correctly without being overridden.

4. How do I remove the underline from links?

Use text-decoration: none; in CSS to remove the underline and optionally restore it on hover.

5. What is the best link color for accessibility?

A link color should have a minimum 4.5:1 contrast ratio against the background and should not rely only on color for identification.