Use the style attribute with the color property
The fastest way to change text color in HTML is to add a style attribute directly to the tag that holds your text. Inside the style, write color: followed by a color name or code, then a semicolon.
Here is the basic pattern:
<p style="color: blue;">This text is blue.</p>
The word inside the quotes after color: can be a color name like red, green, purple, or orange. It can also be a hex code (a six-digit color code that starts with #) like #FF5733 or an RGB value like rgb(255, 87, 51). All three methods work the same way.
Key Takeaways
- The style attribute with color property works on any HTML tag that contains text, including paragraphs, headings, links, and list items.
- Color names like blue, red, and green are the easiest to remember, but hex codes and RGB values give you thousands more color choices.
- A CSS stylesheet lets you set colors for many elements at once instead of typing style into every single tag.
- The color property changes text only; use background-color in the same style attribute if you want to change the background behind the text.
Common color names and how to use them
HTML recognizes about 140 color names you can type directly. Some of the most common are red, blue, green, yellow, orange, purple, pink, brown, gray, and black. You can also use white for text that stands out against a dark background.
To use a color name, type it exactly as shown—lowercase, no spaces, no quotes around it:
<h1 style="color: orange;">Welcome</h1>
<p style="color: gray;">This is a subtitle.</p>
Color names are straightforward and readable, which makes them good for learning. The downside is that you are limited to those 140 options. If you need a specific shade—like a lighter blue or a muted green—you will need to use a hex code or RGB value instead.
Hex codes for thousands of color choices
A hex code is a six-character code that starts with a # symbol and uses numbers and letters to describe a color. Each pair of characters controls how much red, green, and blue mix together. Hex codes let you pick from millions of colors instead of just 140.
Here are some examples:
<p style="color: #FF0000;">This is bright red.</p>
<p style="color: #0066CC;">This is a medium blue.</p>
<p style="color: #228B22;">This is forest green.</p>
You do not need to memorize hex codes. Use a color picker tool (search "hex color picker" in your browser) to find the exact shade you want, then copy and paste the code into your HTML. The # symbol must come first, and the six characters must stay together with no spaces.
RGB values as an alternative to hex codes
RGB stands for red, green, and blue. An RGB value tells the browser how much of each color to mix, using numbers from 0 to 255. It looks like this:
<p style="color: rgb(255, 0, 0);">This is bright red.</p>
<p style="color: rgb(0, 102, 204);">This is a medium blue.</p>
The three numbers inside the parentheses are red, green, and blue amounts. RGB and hex codes produce the same colors—they are just two different ways to write the same instruction. Use whichever one feels easier to you. Most people find hex codes simpler because they are shorter, but RGB can be easier to understand if you think in terms of mixing colors.
Using a stylesheet to color multiple elements at once
If you want to change the color of many paragraphs, headings, or other elements, typing style into each tag gets repetitive. A stylesheet (also called CSS) lets you set a color rule once and explore it to every matching tag on the page.
Add a <style> tag inside the <head> section of your HTML, before the closing </head> tag. Inside it, write the tag name, then curly braces, then the color rule:
<style> p { color: navy; } </style>
Now every <p> tag on that page will display in navy blue without you having to add style to each one. You can add multiple rules in the same stylesheet:
<style> p { color: navy; } h1 { color: darkgreen; } h2 { color: darkred; } </style>
A stylesheet is cleaner and faster when you have a lot of text to color. It also makes changes easier—if you decide all your paragraphs should be a different color, you only have to change one line instead of fifty.
Changing background color behind text
The color property changes the text itself. If you want to change the background color behind the text, use background-color in the same style attribute:
<p style="color: white; background-color: navy;">White text on a navy background.</p>
You can use color names, hex codes, or RGB values for background-color just like you do for text color. Separate multiple properties with a semicolon. This is useful when you want text to stand out—for example, white text on a dark background or dark text on a light yellow background.
Common mistakes to avoid
The most common mistake is forgetting the colon after the word color. It must be color: not color. The second mistake is forgetting the semicolon at the end. If you write style="color: blue" without the semicolon, it usually still works, but it is good practice to include it, especially if you add more properties later.
Another mistake is misspelling the color name or forgetting the # symbol on a hex code. color: #FF0000 works, but color: FF0000 does not. Color names must also be spelled correctly—color: darkblue works, but color: dark blue with a space does not.
If your text color does not show up, check that it has enough contrast with the background. Light gray text on a white background is hard to read. Dark text on a dark background is invisible. Test your colors by looking at the page in a browser to make sure readers can actually see the text.
Frequently Asked Questions
Can I change the color of a link?
Yes. Use the style attribute on the <a> tag the same way you would on a paragraph: <a href="page.html" style="color: purple;">Click here</a>. You can also use a stylesheet to color all links at once by writing a { color: purple; } in a style tag.
What is the difference between hex codes and RGB?
They describe the same colors in different ways. Hex codes use six characters (like #FF5733), while RGB uses three numbers (like rgb(255, 87, 51)). Both work in HTML. Hex codes are shorter to type, but RGB can be easier to understand if you think about mixing red, green, and blue light.
How do I make text a lighter or darker shade of a color?
Use a color picker tool to find the exact hex code or RGB value you want. You can also add transparency to a color by using rgba instead of rgb—the fourth number (0 to 1) controls how see-through it is. For example, rgba(255, 0, 0, 0.5) is semi-transparent red.
Does the color property work on all HTML tags?
It works on any tag that contains text, including paragraphs, headings, list items, links, buttons, and table cells. It does not work on tags that do not hold text, like <img> or <br>.