Glossary
HTMLCSSJavaScriptPythonSwiftTypeScriptSQLReact

HTML

HTML Font Color: Syntax, Usage, and Examples

Changing the font color in HTML helps you make content more visually engaging and easier to understand. Whether you're writing headlines, highlighting key text, or just adding personality to a web page, the ability to control text color matters. Modern web design relies heavily on effective use of the color of text to create appealing and functional user interfaces.

Quick Answer: How to Change Font Color in HTML

The modern and correct way to change font color in HTML is by using the CSS color property. You can apply this directly to an HTML element using the style attribute. The old <font> tag is obsolete and should not be used.

Syntax:<element style="color: value;">Your text here</element>

Example: 

<p style="color: red;">This text is red.</p>
<h1 style="color: #0000FF;">This heading is blue using a hex code.</h1>

You can use color names (e.g., red), hex codes (e.g., #FF0000), or RGB values (e.g., rgb(255, 0, 0)). For cleaner code on larger sites, it is best to define colors in an external CSS file.

How to Set Font Color in HTML

In the early days of HTML, developers used the <font> tag with the color attribute to set text color. Like this: 

<font color="red">This is red text.</font>

However, modern HTML5 standards consider the <font> tag obsolete. The recommended way to define font color HTML now is through CSS, either inline, embedded in a <style> tag, or defined in an external stylesheet. Modern CSS styling provides much more flexibility and control over the appearance of text.

To change text color using inline CSS, you can use the style attribute on most HTML elements: 

<p style="color: blue;">This paragraph is blue.</p>

The color property in CSS is what controls text color. You can specify the color values using:

  • Color names like red, blue, or green
  • Hex codes like #ff0000 (hexadecimal notation)
  • RGB values like rgb(255, 0, 0)
  • HSL values like hsl(0, 100%, 50%) (hsla includes transparency)

All of these methods work consistently in modern browsers and give you full control over text styling. When working with HTML color, these different formats provide flexibility for various design needs.

When to Use Font Color HTML

Changing font color can improve readability, emphasize important text, and support your site's visual design. Here are some common situations where you’d want to change font color in HTML:

Highlighting Important Text

Use color to draw attention to key messages or alerts. 

<p style="color: red;">* Required fields must be completed</p>

This makes the warning stand out visually, even without using bold or larger font sizes.

Matching a Brand Style

If your site follows a particular branding color palette, you'll want to style fonts to match. 

<h1 style="color: #1e90ff;">Welcome to BlueWave Media</h1>

This keeps your design consistent and professional.

Organizing Sections by Color

Color coding content can help users scan and process information more efficiently. 

<h2 style="color: green;">Step 1: Register</h2>
<h2 style="color: orange;">Step 2: Confirm Email</h2>
<h2 style="color: red;">Step 3: Complete Profile</h2>

Each step stands out and signals its importance or urgency through color.

Examples of Changing Font Color in HTML

Let’s walk through some practical examples using HTML font color in modern code.

Basic HTML Document Structure

When working with font colors, it's important to start with a proper HTML document structure: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Color Examples</title>
</head>
<body>
    <p style="color: blue;">This text is blue.</p>
</body>
</html>

The doctype declaration ensures your HTML5 document is interpreted correctly by browsers.

Inline Font Color Change 

<span style="color: purple;">This sentence includes purple text.</span>

Useful when you only need to color a specific word or phrase without affecting the entire paragraph.

Paragraph with Colored Font 

<p style="color: #228B22;">This paragraph uses a hex code to display forest green text.</p>

Hex values offer precision and are widely supported.

RGB and HSL Examples 

<p style="color: rgb(255, 105, 180);">This text is hot pink using RGB.</p>
<p style="color: hsl(240, 100%, 50%);">This one’s pure blue using HSL.</p>

RGB and HSL values give you greater flexibility, especially when working with dynamic styles or JavaScript.

Using Div Elements for Color Sections

The div element is particularly useful for applying colors to larger sections of content: 

<div style="color: darkblue; background-color: lightgray; padding: 10px;">
    <h3>Information Section</h3>
    <p>All text in this div inherits the dark blue color.</p>
</div>

Color Classes in CSS

Instead of writing styles inline, define classes and reuse them throughout your HTML. 

<style>
  .warning {
    color: red;
  }

  .success {
    color: green;
  }

  .info {
    color: blue;
  }
</style>

<p class="warning">This is a warning message.</p>
<p class="success">Your changes have been saved.</p>
<p class="info">More information is available here.</p>

This method is cleaner and keeps your HTML more maintainable.

Learn More About Font Style and Color in HTML

Combining Font Style and Color in HTML

When you're styling text, color is just one of the tools you can use. Font style, size, and weight also matter.

You can combine all of these in a single style attribute: 

<p style="color: navy; font-family: Arial, sans-serif; font-style: italic; font-weight: bold;">
  This text is bold, italic, and navy blue.
</p>

You can also apply styles with a class: 

<style>
  .custom-text {
    color: #4B0082;
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
  }
</style>

<p class="custom-text">Styled with a CSS class.</p>

This approach is especially useful if you want to apply font style and color in HTML to multiple elements without repeating yourself.

How to Change Font Color in HTML Without Inline Styles

Use embedded or external CSS instead of inline styling to keep code clean and scalable.

Embedded CSS: 

<style>
  h1 {
    color: darkslategray;
  }
</style>

<h1>This heading uses embedded CSS for color.</h1>

External CSS file (styles.css): 

h1 {
  color: coral;
}

In your HTML file: 

<link rel="stylesheet" href="styles.css">
<h1>Heading from external stylesheet</h1>

This method keeps your design separate from content and is a best practice for modern web development.

Accessibility Considerations

When changing font color HTML, always make sure your choices meet accessibility standards. Low contrast between text and background can make your site difficult to read for people with vision impairments.

Use tools like WebAIM’s contrast checker to verify that your font color combinations provide enough contrast.

Avoid using color as the only way to convey meaning. For example, don’t just say “Click the red button”—use labels or icons as well.

Using Font Color in Tables

You can use font color in HTML tables to distinguish rows, highlight headers, or indicate status. 

<table border="1">
  <tr>
    <th style="color: white; background-color: black;">Status</th>
    <th>Name</th>
  </tr>
  <tr>
    <td style="color: green;">Active</td>
    <td>Jordan</td>
  </tr>
  <tr>
    <td style="color: red;">Inactive</td>
    <td>Avery</td>
  </tr>
</table>

This provides instant visual feedback for users reviewing table data.

Dynamic Font Color with JavaScript

You can change font color dynamically with JavaScript. This might be helpful for themes, light/dark mode toggles, or user preferences. 

<p id="dynamicText">Click the button to change my color!</p>
<button onclick="changeColor()">Change Color</button>

<script>
  function changeColor() {
    document.getElementById("dynamicText").style.color = "crimson";
  }
</script>

This approach gives you control over interactivity and user experience.

Using HTML font color properly gives your content clarity and personality. Whether you're learning how to change font color in HTML or looking to combine color with other styles, knowing your options helps you write more readable and attractive pages. Stick to modern methods like CSS, prioritize accessibility, and use font color HTML features to enhance—not overwhelm—your message.

Key Takeaways for Changing HTML Font Color

  • Use CSS, Not the <font> Tag: The <font> tag is obsolete. Always use the CSS color property to change text color.
  • Inline CSS is Quickest: For a fast, single-element change, use the style attribute: <p style="color: blue;">.
  • External CSS is Best Practice: For consistency across a website, define color styles in a separate .css file and link to it. This is more maintainable.
  • Multiple Color Formats Work: You can use color names (green), HEX codes (#008000), RGB (rgb(0,128,0)), or HSL values.
  • Prioritize Accessibility: Ensure there is sufficient contrast between your text color and the background color to make your content readable for everyone.
Learn HTML for Free
Start learning now
button icon
To advance beyond this tutorial and learn HTML by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Code Compilers

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2025 Mimo GmbH

Reach your coding goals faster

Get started