The color property, text color

Recall that the color of the text and background can be controlled using the color and background-color properties.

Now let’s take a detailed look at the values of these properties.

The color can be specified as a keyword (a full list of keywords is given in the specification). For example:

color: black; /* Black */
color: red;   /* Red */
color: white; /* White */

Another way to specify color is to indicate a hexadecimal value. This is what we used in the previous assignment. In this case, the color is formed from the red, green and blue components that are specified as a hexadecimal number that ranges from 00 to ff. In addition to the six-character hexadecimal format, the color code may also consist of a three-character triplet. In this case, the second character in the color components is duplicated first:

color: #000; /* Black, the same as #000000 */
color: #f00;    /* Red, the same as #ff0000 */
color: #fff;    /* White, the same as #ffffff */

If you do not want to deal with hexadecimal values, you can use the special rgb function, which specifies the color in a more familiar decimal format within the range of 0 to 255. This code also consists of three color components that are separated by commas:

color: rgb(0, 0, 0)       /* Black, which is the same as #000000 */
color: rgb(255, 0, 0)     /* Red, which is the same as #ff0000 */
color: rgb(255, 255, 255) /* White, which is the same as #ffffff */

The rgb function has an extended version: rgba. In this case, the code not only specifies the color: the last value in the code indicates the degree of opacity of the color, which is also known as its alpha. The value may vary from 0 (fully transparent) to 1 (fully opaque):

color: rgba(0, 0, 0, 0.5)      /* Black, 50% opaque */
color: rgb(255, 0, 0, 0.3)     /* Red, 30% opaque */
color: rgb(255, 255, 255, 0.9) /* White, 90% opaque */