CSS Color Values and How to Use them
CSS Color Values and Types
This is going to be a very interesting and colorful and one of my favorite part in CSS due to a lot of colors. So without delaying lets start with different types of color values and types to use them and make our web elements colorful.
Types of Colors used in CSS
- Hexadecimal colors
- Hexadecimal colors with Transparency
- Hue-Saturation-Lightness (HSL Colors)
- Hue-Saturation-Lightness-Alpha (HSLA Colors)
- RGB Colors (Red Green Blue)
- RGBA Colors (Red Green Blue Alpha)
- Normal Colors ( with there names )
These are the types of colors we can use in CSS some of them are with transparency and some are directly text like Blue , Red , Black etc
Lets discuss each one and explain how they work :-
Hexadecimal colors :- These are the color codes generate from Hexadecimal number system which consist of A-F and 0-9. So our color codes will look like this #000000 which means black color or #FFFFFF which means white color. We can use these code like given below example :
.class{
background-color:#000;
}
.fontcolor{
color:#00FF00;
}
One important thing like to mention here if any Hexadecimal is having all those six digits same we can write the code half and machine (browser) will automatically understand rest 3 part is repeated. Suppose for black color code is #000000 ( 6 zero ) so we can write it #000 this will treat as #000000 , another example suppose color code is #AF0AF0 so we can write #AFO.
There are some plugins designed for Chrome / Firefox browsers :-
- Color Picker for Chrome
- Colorzilla for Chrome
- Color Picker for Chrome
- Colorzilla for Firefox
- Color Picker Eyedropped for Firefox
Hexadecimal colors with Transparency :- These color codes are with Transparency. We can use them like the given below code.
.background{
background-color:#00000020;
}
.fontcolor{
color:#00000020;
}
in this above code out of 8 digits 6 are for the hexadecimal color and rest 2 digits defines transparency. So if we want exactly black color we need not to mention 7th and 8th digit. In short we can defined transparency from 01-99.
Hue-Saturation-Lightness (HSL Colors) :- These color codes are Hue Saturation Light ( HSL ) – Hue is a degree on the color wheel (from 0 to 360) – 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white. Lets see an example of HSL color
#bgcolor {
background-color: hsl(120, 100%, 50%); /* green */
}
#bgcolor2 {
background-color: hsl(120, 100%, 75%); /* light green */
}
#bgcolor3 {
background-color: hsl(120, 100%, 25%); /* dark green */
}
#bgcolor4 {
background-color: hsl(120, 60%, 70%); /* pastel green */
}
Hue-Saturation-Lightness-Alpha (HSLA Colors) :- This color code is including Alpha ( here Alpha stands for transparency ). Rest everything is same as above HSL. So example code will become like this
#bgcolor {
background-color: hsla(120, 100%, 50%, 0.5);
}
#bgcolor2 {
background-color: hsla(120, 100%, 75% , 0.3);
}
#bgcolor3 {
background-color: hsla(290, 100%, 25%, 0.6);
}
In above code hsla , an addition to the transparency. Transparency can from 0.1 to 0.9 the more the value the darker the color.
RGB Colors :- This color code belongs to Red Green Blue color comination pattern. As we are aware colors are made from mixing of different colors. So in this pattern Red Green Blue mix and made a lot of colors. Those colors we can use to make our web pages colorful. Here is the sample code how to use RGB Colors :-
.bgcolor {
background-color: rgb(255, 0, 0); /* red */
}
.bgcolor1 {
background-color: rgb(0, 255, 0); /* green */
}
.bgcolor2 {
background-color: rgb(0, 0, 255); /* blue */
}
RGBA Colors :- This color code is same as RGB Colors but with addition of Alpha ( here Alpha means Transparency ). So our sample code will become something like this :-
.bgcolor{
background-color:rgba(0,0,0,0.3); /* Black color with transparency 0.3 */
}
.bgcolor1{
background-color:rgba(255,255,255,0.5); /* White color with transparency 0.5 */
}
RGBA designers are using in those sections where they want to show text as it is while using transparency in background.
Normal Colors :- In this color system we use natural calling color name directly in codes like red , blue , green etc . Given below is the sample code :
.bgcolor{
background-color:red;
}
.fontcolor{
color:blue;
}
This is all about color codes and color system for CSS. Hope this post helps our readers.
You may interested in knowing few more css things ? Here are some good post :-
