CSS
Topperworld.in
Color
• CSS Color property is used to set the color of HTML elements.
• This property is used to set font color, background color, etc.
The color of an element can be defined in the following ways:
1. Built-In Color
2. RGB Format
3. RGBA Format
4. Hexadecimal Notation
5. HSL
6. HSLA
➢ Built-In Color
These are a set of predefined colors which are used by its name. For
example: red, blue, green etc.
Syntax:
h1 {
color: color-name;
}
Let's see the list of built-in colors along with their decimal and hexadecimal
values.
S.no. Color name Hexadecimal Value Decimal Value or rgb() value
1. Red #FF0000 rgb(255,0,0)
©Topperworld
CSS
2. Orange #FFA500 rgb(255,165,0)
3. Yellow #FFFF00 rgb(255,255,0)
4. Pink #FFC0CB rgb(255,192,203)
5. Green #008000 rgb(0,128,0)
6. Violet #EE82EE rgb(238,130,238)
7. Blue #0000FF rgb(0,0,255)
8. Aqua #00FFFF rgb(0,255,255)
9. Brown #A52A2A rgb(165,42,42)
10. White #FFFFFF rgb(255,255,255)
11. Gray #808080 rgb(128,128,128)
12. Black #000000 rgb(0,0,0)
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
Output:
©Topperworld
CSS
➢ RGB Format
The RGB(Red, Green, Blue) format is used to define the color of an HTML
element by specifying the R, G, B values range between 0 to 255. For
example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue
color is (0, 0, 255) etc.
Syntax:
h1 {
color: rgb(R, G, B);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: rgb(0, 153, 0);
text-align: center;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
©Topperworld
CSS
Output:
➢ RGBA Format
The RGBA format is similar to the RGB, but the difference is RGBA contains
A (Alpha) which specifies the transparency of elements.
The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully
transparent and 1.0 represents not transparent.
Syntax:
h1 {
color:rgba(R, G, B, A);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS RGBA color property</title>
<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
}
</style>
©Topperworld
CSS
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
Output:
➢ Hexadecimal Notation
The hexadecimal notation begins with # symbol followed by 6 characters
each ranging from 0 to F.
For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.
Syntax:
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hex property</title>
<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
Output:
©Topperworld
CSS
➢ HSL
HSL stands for Hue, Saturation, and Lightness respectively. This format uses
the cylindrical coordinate system.
• Hue: Hue is the degree of the color wheel. Its value lies between 0 to
360 where 0 represents red, 120 represents green and 240 represents
blue color.
• Saturation: It takes a percentage value, where 100% represents
completely saturated, while 0% represents completely unsaturated
(gray).
• Lightness: It takes percentage value, where 100% represents white,
while 0% represents black.
Syntax:
h1 {
color:hsl(H, S, L);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1 {
color: hsl(120, 100%, 30%);
text-align: center;
}
</style>
</head>
©Topperworld
CSS
<body>
<h1>
Topper World
</h1>
</body>
</html>
Output:
➢ HSLA
The HSLA color property is similar to HSL property, but the difference is
HSLA contains A (Alpha) which specifies the transparency of elements.
The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully
transparent and 1.0 represents not transparent.
Syntax:
h1 {
color:hsla(H, S, L, A);
}
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hsla color property</title>
<style>
h1 {
color: hsla(120, 70%, 50%, 0.50);
text-align: center;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
Output:
©Topperworld
CSS
❖ Text Color
It is used to set the color of the text.
Syntax:
h1 {
color:color_name;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS text color property</title>
<style>
h1 {
color: #8c623e;
text-align: center;
}
</style>
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
©Topperworld
CSS
Output:
❖ Background Color
It is used to set the background color of an HTML element.
Syntax:
h1 {
background-color:color_name;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS background color property</title>
<style>
h1 {
background-color: green;
text-align: center; }
</style>
</head>
<body>
<h1>
Topper World
</h1>
</body>
</html>
©Topperworld
CSS
Output:
©Topperworld
