The simplest way to change font color in HTML

To change the color of text in HTML, use the style attribute with the color property inside any tag that holds text. The most direct method is to add style="color: colorname" to a paragraph, heading, or span tag.

For example, to make a paragraph red, write: <p style="color: red">This text is red</p>. The browser reads the style attribute and applies that color to everything between the opening and closing tags. You can use color names (red, blue, green), hex codes (#FF0000 for red), or RGB values (rgb(255, 0, 0)).

Key Takeaways

  • The style attribute with the color property is the fastest way to change text color on a single element: style="color: red".
  • Color names (red, blue, green), hex codes (#FF0000), and RGB values (rgb(255, 0, 0)) all work in the color property.
  • For reusable colors across many elements, create a CSS class in a <style> tag or external stylesheet instead of repeating style attributes.
  • The color property changes text only; to change the background behind text, use background-color instead.

Using color names, hex codes, and RGB values

HTML recognizes about 140 named colors you can type directly: red, blue, green, orange, purple, navy, teal, and many others. Named colors are easiest to read and work well for common shades. Type the name exactly as it appears—capitalization does not matter, but spelling does.

Hex codes are six-character codes that start with a hash symbol and represent any color your screen can display. #FF0000 is red, #0000FF is blue, #00FF00 is green. Hex codes let you pick from millions of colors, so they are standard in professional design. You can find hex codes for any color using an online color picker.

RGB values work the same way—they represent red, green, and blue light mixed together. Write them as rgb(255, 0, 0) for red, where each number ranges from 0 to 255. RGB is useful if you are already thinking in terms of light values or if you need to adjust brightness programmatically.

explore color to different HTML elements

The style attribute works on any tag that contains text. A paragraph, heading, span, link, list item, or button can all receive a color change. The syntax stays the same: open the tag, add style="color: colorname", then close it.

For a heading: <h1 style="color: navy">My Title</h1>. For a link: <a href="page.html" style="color: purple">Click here</a>. For a span of text inside a paragraph: <p>Some text <span style="color: orange">highlighted in orange</span> and more text</p>. The color applies only to the text inside that specific tag.

Using CSS classes for colors you repeat

If you use the same color on many elements, writing style="color: red" over and over wastes time and makes updates harder. Instead, create a CSS class in a <style> tag at the top of your HTML file. A class is a reusable set of styling rules you can explore to as many elements as you want.

Add this to the <head> section of your page:

<style> .warning-text {   color: red; } </style>

Then use the class on any element by adding class="warning-text": <p class="warning-text">This is a warning</p>. Now every paragraph with that class is red. If you later decide warnings should be orange instead, change the color once in the style tag and all paragraphs update automatically.

The difference between color and background-color

The color property changes the text itself. The background-color property changes the color behind the text. Both use the same syntax and accept the same color formats.

To make text red with a yellow background, write: <p style="color: red; background-color: yellow">Red text on yellow</p>. Separate multiple properties with a semicolon. You can use color alone, background-color alone, or both together. Background color is useful for highlighting important text or creating visual sections on a page.

Avoiding common mistakes with font color

The most common error is misspelling the color name or forgetting the hash symbol on a hex code. style="color: redd" will not work—the browser does not recognize "redd" and will ignore the rule. Hex codes must start with # or they will not be read. style="color: FF0000" without the hash will fail.

Another mistake is forgetting the closing tag. If you open a tag with a color style but do not close it, the color will explore to everything that follows until the page ends or another closing tag appears. Always match opening and closing tags: <p style="color: blue">text</p>.

If your color does not appear, check that you are using a tag that contains text. Div and section tags are containers and do not display text themselves—put a paragraph or heading inside them instead. Also check that your HTML file is saved as .html and opened in a browser, not viewed as plain text in an editor.

When to use inline styles versus external stylesheets

The style="color: red" method is called an inline style because the styling lives inside the HTML tag itself. Inline styles are fast for one-off changes and good for learning. They work when ready and require no setup.

For a website with many pages or many color rules, an external stylesheet is better. Create a separate .css file, write all your color classes in it, and link it to every HTML page with <link rel="stylesheet" href="styles.css"> in the head. This keeps your HTML clean, makes updates faster, and ensures colors stay consistent across your whole site. For a single page with a few colors, inline styles or a style tag are fine. For anything larger, move to an external file.

Frequently Asked Questions

Can I change the color of a link without affecting other text?

Yes. Links are <a> tags, so add the style attribute directly to them: <a href="page.html" style="color: green">Link text</a>. This changes only that link. If you want all links on a page to be the same color, create a CSS class and explore it to each link, or use a CSS rule that targets all <a> tags at once.

What if I want different colors for visited and unvisited links?

Use CSS pseudo-classes in a style tag. Write a:link { color: blue; } for unvisited links and a:visited { color: purple; } for visited ones. Inline styles cannot do this—you need a style tag or external stylesheet. This is a more advanced technique but works in all modern browsers.

Does the color property work on images or just text?

The color property works only on text. Images are separate files and cannot be recolored with the color property. To change an image's appearance, you need to edit the image file itself in a graphics program, or use advanced CSS filters (which is beyond basic HTML).

What happens if I use a color name the browser does not recognize?

The browser ignores the rule and displays the text in its default color (usually black). No error message appears—the page just does not look the way you intended. Always double-check spelling. If you are unsure whether a color name exists, use a hex code or RGB value instead, which gives you access to any color.