CSS Colors are an essential part of web design, providing the ability to bring your HTML elements to life. This feature allows developers to set the color of various HTML elements, including font color, background color, and more.
There are several ways to define the color of an element in CSS:
- Built-In Color: These are a set of predefined colors which are used by their names. For example: red, blue, green etc.
- RGB Format: The RGB (Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, and B values range between 0 to 255.
- RGBA Format: The RGBA format is similar to the RGB, but it includes an Alpha component that specifies the transparency of elements.
- Hexadecimal Notation: The hexadecimal notation begins with a # symbol followed by 6 characters each ranging from 0 to F.
- HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.
- HSLA: The HSLA color property is similar to the HSL property, but it includes an Alpha component that specifies the transparency of elements.
By understanding and utilizing these different methods, you can create vibrant and dynamic web pages that captivate your audience. Let’s dive in and explore the CSS Colors!
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;
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS color property</title>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Output:
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>
GeeksforGeeks
</h1>
</body>
</html>
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>
</head>
<body>
<h1>
GeeksforGeeks
</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);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hex property</title>
<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Output:
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>
<body>
<h1>
GeeksforGeeks
</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);
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS hsla color property</title>
<style>
h1 {
color: hsla(120, 100%, 50%, 0.50);
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
</body>
</html>
Output: