Interactive online courses HTML Academy
2026-03-09 10:59 Diff
https://htmlacademy.org/courses/html-css-basics/typography/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 */