The Quickest Way to Change Text Color
The fastest way to change text color in HTML is to use the style attribute with the color property. Add style="color: colorname;" directly inside any opening tag that holds text — a paragraph, heading, link, or span.
For example, to make a paragraph red, write: <p style="color: red;">This text is red.</p>. The browser reads the style attribute and renders the text in that color. You can use color names (red, blue, green), hex codes (#FF0000 for red), or RGB values (rgb(255, 0, 0)).
This method works when ready and requires no setup. It is the best choice when you are changing the color of just one or two pieces of text on a page.
Key Takeaways
- The style attribute with color property is the fastest way: style="color: red;" inside any text tag.
- You can name colors directly (red, blue, green) or use hex codes (#FF0000) and RGB values (rgb(255, 0, 0)).
- A CSS style block in the head section lets you set colors for all paragraphs, headings, or links at once without repeating code.
- The span tag wraps small pieces of text so you can color them differently from surrounding text without breaking paragraphs.
- Hex codes and RGB give you millions of color choices, while color names are limited to about 140 standard options.
Using Color Names, Hex Codes, and RGB Values
HTML recognizes about 140 color names you can type directly: red, blue, green, orange, purple, gold, navy, teal, and many others. These are the easiest to read and remember, but they give you limited choices. If you need a specific shade, use a hex code (a six-digit code starting with #) or an RGB value (three numbers from 0 to 255).
A hex code like #FF0000 represents red in a format browsers understand. The first two digits control red intensity, the next two control green, and the last two control blue. RGB works the same way but uses decimal numbers instead: rgb(255, 0, 0) is also red. Both methods give you 16 million possible colors.
Here are three ways to write the same color change:
- <p style="color: red;">Color name</p>
- <p style="color: #FF0000;">Hex code</p>
- <p style="color: rgb(255, 0, 0);">RGB value</p>
Use color names when you want simplicity and do not need an exact shade. Use hex codes or RGB when you are matching a brand color or a specific design mockup.
Coloring Specific Words Inside a Paragraph
If you want only part of a paragraph to be a different color, wrap that text in a span tag and add the style attribute to the span. The span tag does not create a line break or change the layout — it just marks a section of text so you can style it.
For example:
<p>This is normal text, but <span style="color: blue;">this part is blue</span>, and this is normal again.</p>
The browser renders "This is normal text, but" and "and this is normal again." in the default color, while "this part is blue" appears in blue. The span sits inside the paragraph without breaking it into separate lines.
You can nest multiple spans with different colors in the same paragraph. This is useful for highlighting keywords, warnings, or emphasis without changing the structure of your text.
Using a Style Block to Color All Headings or Paragraphs at Once
When you want to change the color of every paragraph, every heading, or every link on your page, writing the style attribute on each tag becomes repetitive. Instead, use a style block in the head section of your HTML document. A style block lets you write one rule that applies to all matching tags.
Add this inside the <head> section of your page:
<style> p { color: darkblue; } h2 { color: darkgreen; } a { color: purple; } </style>
Now every paragraph on the page is dark blue, every h2 heading is dark green, and every link is purple. You do not have to add style attributes to individual tags. If you later decide to change all paragraph text to a different color, you change it once in the style block instead of on every paragraph tag.
This approach scales well for larger pages or when you are building a consistent look across multiple pages. You can also move the style block into a separate CSS file and link it from multiple HTML pages, so one color change updates your entire site.
Common Mistakes When Changing Text Color
The most common mistake is misspelling the color name or forgetting the semicolon at the end of the style attribute. style="color: red" (no semicolon) usually still works in modern browsers, but style="color: redd;" (misspelled) will not — the browser does not recognize "redd" as a color and ignores the rule.
Another mistake is confusing the color property (which changes text color) with the background-color property (which changes the background behind the text). If you write style="background-color: red;", the text stays black but gets a red background. Make sure you are using color: for the text itself.
A third mistake is forgetting to close the span tag. If you write <span style="color: blue;">blue text without the closing </span>, the color rule continues to explore to everything after it on the page. Always close your span tags when ready after the text you want to color.
Choosing Between Inline Styles and Style Blocks
Use the inline style attribute (style="color: red;") when you are coloring just one or two pieces of text on a page. It is fast, visible right where the text is, and does not require you to jump to the head section.
Use a style block when you are coloring many elements of the same type (all paragraphs, all headings) or when you want to change colors later without editing every tag. A style block is also cleaner to read if your HTML has a lot of text — the styling lives in one place instead of scattered throughout.
For very large projects or multiple pages, move your styles into a separate CSS file and link it from your HTML. This keeps your HTML clean and lets you update colors across your entire site from one file. But for learning or small single-page projects, inline styles and style blocks are both fine.
Frequently Asked Questions
What is the difference between color and background-color?
The color property changes the text itself. The background-color property changes the color behind the text. Use style="color: blue;" to make text blue, and style="background-color: yellow;" to put a yellow box behind the text.
Can I use color names like "lightblue" or do I have to use hex codes?
Color names work fine — HTML recognizes "lightblue", "darkgreen", "lightcoral", and many others. Hex codes and RGB give you more options, but color names are simpler to read and remember for common colors.
Will my text color show up the same on every device?
Colors may look slightly different depending on screen brightness, monitor settings, and device type, but the color itself will be consistent. A hex code like #FF0000 produces the same red on a phone, tablet, and desktop computer.
What happens if I use a color name the browser does not recognize?
The browser ignores the rule and displays the text in the default color (usually black). Check the spelling — "redd" will not work, but "red" will. If you need a color that does not have a standard name, use a hex code or RGB value instead.
Can I change the color of a link without using a span tag?
Yes. Use the a selector in a style block: <style> a { color: purple; } </style>. This changes all links on the page. If you want only one link to be a different color, wrap it in a span with a style attribute or add a style attribute directly to that link tag.