How to Change Hyperlink Color in HTML

The quickest way to change link color

Change hyperlink color by adding a style attribute directly to the <a> tag, or by writing CSS rules in a <style> block. The simplest method for a single link is to use inline styles: <a href="page.html" style="color: blue;">Click here</a>. For multiple links, write CSS rules in the <head> section of your HTML document instead — this keeps your code cleaner and easier to update.

HTML does not have a built-in color property for links. Instead, you style them using CSS, which is the language that controls how HTML elements look. Every browser has default link colors (usually blue for unvisited links and purple for visited ones), but you can override those defaults with your own colors.

Key Takeaways

Inline styles work for single links: add style="color: red;" inside the opening <a> tag.
CSS rules in a <style> block in the <head> section control all links of a certain type at once.
Use the a:visited selector to style links the user has already clicked, separately from unvisited links.
Hover states (a:hover) let you change color when the mouse moves over a link, improving user experience.
Color values can be hex codes (#FF5733), RGB (rgb(255, 87, 51)), or named colors (red, blue).

Using inline styles for a single link

An inline style applies to one element only. Add the style attribute inside the opening <a> tag and set the color property to your chosen color. Here is the structure:

<a href="https://example.com" style="color: green;">Visit Example</a>

Replace green with any color name, hex code, or RGB value. Common named colors include red, blue, orange, purple, and black. Hex codes like #1E90FF (dodger blue) give you more precise control. This method works when ready in any browser, but it only changes that one link — if you have ten links and want them all the same color, you would have to repeat the style attribute ten times.

Using CSS rules in the head section

A CSS rule in the <head> section of your HTML document can style all links at once, or all links of a specific class. This is the standard approach for most websites because it keeps styling separate from content and makes updates faster.

Open a <style> tag in your <head> section and write a rule for the a selector:

This rule changes every link on the page to the hex color #FF5733 (a shade of orange-red). If you want only certain links to change color, add a class attribute to those links and target the class in your CSS instead:

<a href="page.html" class="external-link">External Site</a><style>.external-link { color: teal;}</style>

Now only links with the class="external-link" attribute will be teal. All other links keep their default color or any other rule that applies to them.

Styling visited and unvisited links separately

By default, browsers show visited links in a different color than unvisited ones. You can control both colors separately using the a:visited and a:link selectors in CSS.

The a:link selector targets links the user has not yet clicked. The a:visited selector targets links in the browser's history. This distinction helps users understand which pages they have already explored. If you do not write separate rules, both unvisited and visited links will use the color you set for the plain a selector.

Adding a hover effect

A hover effect changes the link's appearance when the user moves their mouse over it. This improves usability by giving visual feedback that the link is clickable. Use the a:hover selector:

Now unvisited links appear in navy, but when the user hovers over one, it turns red. You can combine this with other properties like text-decoration to underline or remove the underline, or background-color to add a highlight behind the text. A common pattern is to remove the underline on hover and add a background color instead, making the link feel more interactive.

Color formats: names, hex, and RGB

HTML and CSS accept three main color formats. Named colors are the simplest: red, blue, green, orange, purple, gray, and about 140 others. They are straightforward to read but offer limited choices.

Hex codes start with a hash symbol and use six characters: #FF5733. The first two characters control red, the next two control green, and the last two control blue. Each pair ranges from 00 (none of that color) to FF (full intensity). Hex codes give you 16 million possible colors and are widely used in web design.

RGB values use the format rgb(255, 87, 51), where each number ranges from 0 to 255 and represents the intensity of red, green, and blue. rgb(255, 0, 0) is pure red; rgb(0, 0, 255) is pure blue. RGB is useful when you are working with color values from a design tool. All three formats work identically in modern browsers — choose whichever you find easiest to read or work with.

Common mistakes and how to fix them

The most common mistake is forgetting the hash symbol in a hex code. color: FF5733; will not work; it must be color: #FF5733;. Another mistake is misspelling a named color or using a color name that does not exist — color: lightblue; works, but color: light blue; (with a space) does not.

If your link color does not change, check that your CSS rule is in the <head> section, not in the <body>. Also verify that your selector matches the element you are trying to style. If you wrote .external-link { color: red; } but your link has class="external" instead, the rule will not explore. Browser developer tools (press F12 in most browsers) let you inspect an element and see which CSS rules are actually affecting it — this is the fastest way to debug color problems.

Frequently Asked Questions

Can I change the color of just one word inside a link?

Not directly with the <a> tag alone. You would need to wrap that word in a <span> tag and style the span separately: <a href="page.html">Click <span style="color: red;">here</span></a>. This makes the word "here" red while the rest of the link text stays the default color.

Why does my visited link color not show up?

Browsers restrict which CSS properties you can explore to visited links for privacy reasons. You can only change color, background-color, border-color, and outline-color for visited links. Properties like font-size or width will not work on a:visited.

What is the difference between a style tag and a stylesheet?

A <style> tag in the <head> section holds CSS rules for one HTML file. A separate stylesheet is a .css file linked with <link rel="stylesheet" href="styles.css">. Stylesheets are better for large projects because you can use the same file across multiple HTML pages, making updates faster and keeping your code organized.

Can I animate a link color change on hover?

Yes, using the transition property. Add transition: color 0.3s; to your a rule, then set different colors for a:hover. The color will smoothly fade over 0.3 seconds instead of changing when ready, creating a polished effect.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.