Most of the HTML web pages contain text in order to provide information. HTML Text may contains instructions, explanation etc. But in order to make the reading experience better, the HTML text is generally formatted with different styling techniques, and coloring or changing text color is one of them. In this tutorial, we will explain how to change the HTML Text color in different ways.
Why Change HTML Text Color?
Before starting to explain how to change HTML Text color, we will list some use cases and benefits changing text color.
- Express an important part of the text or information.
- Mark important keywords in a text and made it easier to find.
- Style notes to differentiate from normal text.
- Make warnings more visible and readable.
Change HTML Color With Style Attribute
The most popular and easy way to change HTML text color is to use the style attribute of different HTML tags. In this example, we will change the <p> tag style attribute with the color value by setting the color we want to set.
<html>
<body>
<p>I am normal which means black</p>
<p style="color:red;">I am RED</p>
<p style="color:blue;">I am BLUE</p>
<p style="color:yellow">I am YELLOW</p>
<p style="color:purple">I am PURPLE</p>
<p style="color:brown">I am BROWN</p>
</body>
</html>
Change HTML Color For Specific Tag or Block
We can set the HTML color for different tags or blocks. CSS class or selectors can be used to make a group of HTML elements text color.
<html>
<head>
<style>
p {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<p>I am normal which means black</p>
<h1>I am a Header</h1>
</body>
</html>
HTML Color Formats
HTML Colors can be definedin different formats. Most popular HTML color formats are Hex, Color Name, RGB and HSL formats.
Hex Color Code consist of hexadecimal value where the color can be expressed precisely. As an example ” #FF0000″ defines the red color.
Color Name is the most used, popular, and human-friendly name where the exact color name is provided like red, cyan, black, etc.
RGB Color Value is similar to the hex color code where 3 values are provided to define the color it is like a color palette where red, green, and blue are merged together in order to create other colors.
Change HTML Color With Hex Color Codes
We can change the HTML text color by using Hex color code. We will just use previously defined techniques to set color.
<html>
<body>
<p>I am normal which means black</p>
<p style="color:#FF0000;">I am RED</p>
<p style="color:#0066ff;">I am BLUE</p>
<p style="color:#ffff00">I am YELLOW</p>
<p style="color:#663300">I am BROWN</p>
</body>
</html>
Change HTML Color With Color Names
Color names are the easiest way to define and change the HTML text color. Actually we have already provided examples to use color names for HTML text. Please take a look “Change HTML Color With Style Attribute” section.
Change HTML Color With RGB Color Values
RBG Color values are another way to define different colors with different dark and light variations.
<html>
<body>
<p>I am normal which means black</p>
<p style="color:rgb(255, 0, 0);">I am RED</p>
<p style="color:rgb(0, 102, 255);">I am BLUE</p>
<p style="color:rgb(255, 255, 0)">I am YELLOW</p>
<p style="color:rgb(102, 51, 0)">I am BROWN</p>
</body>
</html>
Change HTML Color With HSL Color Values
Even not so popular HSL Color Values can be used to set HTML Text color. HSL looks similar to the RGB where some values are provided to define a color with more dark or light.
<html>
<body>
<p>I am normal which means black</p>
<p style="color:hsl(0, 100%, 50%);">I am RED</p>
<p style="color:hsl(216, 100%, 50%);">I am BLUE</p>
<p style="color:hsl(60, 100%, 50%)">I am YELLOW</p>
<p style="color:hsl(30, 100%, 20%)">I am BROWN</p>
</body>
</html>