You must have colored the webpage by giving style in html document. The biggest problem in this was that you had to add color with the html element every time. You can use css color property to get rid of this problem.
In CSS you can define color rules for each element. With this, you can do everything from font-color, border-color, outline-color.
Ways to add CSS Color
Many ways to declare color are given in css. You can add 2 values to it. Which are as follows: –
1. CSS Color Name
2. CSS Color value
If you have not read these articles of ours so far, then first you read them so that you do not have any problem. To learn CSS you have to walk step by step.
What is CSS and its benefits?
How to add css to a webpage
What is CSS Selector and how is it used?
How to use CSS Border Property – Complete information In English
1. CSS color Name
You can also declare the color in css by its name. Eg red, green, blue etc. But the biggest problem in this is that we cannot remember the names of all the colors. When we do not have the name of the color, then we cannot even add it nor can we search in Google.
In the case of Color, ladies are much more intersted. She can remember many color names and can identify them. The biggest thing is that not all browsers support color name either.
So far, around 140 colors have been considered as Standard Color by the W3C – World Wide Web Consortium. Their number is also increasing daily.
2. Color value
Color in CSS can be specified with RGB values, HEX values, HSL values, RGBA values, and HSLA values.
For example, you can also define red color as follows: –
rgb (255, 0, 0)
hsl (0, 100%, 50%)
Similarly, this color is red but it has been given a 50% transparent value.
rgba (255, 99, 71, 0.5)
hsla (0, 100%, 50%, 0.5)
RGB Color Value
All browsers support RGB color value. The RGB color value is specified as follows: – rgb (red, green, blue)
In this, every parameter is defined by its intensity, which is between 0 and 255. like:-
rgb (255, 0, 0) will show red color as red color is given the highest value (255) while green and blue are given the lowest 0 value.
rgb (0, 0, 0) All values are set to 0 to show the black color in it.
rgb (255, 255, 255) In this, all parameters are given the highest value 255 to show the white color.
Red Color Paragraph
Blue Color Paragraph
Green Color Paragraph
Its output will be as follows-
HEX Color Value: – #rrggbb
Hexadecimal color values support all browsers. In this, the color is specified by the #rrggbb value. In this, rr means red, gg means green and bb means blue color.
It uses a Hexadecimal number system consisting of 16 digits in total. In this system 10 digits and 6 letters are used.
These 16 digits are as follows: –
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
In this, F is the highest value and 0 is considered the lowest value. See for example: –
# FF0000 will show red color because red color value is highest (F) and green and blue color value is lowest (0). Similarly # 00FF00 value will show green color and # 0000FF value blue color.
HSL color value
HSL is used for Hue, Saturation and Lightness. HSL is defined as: – hsl (hue, saturation, lightness).
Now let’s understand this in detail.
Hue: – It is a color degree which ranges from 0 to 360. In this, 0 means red, 120 means green and 240 means blue color.
This is a percentage value in which 0% means shade of gray color and 100% means full color.
This is also a percentage value in which 0% means black, 50% means neither black nor white and 100% means white color.
hsl (0, 100%, 50%) means red color
hsl (240, 100%, 50%) means Blue color
hsl (120, 100%, 50%) means Green color
You read about css color property. I suggest that you use HEX color value which is also the best and the easiest. I believe that while reading our css tutorial, keep using your computer’s notepad as well, which will make it easier for you to learn.