CSS Color
Color and BackgroundIn this lesson, we will learn how to apply text color in HTML using the CSS color property and its different color values.
CSS color Property
The CSS color property is used for defining the text color of an HTML tag. This property enables us to choose from a wide range of options, such as color names, hexadecimal color codes, RGB or RGBA values, and HSL or HSLA values. Understanding each of these options in detail will equip us with the necessary knowledge to make informed choices when styling our web content.
Let's discuss each color option with examples.
Color Names
Color names are the predefined name of colors like red, green, blue, yellow, etc. that can be used as color value for the CSS color property to change the text color of an HTML element. For example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Color Name Example</title>
<!-- Internal CSS -->
<style>
p {
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>Hexadecimal Color Codes
Colors can be defined using hexadecimal color code. A hexadecimal color code is a six-digit code that represents the intensity of red, green, and blue (RGB) values used to create a color. The code is written with a # prefix, such as #DC143C.
Consider the hexadecimal color code #8A2BE2. In this code, except #, the first two characters represent the intensity of red, the next two characters represent the intensity of green, and the last two characters represent the intensity of blue.
You can easily convert any color to its equivalent hexadecimal code by just converting its red, green and blue intensity values in hexadecimal code.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hexadecimal Color Code Example</title>
<!-- Internal CSS -->
<style>
p {
color: #DC143C;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>RGB and RGBA Color Values
RGB stands for Red, Green, and Blue. It allows you to define a color by specifying the intensity of red, green and blue color. The value of red, green and blue can be an integer value ranging from 0 to 255 or a percentage value ranging from 0% to 100%.
RGBA is an extension of RGB that includes an alpha value for transparency. The alpha value for transparency can be expressed in decimal format ranging from 0.0 to 1.0 where 0.5 means 50% transparency and 1.0 mean 100% opaque (means you can not see through). The transparency value can also be expressed in terms of percentage ranging from 0% to 100% where 50% means semi-transparent and 100% means fully opaque.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>RGB and RGBA Color Values Example</title>
<!-- Internal CSS -->
<style>
#para1 {
color: rgb(255, 0, 0);
}
#para2 {
color: rgba(255, 0, 0, 50%);
}
</style>
</head>
<body>
<p id="para1">This is a first paragraph of text.</p>
<p id="para2">This is a second paragraph of text.</p>
</body>
</html>HSL and HSLA Color Values
HSL stands for Hue, Saturation, and Lightness. It provides an alternative way to represent colors, making it easier to adjust the tone and shade of a color. See the image given below.
The value of Hue is ranging from 0 degree to 360 degree in HSL color spectrum, where 0 degree means red color, 60 degree means yellow color, 120 degree means green color, 180 degree means cyan color, 240 degree means blue color, 300 degree means magenta color and 360 degree or 0 means red color.
The value of Saturation is ranging from 0% to 100% where 0% means gray shading and 100% means full color.
The value of Lightness is also ranging from 0% to 100% where 0% means black and 100% means white color.
HSLA is an extension of HSL that includes an alpha value for transparency which can be expressed in either decimal format ranging from 0.0 to 1.0 or percentage format ranging from 0% to 100%.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HSL and HSLA Color Values Example</title>
<!-- Internal CSS -->
<style>
#para1 {
color: hsl(275, 85%, 25%);
}
#para2 {
color: hsla(120, 90%, 40%, 0.5);
}
</style>
</head>
<body>
<p id="para1">This is a first paragraph of text.</p>
<p id="para2">This is a second paragraph of text.</p>
</body>
</html>