La propiedad color: color del texto

Ya sabemos que color y background-color controlan el color del texto y del fondo.

Ahora veremos sus valores con más detalle.

Podemos indicar un color mediante una palabra clave. La lista completa está en la especificación. Por ejemplo:

color: black; /* negro */
color: red;   /* rojo */
color: white; /* blanco */

Otra opción es usar un valor hexadecimal, como hicimos en el ejercicio anterior. En este formato, el color combina tres componentes: rojo, verde y azul. Cada uno se expresa con un número hexadecimal de 00 a ff. También podemos usar un código de tres dígitos en lugar de seis: cada dígito se repite para formar el par correspondiente.

color: #000000; /* negro */
color: #f00;    /* rojo, equivale a #ff0000 */
color: #fff;    /* blanco, equivale a #ffffff */

Si prefieres trabajar con números decimales, puedes usar la función rgb. Sus tres componentes se indican con valores de 0 a 255, separados por comas:

color: rgb(0, 0, 0);       /* negro, equivale a #000000 */
color: rgb(255, 0, 0);     /* rojo, equivale a #ff0000 */
color: rgb(255, 255, 255); /* blanco, equivale a #ffffff */

La función rgba permite agregar un cuarto valor: el canal alfa, que controla la opacidad del color. Va de 0, totalmente transparente, a 1, totalmente opaco:

color: rgba(0, 0, 0, 0.5);      /* negro con un 50% de opacidad */
color: rgba(255, 0, 0, 0.3);     /* rojo con un 30% de opacidad */
color: rgba(255, 255, 255, 0.9); /* blanco con un 90% de opacidad */