How to change text color in HTML
Changing the text colour of a web page is essential because it enhances readability.
There are several ways to change the colour of the text in HTML, which are as follows:
Text color:
This is a very effortless way to define the colour of the text. The colour name refers to the special name in HTML. There are 140 colours that HTML supports.
Example:
This example shows the use of the colour name. We are changing the text colour of both paragraph elements by using the inline style attribute.
<head>
<title> Example 1 of Text Color </title>
</head>
<body>
<h1> Environment </h1>
<p style="color:blueviolet;"> Environment is derived from the French word 'environ' which means 'encircle'. </p>
<p style="color:maroon;"> Everything that surrounds us is called the environment. </p>
</body>
</html>
Output:
The output shows the result of the above code. The text colour has been changed. The first paragraph is in blue-violet, and the second paragraph is in maroon.
RGB and RGBA value:
The complete form of RGB is Red, Green, and Blue, and RGBA is Red, Green, and Blue, with alpha indicating opacity. A specific colour is made by mixing red, blue and green.
The range of alpha is from 0 to 1. A decimal value between 0 and 1 can be used to define opacity. The input value of RGB ranges from 0 to 255, where 0 means low intensity and 255 means maximum intensity.
RGB (140, 0, 225) represents the RGB value, where the first value defines red, the second value defines green, and the last value represents blue.
RGBA (145, 55, 245, 0.6) is a representation of an RGB value with an alpha.
Example:
This example demonstrates the use of RGB and RGBA values. We are using the RGB value to change the colour of the text inside the h1 tag. We are using RGBA values inside paragraph tags to change both paragraphs' text colours.
<!DOCTYPE html>
<html>
<head>
<title> Example 2 of Text Color </title>
<style>
h1{
color: rgb(140, 0, 225);
}
</style>
</head>
<body>
<h1> Components of Environment </h1>
<p style="color: rgba(255, 99, 71, 0.8);"> Environment have two basic components: </p>
<p style="color: rgba(240, 10, 50, 0.9);"> 1. Abiotic: These are non-living components. <br>
2. Biotic: These are living components. </p>
</body>
</html>
Output:
The output shows a change in colour in both the h1 and paragraph elements.
HSL and HSLA value:
The complete form of HSL is Hue, Saturation and Lightness, and the complete form of HSLA is Hue, Saturation and Lightness with Alpha. The hue's input value is in degrees ranging from 0 to 360. The input values of saturation and lightness are in percentages from 0 to 100%.
hsl(204, 40%, 60%) is the HSL value and hsla(150, 55%, 75%, 0.6) is the HSL value with alpha, where alpha refers to opacity.
Example:
This example shows the use of HSL and HSLA values. We are changing the text colour in a paragraph by using the inline style attribute inside the span tag.
<!DOCTYPE html>
<html>
<head>
<title> Example 3 of Text Color </title>
<style>
h2{
color: hsl(204, 40%, 60%);
}
</style>
</head>
<body>
<h2> Examples of Biotic and Abiotic component of environment </h2>
<p> 1. <span style="color:hsla(250, 79%, 68%, 0.8);"> Abiotic: </span> <span style="color:hsla(250, 45%, 45%);"> Water, air, land, etc. </span> <br>
2. <span style="color:hsla(250, 79%, 68%, 0.8)"> Biotic: </span> <span style="color:hsla(250, 45%, 45%);"> Human beings, plants, animals, etc.</span> </p>
</body>
</html>
Output:
The output shows the change in colour of text written inside individual span tags.
Hex value:
The hex value consists of numbers from 0 to 9 and letters from A to F.
#800080 is the hex code, where the first two values represent the intensity of red, the middle two values represent the intensity of green, and the last two values represent the intensity of blue.
Example:
This example shows the use of a hex value to change the colour of the text. We will use the style attribute inside the paragraph, which will have a color property with a hex value.
<!DOCTYPE html>
<html>
<head>
<title> Example 4 of Text Color </title>
<style>
h2{
color: #f45572;
}
</style>
</head>
<body>
<h2> Color names: </h2>
<p style="color:#ca8e99 ;"> 1. Red <br>
2. Green <br>
3. Blue <br>
4. orange <br>
5. Pink <br>
6. Purple </p>
</body>
</html>
Output:
The output shows a change in the colour of the text inside the paragraph.
Font tags:
This tag was used before HTML5 was released. The syntax of this tag is as follows:
<font color="red"> Some text </font>
It uses the colour attribute to specify a colour. We can specify colours using HSL and HSLA, RGB and RGBA, hex values, and colour names.
HTML5 does not support this tag.
Example:
We are using the <font> tag to display the colour of the text in an HTML document. We are using the colour name, hex value and RGB value of the colour attribute inside the <font> tag to define the colour of the text.
<!DOCTYPE html>
<html>
<head>
<title> Example 5 of Text Color </title>
</head>
<body>
<h2> We use a font tag to change the text color. </h2>
<font color="aquamarine"> Text color using color name value. </font> <br> <br>
<font color="#800500"> Text color using hex value. </font> <br> <br>
<font color="rgb(155, 255, 250)"> Text color using rgb value. </font>
</body>
</html>
Output:
The output shows the change in the text colour of the paragraph tag.
Inline CSS:
We can use the inline element to define the text colour. We use style attribute with colour property inside the element to apply text colour. We can use any colour value like RGB, RGBA, HSL, HSLA, colour name etc. We can change the colour of any text by using the inline style attribute.
Example:
This example shows changing the text colour using inline CSS. We use an inline style attribute with colour property to apply text colour to paragraphs. We are assigning various colour values to the style attribute to change the colour of the text.
<!DOCTYPE html>
<html>
<head>
<title> Example 6 of Text Color </title>
</head>
<body>
<h1> Inline CSS </h1>
<p style="color: rgba(255, 90, 65);"> Changing text color by giving color name to the style attribute. </p>
<p style="color: rgb(140, 100, 150);"> Changing text color by giving rgb value to the style attribute. </p>
<p style="color: #505080"> Changing text color by giving hex value to the style attribute. </p>
<p style="color: hsl(250, 110%, 50%);"> Changing text color by giving hsl value to the style attribute. </p>
</body>
</html>
Output:
The output shows the paragraphs of different colours.
Embedded CSS:
We can use the style tags and place them inside the head tags. We can define colour property inside the style tag and change the colour of the text of any element.
Example:
We are embedding the CSS using the <style> tag inside the <head> tag. We are changing the text colour of all paragraph elements. We have named a class for each paragraph so that we can easily change the text colour by defining the colour of the paragraph element using the class. We will use the colour name, hex value, RGB value, and HSL value to change the colour of the text.
<!DOCTYPE html>
<html>
<head>
<title> Example 7 of Text Color </title>
<style>
.text1{
color: brown;
}
.text2{
color: #a5aa5b;
}
.text3{
color: rgb(167, 114, 114);
}
.text4{
color: hsl(165, 61%, 49%);
}
</style>
</head>
<body>
<h1> Embedded CSS </h1>
<p class="text1"> Changing the text color of paragraph 1 using color name. </p>
<p class="text2"> Changing the text color of paragraph 2 using color name. </p>
<p class="text3"> Changing the text color of paragraph 3 using color name. </p>
<p class="text4"> Changing the text color of paragraph 4 using color name. </p>
</body>
</html>
Output:
The output shows the different colours in the paragraphs.
