The first and easiest way to specify a color is using one of the 140 predefined color keywords specified in CSS.
p {
color: red;
}Most of you have probably heard about CMYK values for print design. RGB, which stands for red, green, and blue is the color model that monitors use. Since in web design we're primarily concerned with what web pages look like on screens, RGB is the color model we use.
p {
color: rgb(255, 0, 0);
}
/* Percentages work too */
p {
color: rgb(100%, 0%, 0%);
}It's just like RGB, except with the addition of a fourth value: the alpha channel.
The alpha value represents the level of transparency that the RGB color should have. It can be a value from 0 to 1 or a percentage from 0 to 100%. Note that you must specify RGBA instead of RGB.
p {
color: rgba(255, 0, 0, .8);
}The HSL color model is one of the least used, but gaining traction because can be more intuitive to use when working with shades and color adjustments.
HSL stands for: hue, saturation, and lightness.
p {
color: hsl(0, 100%, 50%);
}
HSLA is simply the HSL color model with the addition of an alpha channel. This works exactly the same way as the alpha channel in RGBA.
p {
color: hsla(0, 100%, 50%, .5);
}Probably the most common (yet least intuitive) way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F. Hex values are always prefixed with a # symbol.
p {
color: #FF0000;
}
If both digits of the red, green and blue values are the same, you may use the short three-digit notation. This is best shown by an example:
p {
color: #F00;
}Source: http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors