The simplest way to change text color in HTML

The most direct method is to use the style attribute with the color property inside any tag that holds text. Write style="color: red" directly into the opening tag, and the text will display in that color.

For example, <p style="color: blue">This text is blue</p> makes a paragraph appear in blue. You can use color names like red, green, blue, orange, or purple. You can also use hex codes (like #FF5733) or RGB values (like rgb(255, 87, 51)) for more precise control over the shade.

This method works on any tag that contains text: paragraphs, headings, links, list items, and spans. The color applies only to that single element, so you can mix colors throughout a page without affecting other text.

Key Takeaways

  • Use style="color: colorname" inside the opening tag of any text element to change its color when ready.
  • Color names (red, blue, green), hex codes (#FF5733), and RGB values (rgb(255, 87, 51)) all work in the color property.
  • A CSS stylesheet lets you set colors for entire groups of elements at once, rather than typing the style attribute into each tag.
  • The color property changes text only; use background-color in the same style attribute to change the background behind the text.

Using a stylesheet to color multiple elements at once

If you want many paragraphs or headings to be the same color, typing style="color:" into each one is repetitive. A stylesheet lets you set the color once and explore it everywhere.

Add a <style> section inside the <head> of your HTML document. Inside it, write the tag name and the color rule: p { color: green; } makes all paragraphs green. You can also target specific elements by giving them a class attribute and styling the class instead: <p class="highlight">Important text</p> paired with .highlight { color: red; } in the stylesheet.

Stylesheets are cleaner for larger pages because you change the color in one place, and it updates everywhere that rule applies. They also load faster than inline styles because the browser caches the stylesheet.

Color formats: names, hex codes, and RGB

HTML recognizes about 140 named colors you can type directly: red, blue, green, orange, purple, gold, navy, teal, and many others. These are the easiest to remember and read, but they offer limited choices.

Hex codes give you millions of colors. A hex code is a # followed by six characters: #FF5733 is a shade of orange, #1E90FF is a bright blue. The first two characters control red, the next two control green, and the last two control blue. You can find hex codes for any color you want using an online color picker.

RGB values work the same way but use decimal numbers instead of hex. rgb(255, 87, 51) is the same orange as #FF5733. Each number ranges from 0 to 255, representing how much red, green, and blue to mix. RGB is easier to understand if you think in terms of light mixing, but hex codes are more common in practice.

Changing text color in links

Links have their own default colors (usually blue for unvisited, purple for visited), and you may want to override them. Use the style attribute on the <a> tag itself: <a href="page.html" style="color: orange">Click here</a> makes that link orange.

If you want all links on a page to be the same color, use a stylesheet rule: a { color: darkgreen; } changes every link. You can also style links differently depending on whether they have been visited: a:visited { color: gray; } makes visited links gray while unvisited ones stay their original color.

Combining text color with background color

Changing text color alone sometimes leaves the text hard to read if the background is dark or light. You can change both at once by adding background-color to the same style attribute: <p style="color: white; background-color: navy;">White text on navy background</p>.

The same color formats work for background-color as they do for text color. You can use named colors, hex codes, or RGB values. Make sure the text color and background color have enough contrast so the text remains readable — light text on a dark background or dark text on a light background works best.

Common mistakes and how to avoid them

The most frequent error is misspelling the color name or forgetting the colon after "color". style="color red" will not work; it must be style="color: red". Hex codes must start with # and use exactly six characters (or three for shorthand): #FF5733 works, but FF5733 without the # does not.

Another mistake is forgetting the semicolon if you add more than one style rule. style="color: red background-color: yellow" fails because there is no semicolon between the two rules. The correct version is style="color: red; background-color: yellow". If you use a stylesheet, always end each rule with a semicolon inside the curly braces.

Avoid using colors that are too similar to the background, even if they are technically different. Light gray text on a white background or dark blue text on black background will be nearly invisible. Test your page in a browser to make sure all text is readable.

Frequently Asked Questions

Can I change the color of just one word in a paragraph?

Yes. Wrap that word in a <span> tag with a style attribute: <p>This is <span style="color: red">important</span> text.</p> The span tag does nothing on its own, but the style attribute inside it colors only the word "important" red while the rest of the paragraph stays black.

What is the difference between using style attributes and stylesheets?

Style attributes explore color to one specific element. Stylesheets explore color to all matching elements at once, making them faster to write and easier to change later. For a single colored word, use a style attribute. For coloring all paragraphs or all headings, use a stylesheet.

Do I need to use hex codes or can I just use color names?

Color names are fine for common colors like red, blue, green, and orange. Hex codes give you access to millions of shades if you need a specific color that does not have a name. Most web designers use hex codes because they offer more control, but named colors work just as well for straightforward pages.

Will the text color I set in HTML work on all browsers?

Yes. The color property is one of the oldest and most widely supported HTML features. Any browser made in the last 20 years will display your text colors correctly, whether you use named colors, hex codes, or RGB values.