♦ CSS Color
♣ About Color
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.♣ Syntax Popular Colors
There are a total of 140 colors which can be defined directly by their names.Let us see some common colors and their names.
| Color Name | Display |
|---|---|
| cyan | |
| tomato | |
| magenta | |
| green | |
| yellow | |
| blue |
♣ Example1: Background Color in CSS
Background color can be set for html tags. Example
Input: Background coloring for h2 and div tag.
Output:
♣ Example2: Text Color in CSS
Regular text can be coloured as well. Example
Input: Coloring 3 different types of text.
Output:
♣ Example3: Border Color in CSS
Borders of elements can be colored as well. Example
Input: Coloring 3 different border-styles.
Output:
♣ RGB in CSS
Combination of Red, Green, Blue can give variety of colors.Red has total 256(0 to 255) shades of red.
Green has total 256(0 to 255) shades of green.
Blue has total 256(0 to 255) shades of blue.
Syntax:
rgb(red, green, blue)
It is easy to see we get a total of 256x256x256 colors. (!! those are a lot of colors).
♣ HEX in CSS
Combination of double Red, double Green, double Blue can give variety of colors.Red has total 256(0 to 255) shades of red, composed as r1r2 where r1 and r2 range from 0 to f (15 in decimal).
Green has total 256(0 to 255) shades of green, composed as g1g2 where g1 and g2 range from 0 to f (15 in decimal).
Blue has total 256(0 to 255) shades of blue, composed as b1b2 where b1 and b2 range from 0 to f (15 in decimal).
Syntax:
#rrggbb
It is easy to see we get a total of 256x256x256 colors. (!! Again those are a lot of colors).
♣ HSL in CSS
Combination of Hue, Saturation, and Lightness can give variety of colors.Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 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, 50% is neither light or dark, 100% is white
Syntax:
#hsl(hue, saturation, lightness)