HTML Text Color | Docs With Examples

HTML text color allows you to change your text element colors using the color property in CSS. While older methods like the <font> tag exist, they are deprecated in favor of CSS styling.

Changing Text Color with CSS

<p style="color: red;">This is red text.</p>

The best way to change text color in your HTML projects is by using CSS.

In this example, the color property is applied directly to the paragraph using the style attribute with inline CSS.

Using Internal CSS for Text Color

You can define text colors inside a <style> block.

<style>
    .blue-text {
        color: blue;
    }
</style>
<p class="blue-text">This text is blue.</p>

Here, the .blue-text class applies blue color to the text. Open up an HTML editor to see for yourself.

Using External CSS for Better Maintainability

Instead of using inline or internal styles, linking an external CSS file is a better approach.

/* styles.css */
.green-text {
    color: green;
}

Then, in your HTML file:

<link rel="stylesheet" href="styles.css">
<p class="green-text">This text is green.</p>

This keeps styles separate and improves readability.

Using Hex, RGB, RGBA, and HSL

CSS supports multiple color formats:

• Named Colors: red, blue, green, etc.
• Hex Values: #ff5733
• RGB Values: rgb(255, 87, 51)
• RGBA Values: rgba(255, 87, 51, 0.8) (adds opacity)
• HSL Values: hsl(9, 100%, 64%)
• HSLA Values: hsla(9, 100%, 64%, 0.7) (includes transparency)

Example:

<p style="color: #ff5733;">This text is orange.</p>
<p style="color: rgb(0, 128, 255);">This text is sky blue.</p>
<p style="color: hsl(120, 100%, 25%);">This text is dark green.</p>
<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>

Common Scenarios for Text Color

Changing Text Color on Hover

You can change text color when a user hovers over it.

.hover-text:hover {
    color: purple;
}

<p class="hover-text">Hover over this text to change its color.</p>

Applying Text Color to Multiple Elements

You can target multiple elements at once.

h1, h2, p {
    color: darkblue;
}

Adjusting Saturation, Hue, and Opacity

You can manipulate saturation, hue, and opacity using HSL and RGBA values.

.text-effects {
    color: hsla(240, 100%, 50%, 0.8);
}

<p class="text-effects">This text has hue, saturation, and opacity adjustments.</p>

Using Different Fonts and Sizes Along with Color

You can also define text font-size and font-family in your CSS stylings.

.custom-text {
    color: #ff4500;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

<p class="custom-text">This is a customized text with different colors and fonts.</p>

Common Questions About HTML Text Color

How do I change text color in HTML?

Use the color property in CSS:

<p style="color: red;">Red text</p>

What is the best way to change text color in HTML?

The recommended approach is using CSS classes:

<p class="blue-text">This text is blue.</p>

.blue-text {
    color: blue;
}

Can I use gradient colors for text in HTML?

Yes, you can use background-clip with linear-gradient.

.gradient-text {
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<p class="gradient-text">Gradient-colored text</p>

What is the default text color in HTML?

The default text color is black, but it depends on the browser’s default CSS stylings.

Can I change text color using JavaScript?

Yes, using document.getElementById():

<p id="text">Click to change color</p>
<button onclick="changeColor()">Change Color</button>
<script>
    function changeColor() {
        document.getElementById("text").style.color = "blue";
    }
</script>

How do I change font color in HTML?

The best practice is using CSS:

<p style="color: red;">This text is red.</p>

How to color text in HTML without CSS?

Although not recommended, you can use the deprecated <font> tag:

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

However, modern HTML encourages using CSS instead.

How to add text color?

You can add text color using inline styles, CSS classes, or external stylesheets:

<p class="colored-text">This text has color.</p>

.colored-text {
    color: purple;
}

What is the tag for text color in HTML?

Previously, the <font> tag was used:

<font color="red">Red text</font>

However, the <font> tag is deprecated. The correct way is using CSS:

<p style="color: red;">Red text</p>

Key Takeaways

• Use CSS to change text color instead of the deprecated <font> tag.
• Use hex values, RGB, RGBA, HSL, and HSLA for precise color control.
• Apply text color with inline, internal, or external CSS.
• Adjust opacity, hue, and saturation for more color control.
• Add hover effects for interactive designs.
• Use JavaScript to change text color dynamically.
• Combine font-family and font-size with colors to enhance text styling.

Wrapping Up

HTML text color customization is an essential part of web design. By using CSS properties, you can enhance text visibility and improve user experience. Stick to modern styling techniques for the best results when working with different colors on web pages.