Be careful when changing text color in HTML as few methods have become obsolete. Just as you need to know the deprecated methods so that you can avoid these, you should also learn the recommended ones too. Let’s explore all.
Problem:
What are the recommended way(s) to change text color in HTML?
Solution:
In HTML5(the latest version of HTML), use CSS color: property to change font color. And, as its value, you can use one of the four different ways-
1. Color Name: There are 140 color names that modern browsers support. Check the full list of the color names here. You can use any color as values in the CSS declaration. Here is an example of how to set text color as red using color name –
<p style=”color:red”>This color is red.</p>
2. RGB and RGBA values: RGB color model has been named from the first letter of the three primary colors – Red, Green, and Blue. Mixing different intensities of these three colors, millions of colors can be produced. The intensity of each color ranges from 0 to 255, which is a total of 256 in number. Thus, mixing the three colors in different intensity, you can get 256 x 256 x 256 or 16,777,216 colors. RGB representation of red color is rgb(255, 0,0).
Using RGB value, we can set red color text in the following ways-
<p style=”color:rgb(255, 0,0)”>This color is red.</p>
RGBA color model is an extension of RGB color model with an alpha channel which controls opacity. The range of alpha channel is from 0.0(fully transparent) to 1.0(opaque).
In RGBA value, red color text can defined as following-
<p style=”color:rgba(255, 0,0,1)”>This color is red.</p>
3. Hex Codes: In Hex code (or Hexadecimal code), six characters are used to define a color. For example, #FF0000 is red in hex color code. First two characters mention the intensity of red color in it, similarly, next two characters for green and the last two for blue. To represent a color, hex color uses number from 0 to 9 and the letters A to F.
Using hex code, we can set the red text color this way-
<p style=”color:#FF0000”>This color is red.</p>
4. HSL values: HSL is short for Hue, Saturation, and Lightness. Each color is produced mixing the three values. You can resemble this color model as a wheel.
Hue is the degree on the wheel. So, it’s value ranges from 0 to 360. Red is at 0 degree, Green is on 120 degrees, and Blue is on 240 degrees.
Both Saturation and Lightness are percentage values between 0% and 100%. Saturation determines how gray the color is – 0% is completely gray which is the center edge of the wheel and 100% is no gray color at all which is the outer edge of the edge.
Lightness determines how black or white the color is. Lightness 50% means no additional black or white color added. Decreasing from 50%, it adds black to the color, thus, 0% lightness of any color means pure black. Similarly, increasing from 50% it adds white to the color, and 100% lightness of any color means pure white. Here are few examples-
<p style=”color:hsl(0,0%,0%)”>This color is black.</p>
<p style=”color: hsl(0,0%,100%)”>This color is white.</p>
<p style=”color: hsl(0,100%,50%)”>This color is red.</p>
Problem:
Is there any pure HTML way to change the text color without CSS?
Solution:
Unfortunately, in the latest HTML5 version, there is no pure HTML way to change the text color. In the latest version, HTML is responsible to structure the webpage and CSS for visual representation. So, changing text color is now CSS’s job. In older HTML version, you could use the following methods to change font color These are deprecated now. Even if a browser supports, don’t use them.
Method 1 (Deprecated): “text” attribute in <body> tag was used to set text color of an entire webpage. See the example below-
<body text=”#FF0000”>
Or
<body text=”red”>
Method 2 (Deprecated): To change partial or complete webpage’s text color, you could use font tag with the color attribute in this way-
<font color=”#red”>This is red color text.</font>
Or
<font color=”#FF0000”>This is red color text.</font>