Color is often a great way to bring life to a professional website. But when we approach the question of formatting a text, how to change color of text in HTML on its site?
How to change color of text in HTML: bold, italic
Even if it is not strictly speaking a change of color, putting a text in bold or in italics is the most common way to modify the appearance. To do this, in HTML, just use the following tags
<b> or <strong>, to pass a bold text
<i> or <em>, to put a text in italics
Note that when it comes to SEO, Google treats <b> and <strong> tags exactly the same. The same goes for <i> and <em>.
However, the function of HTML tags is semantic: they are theoretically not there for formatting since this is the role of CSS (style sheets).
For this reason, if you want to do things as cleanly as possible (congratulations), favor the <strong> and <em> tags.
- Change the color of characters in a text
- To change the color of your text in HTML you have the FONT element.
- Thanks to it, you can change the font used by your text, its size, it’s color…
Here is an example:
<FONT face = ”Arial” size = ”12 ″ color = ”blue”> This text is displayed in Arial font, size 12 and in blue color </FONT>
How to change background color of a text and the color of links
You can change the color of a text but also the background color of this same text (or of another part) via the use of the BODY element.
Note that on a site, the links have three different states, each of which must, for reasons of accessibility, be associated with a different color:
- link not clicked,
- link being clicked
- links already clicked
The attributes to use are:
- text: change the text color
- bgcolor: change the background color
- link: change the color of non-clicked links
- alink: change the color of the links being clicked
- vlink: change the color of clicked links
Here’s what it can do in HTML :
<BODY text = ”black” bgcolor = ”white” link = ”blue” alink = ”purple” vlink = ”red”>
HTML Text Color
To change color of text in HTML is easy! In this short tutorial, we will see how to change the color of your HTML text with Hex color codes, HTML color names, RGB and HSL values.
Hex color-coded text color
The most common form of HTML coloring text is through the use of hexadecimal color codes (Hex code for short). Just add a style attribute to the text element you want to color – one paragraph in the following example – and use the color property with its Hex encoding.
<p style=“color:#FF0000”;>Red paragraph text</p>
Text color with HTML color names
Another way to color text your website is by using an HTML color name. The HTML code is similar, just replace the Hex code in the previous step with the name of the color you want to use (red in our example).
<p style=“color:red;”>Red paragraph text</p>
Text color using RGB color values
Using RGB values is all the rage these days, but it’s as easy as Hex codes or color names. Enter the RGB values in the rgb () parameter after the color property.
When using an RGB value on your website, you can also specify the opacity. Instead of rgb () use rgba () – the a is for alpha, the color channel that controls the opacity, and after its three color values add a quarter opacity, on a scale of 0 – 1 (0 for fully transparent, 1 for completely opaque).
<p style=“color:rgba(255,0,0,0.5);”>Red paragraph text</p>
<p style=“color:rgb(255,0,0);”>Red paragraph text</p>
How to change color of text in HTML using HSL color values
A fourth method of adding HSL color is through values. Similar to the RGB syntax described above, HSL uses the prefix hsl () and three values for hue, saturation, and lightness. Hue is represented on a scale of 0 to 360, while saturation and lightness are a percentage between 0% and 100%.
<p style=“color:hsl(0,100%,50%);”>Red paragraph text</p>
Just like RGB, when using HSL you can modify the opacity of the color just in the color property. Use the prefix hsla () and include a fourth value between 0 and 1 for the opacity level you need.
<p style=“color:hsla(0,100%,50%,1);”>Red paragraph text</p>
Conclusion of How to Change Color of Text in HTML
Here, you have all the cards in hand to change the appearance of a text and more particularly its color. As always, do not hesitate to contact us if you encounter any difficulty… Or if you need an opinion on the color to use!