CSS Colors
CSS colors are most important for style. In css colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Using Color names
In CSS, a color can be specified by using a predefined color name, like
p{
color:red;
background-color:teal;
}
CSS/HTML support 140 standard color names
Using Hex
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color.
HEX Value
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
p{
color:#313131;
background-color:#c7c7c7;
}
3 Digit HEX Value
The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each components. So, if we have #ff00cc, it can be written like this: #f0c.
p{
color:#f0c;
background-color:#000;
}
Using RGB
An RGB color value represents RED, GREEN, and BLUE light sources.
RGB Value
In CSS, a color can be specified as an RGB value, using this formula: rgb(_red,_ _green_, _blue_)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
p{
color:rgb(0, 255, 255);
background-color:rgb(255, 255, 0);
}
Using RGBA
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.
An RGBA color value is specified with:
rgba(red, green, blue, alpha)
An alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all)
p{
color:rgba(0, 255, 255,0.5);
background-color:rgba(255, 99, 71, 0.5);
}
Using HSL Value
In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
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
body{
background-color:hsl(147, 50%, 47%);
}
see this for more idea: https://clarle.github.io/yui3/yui/docs/color/hsl-picker.html
Previous: CSS Backgrounds