The Simplest Way to Change Text Color
To change text color in HTML, use the style attribute with the CSS property color. The most direct method is to add style="color: colorname;" directly to any text tag. For example, <p style="color: red;">This text is red</p> will display the paragraph in red.
You can specify color in three ways: by name (like red, blue, green), by hexadecimal code (like #FF0000 for red), or by RGB values (like rgb(255, 0, 0) for red). Named colors work for common shades; hex codes and RGB give you precise control over thousands of colors.
This inline method works on any text element: paragraphs (<p>), headings (<h1> through <h6>), links (<a>), list items (<li>), and spans (<span>).
Key Takeaways
- Add style="color: colorname;" to any HTML tag to change that text's color when ready.
- Use color names like red and blue, hex codes like #FF0000, or RGB values like rgb(255, 0, 0) — all three work the same way.
- For multiple elements, create a <style> block in the <head> section instead of repeating the style attribute on each tag.
- Hex codes let you pick from 16 million colors; the first two digits control red, the next two control green, and the last two control blue.
Using a Style Block for Multiple Elements
If you want to change the color of many elements without typing the style attribute on each one, create a style block in the <head> section of your HTML file. This approach is cleaner and easier to update later.
Place this code between <head> and </head>:
<style> p { color: blue; } h1 { color: green; } </style>
This tells the browser to make all paragraphs blue and all level-1 headings green. You can add as many rules as you need. If you later want to change all paragraph text from blue to purple, you only change one line instead of editing every paragraph tag.
Hex Codes and RGB Values Explained
Named colors like red, blue, and orange cover the basics, but hex codes and RGB values let you pick exact shades. A hex code is a six-digit number starting with #: #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.
The first two digits control red intensity, the middle two control green, and the last two control blue. Each pair ranges from 00 (none of that color) to FF (maximum). So #FFFF00 mixes red and green to make yellow, and #808080 mixes equal amounts of all three to make gray.
RGB values work the same way but use numbers from 0 to 255 instead of hex digits. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(128, 128, 128) is gray. Use whichever format feels natural to you — browsers understand all three equally well.
Changing Link Colors
Links have a default color (usually blue for unvisited, purple for visited). To override this, use the style attribute on the <a> tag itself: <a href="page.html" style="color: orange;">Click here</a>.
If you want all links on your page to be the same color, add a style rule in the <head>:
<style> a { color: orange; } </style>
You can also style visited links separately using a:visited { color: darkred; }, which changes the color only after someone has clicked the link.
Using CSS Classes for Reusable Colors
When you have several different text colors used throughout your page, CSS classes save repetition. Define each color once in a style block, then explore it to any element by name.
Add this to your <head>:
<style> .warning { color: red; } .success { color: green; } .info { color: blue; } </style>
Then use the class on any tag: <p class="warning">This is a warning</p> or <span class="success">Success!</span>. If you later decide warnings should be orange instead of red, change only the .warning rule and every element using that class updates automatically.
Common Color Names and Their Hex Equivalents
HTML recognizes about 140 named colors. Here are the ones you will use most often:
| Color Name | Hex Code | RGB Value |
|---|---|---|
| red | #FF0000 | rgb(255, 0, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| green | #008000 | rgb(0, 128, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
For a full list of all 140 named colors, search "HTML color names" — every major browser supports them all.
Frequently Asked Questions
What is the difference between using style attribute and a style block?
The style attribute changes color for one specific tag. A style block in the <head> changes color for all matching tags at once. Use the attribute for one-off changes; use the block when the same color applies to many elements or when you want to update it later without editing each tag.
Can I use color names like "lightblue" or "darkred"?
Yes. HTML recognizes extended color names like lightblue, darkred, lightgray, and darkgreen. These are easier to remember than hex codes for common shades. If the exact shade you want is not a named color, use a hex code or RGB value instead.
Why does my text color not show up?
The most common reason is a typo in the color name or hex code. Check that hex codes start with # and have exactly six digits. Also check that the color has enough contrast with the background — white text on a light background will be invisible. If you are using a class, make sure the class name in the style block matches the class name on the tag.
Can I change text color and background color at the same time?
Yes. Add both properties to the style attribute or style rule: style="color: white; background-color: black;". The color property controls text; background-color controls the background behind it.
What happens if I use a color name the browser does not recognize?
The browser ignores the unrecognized color and displays the text in its default color (usually black). There is no error message — the text just will not change. Always double-check spelling, or use a hex code or RGB value if you are unsure whether a name is valid.