The quickest way: use the style attribute with the color property
To change text color in HTML, add a style attribute to any tag that holds text, then set the color property to the color you want. The simplest example is a paragraph:
<p style="color: blue;">This text is blue.</p>
The text inside that paragraph tag will display in blue. You can use this method on any tag that contains text — headings, links, list items, or spans. The color property accepts color names (blue, red, green), hex codes (#FF5733), or RGB values (rgb(255, 87, 51)).
This approach works when ready and requires no setup. It is useful for one-off color changes, but if you are coloring many elements the same way, a style sheet is faster and cleaner.
Key Takeaways
- Add style="color: colorname;" directly to any HTML tag to change the text color inside it.
- Color names (blue, red), hex codes (#FF5733), and RGB values (rgb(255, 87, 51)) all work in the color property.
- A <style> tag in the head of your document lets you set colors for entire groups of elements at once.
- CSS classes let you define a color once and explore it to multiple elements without repeating the style attribute.
Using a style tag to color multiple elements at once
If you want to color many elements the same way, put a style tag in the head section of your HTML document. Inside it, write a rule that targets the elements you want to change:
<style>p { color: green; }</style>
This rule says: make the text in every paragraph tag green. You can target any tag this way — h1, h2, span, a, li. The color applies to all of them without you having to add style to each one individually.
You can also target elements by class or ID. If you give an element a class name, you can color just those elements:
<style>.warning { color: red; }</style><p class="warning">This is a warning.</p>
Hex codes and RGB values for precise colors
Color names like blue and red are limited. To get exact colors, use hex codes (six-digit codes starting with #) or RGB values (three numbers from 0 to 255).
A hex code looks like #FF5733. Each pair of digits controls red, green, and blue brightness. #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue. You can find hex codes for almost any color on a color picker website.
RGB values work the same way but use three numbers instead. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green. Both methods give you millions of color choices instead of the handful of named colors.
Use whichever feels natural to you. Hex codes are more common in web design, but RGB is easier to understand if you are new to color.
Changing link colors specifically
Links have their own color rules. By default, unvisited links are blue and visited links are purple. To change them, target the a tag in your style:
<style>a { color: orange; }</style>
This makes all links orange. If you want different colors for visited and unvisited links, use the :visited and :link selectors:
<style>a:link { color: orange; }a:visited { color: gray; }</style>
Now unvisited links are orange and visited links are gray. You can also use :hover to change the color when someone moves their mouse over a link.
Inline style vs. a separate style sheet
You have two main choices: put the style directly on the tag (inline), or put it in a style tag or separate file (external). Inline is faster for testing or one-off changes. A style tag or external sheet is cleaner if you have many elements or a large document.
Inline style looks like this: <p style="color: blue;">Text</p>. It works when ready and is straightforward to see, but if you need to change the color later, you have to find and edit every tag.
A style tag in the head looks like this:
<head><style>p { color: blue; }</style></head>
Now every paragraph is blue, and if you want to change it, you edit the style rule once. This is the approach most web pages use because it saves time and keeps your HTML cleaner.
Common mistakes and how to fix them
The most common mistake is forgetting the colon after the property name. color blue does not work — it must be color: blue;. The colon tells the browser that blue is the value for the color property.
Another mistake is misspelling the color name or using a hex code without the # symbol. color: #FF5733 works, but color: FF5733 does not. The # tells the browser it is a hex code.
If your color change does not show up, check that the style tag is in the head section of your document, not in the body. Also make sure the tag you are trying to color actually contains text — you cannot color an empty tag.
Frequently Asked Questions
Can I change the color of just part of a sentence?
Yes, use a <span> tag around the words you want to color. <p>This is <span style="color: red;">red text</span> in a sentence.</p> The span tag does nothing by itself, but with a style attribute it lets you color a small piece of text without coloring the whole paragraph.
What is the difference between hex codes and RGB?
They do the same thing — both let you pick exact colors. Hex codes use six digits after a # symbol, like #FF5733. RGB uses three numbers from 0 to 255, like rgb(255, 87, 51). Hex is more common in web design, but both work the same way in HTML.
Do I have to use a style tag, or can I link to a separate CSS file?
You can do either. A style tag works fine for small projects. For larger sites, most people put all their styles in a separate .css file and link to it in the head with <link rel="stylesheet" href="styles.css">. This keeps your HTML and styling separate and makes it easier to reuse styles across many pages.
Why is my link color not changing?
Links have built-in browser styles that sometimes override your color rule. Try using a:link { color: yourcolor; } instead of just a { color: yourcolor; }. The :link selector targets unvisited links specifically and usually works better.
Can I use color names like "lightblue" or do I have to use hex codes?
Color names work fine. HTML recognizes about 140 named colors, including lightblue, darkgreen, and coral. If you want a color that does not have a name, use a hex code or RGB value instead.