Want to change font colors in HTML but can’t figure out how?
It’s important to create the right contrast between your website’s interface and font color so that readers find your content easy to read and share.
In addition, a unique font color can set your brand apart from competitors and define its personality among your target audience.
But without the latest HTML5 coding knowledge, you’ll be unable to make your font color accessible to all users.
And that’s why in this beginner-friendly tutorial, I’ll show you all 4 methods for changing font colors in HTML and CSS with relevant details.
Changing HTML Font Color (At A Glance)
Before we dive into the methods to change font color in HTML, let’s answer two of the most common frequently asked questions:
Can I Change the Color of Text Font?
Yes, you can change the color of text font on a blog page by adding font-color properties in the style attribute of the HTML tag through inline CSS.
For example, for a given <h1> Bloggingtips </h1>, we can change the font color from default black (hex code:#000000) to navy blue (hex code: #000080) with this code:
<h1 style=” color:#000080″> Bloggingtips </h1>
If you use a Content Management System (CMS) like WordPress, you can easily change text font by going to Post>All Posts>Edit.
Then, select a paragraph and go to Block>Color>Text and select your font color using the color palette given.
How Do I Change Font Color in HTML?
You can change the font color in HTML by using font tags and specifying colors with their hex code or name.
E.g., this will be the HTML code for a blog paragraph in blue text color:
<font color=”#0000FF”> Ocean is blue. </font> or <font color=”blue”> Ocean is blue. </font>
However, the <font> tag is no longer supported in HTML after the introduction of HTML5 in 2014.
The purpose of HTML is to describe the webpage structure, not to determine text styling.
So font and center tags were deprecated and shifted to Cascading Style Sheets (CSS).
How do you specify a color in HTML?
There are four ways to specify a color in HTML:
Color names:
The simplest way to specify a color in cascading sheets is to write the color name as we normally know it in English, like blue, green, orange, and so on.
You can also specify different shades of primary color, like crimson in red color, as shown above.
CSS currently supports 140 standard color names.
However, you’ll not find uncommon colors like “Sarcoline” in the 140 supported color names list.
So if you own a fashion or beauty blog, it’s better to use other options in this list.
HEX Codes:
Hex or hexadecimal code is a six-digit representation of color based on three primary colors: red, green, and blue.
All hex codes have a #RRGGBB where R represents red, G represents green, and B represents blue.
So black will be represented by #000000 as black has no shades of red, green, or blue, whereas # FFFFFF will represent white as white includes all shades of the RGB color.
Using hex is non-intuitive, but you’ll find more options than color names.
RGB values
They are similar to hex codes, where you define a color based on its red, green, and blue input between 0-255.
0 means color is absent, and 255 means color is fully present.
For example, the RGB of orange will be RGB(255,165,0) as it has a maximum concentration of red, a significant presence of green, and no presence of blue.
There’s a related version of RGB values: RGBA, with “A” as the alpha value for opacity.
Its value ranges from 0 (opaque) to 1(fully transparent).
HSL Values:
Lastly, we’ve HSL, which stands for Hue, Saturation, and Lightness.
Hue represents colors on the standard color wheel with values like 0/360 or 360/360 (for red), 240/360 (for blue), and so on.
Saturation and Lightness are very similar, with values from 0% (black) to 100% (white).
So the HSL of orange will be HSL(44, 96%, 71%).
Like RGB, you can add opacity values with a 0 to 1 range.
Changing Font Colors In HTML And CSS: Ultimate Cheatsheet
Now, we will show you the detailed process of changing font colors in HTML and CSS.
Use our HTML cheat sheet to add personality to your webpage without coding experience.
Any graphic design software can create a preview of how your chant font color appears for users, so use them to finalize your color choice and then apply the following steps:
Method #1: Changing Font Colors Without Using CSS
This is the simplest method to change font color where you use <font> tag and define the color using font name or hex code.
An example of this code will be:
<p> <font color=”blue”> Brett is a printmaker and writer. </font> </p>
However, the <font> tag was deprecated with the introduction of HTML5.
So if your website is among the 95% of websites in the world wide web which use HTML, you should avoid using the <font> tag method.
Web browsers can stop supporting this old HTML code anytime, stopping users from accessing your content properly.
Currently, though, all modern browsers, including Chrome, Safari, Opera, and Edge, support font tags in HTML.
Method #2: Changing Font Colors Using Inline CSS
You can use inline CSS to add style properties directly to your HTML file.
In other words, you are putting CSS elements directly into the HTML code.
Here’s the inline CSS code to change the text color to blue:
<p style=”color: blue”> Brett is a printmaker and writer. </p>
You can define a color using any of the four methods described above (font name, hex code, RGB values, or HSL values) and change the colors of paragraphs, headings and hyperlinks.
You may use this inline CSS method to quickly change the color of one paragraph or heading, which makes your HTML file messy and reduces loading time.
Pagespeed is one of the crucial factors for ranking and user experience, so it’s better to avoid this method.
Method #3: Changing Font Colors Using Internal or Embedded CSS
To change font colors using embedded CSS, you’ll have to add <style> tags and define a color using the abovementioned four methods in between <head> tags of your HTML file.
So to change the colors of all paragraphs on our webpage to blue, we’ll use the following code:
<html>
<head>
<style>
<p> {
color: blue;
}
</style>
</head>Likewise, you can change the font colors of hyperlinks and headings.
The difference between inline and embedded CSS methods is that inline CSS works only for the specific webpage, whereas embedded CSS will work on all pages loaded with <head> tag.
But embedded CSS also messes up your HTML file, reducing page speed for different devices.
Method #4: Changing Font Colors Using External CSS
Your website has a separate CSS file to describe font size, color, font family, padding, background color, and other styling elements of your website.
You can edit this CSS file to change the font size for paragraphs, headings, or hyperlinks.
For example, to change the text color to blue for all paragraphs under “content p,” add this code to your CSS file:
#content p {
color: blue;
}To define color in external CSS, you can use color names, hex code, RGB, or HSL values.
It is the best method to change font color as it keeps all styling elements of your website in one place, making it easy to edit.
In addition, the page speed isn’t impacted, which is better for user experience.
Note: Changes in inline or internal CSS can override external CSS.
Other Changing Font Colors-Related Tutorials To Check Out
It’s best to use CSS to change font colors as it is accepted by HTML5 and makes your website content future-proof and more accessible.
Here are some changing font color-related tutorials to check out:
- How to Italicize Text Using HTML: Learn the correct methods to italicize website text using <i> and <em> HTML tags and CSS.
- How To Use HTML To Create A Clickable Image: Know the exact step-by-step process to generate and use clickable image HTML code on a website.
- How to Bold Underline Italics: Learn the correct methods to apply bold, underline, and italics to improve readability and user experience.
Wrapping Up
Suitable font color can improve readability and dwell time leading to better rankings and online visibility.
It is tempting to use <font> HTML tag method, but it is outdated and can slow down page speed.
So it’s best to add color attributes using color names, hex codes, RGB, or HSL values under a relevant selector in your CSS file to change website font color effectively.
Using inline or embedded CSS can make your website code messy and slow, just like the HTML tags.
