What are colors?
- As the name defines colors are used to set the colors on the text.
- In CSS basically, we can set colors in three types of value: color by name, color by RGB value, and color by HEX value.
- In today's tutorial, we will see how we can use these color values.
This will be our basic boilerplate code for colors property
index.html
<!DOCTYPE html>
<html>
<head>
<title> Colors in CSS </title>
<style>
</style>
</head>
<body>
<p class="para"> This is a paragraph </p>
</body>
</html>
Color by name
- In this CSS color property, we will use the color name to set the color of the text.
- In this, we can use predefined color names like red, green, blue, purple, orange, etc.
.para {
color: red;
}
Output:
This is a paragraph
Output:
Color by RGB:
- In this color property, we will use RGB value to set the color.
- RGB color value represents RED, GREEN, and BLUE. And rgb value can be from 0 to 255.
- We can set rgb value by using this: rgb(red, green, blue).
- We can also set the opacity of the color by using alpha value. The alpha value can be from 0.0 to 1.0.
- We can set alpha value using this: rgb(red, green, blue, alpha).
.para {
color: rgb(196, 16, 166, 0.5);
}
Output:
This is a paragraph
Color by HEX
- In this color property, we will use the HEX value to set the color.
- HEX defines the hexadecimal value of the color and we can set using #rrggbb or #000000.
- In rrggbb, rr for Red, gg for green and bb for blue. OR we can also use these values from 0 to 255.
.para {
color: #201219;
}
Output:
This is a paragraph
