CSS Colors
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.
Color Formats in CSS (Color Values)
Color Format | Description |
|---|---|
Color Name | 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!
Color Name
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: In this example, we will use the color property with the specified color name to set the text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS Color_name Color</title>
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
RGB Color 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: In this example, we will use the color property with the specified color in RGB format to set the text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS RGB Color</title>
<style>
h1 {
color: rgb(0, 153, 0);
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
RGBA Color 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: In this example, we will use the color property with the specified color in RGBA format to set the text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS RGBA Color</title>
<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
Hexadecimal Color Format
The hexadecimal color forat 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: In this example, we will use the color property with the specified color in Hex color format to set the text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS hex Color</title>
<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
HSL Color Fomat
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: In this example, we will use the color property with the specified color in HSL color format to set the text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS hsl Color</title>
<style>
h1 {
color: hsl(120, 100%, 30%);
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
HSLA Color Format
The HSLA color is similar to HSL color, 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: In this example, we will use the color property with the specified color in HSLA color format to set the text color.
<!DOCTYPE html>
<html>
<head>
<title>CSS HSLA Color</title>
<style>
h1 {
color: hsla(120, 100%, 50%, 0.50);
text-align: center;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
Contact Us