CSS - Lección 7: Definición del color del texto

En esta lección vamos a profundizar en el tema de aplicar color a distintos elementos; por ejemplo, explicaremos técnicas para dominar la aplicación de color a nuestros textos.

Estos elementos tienen un denominador común: albergan dentro de ellos texto, el color del texto de los diversos elementos se puede manipular por medio de las hojas de estilo en cascada.

Existen muchas formas de implementar color al texto; cada una tiene sus ventajas y sus incovenientes. La razón por la que se puede aplicar color al texto de diversas formas, es porque hay circunstancias a la hora de diseñar que requieren una forma de implementación u otra.

Por ejemplo, hay desarrollos de diseños que no son muy complejos, entonces bastaría para implementar color dándole valores a la propiedad color mediante el nombre del color en cuestión. Trabajando en diseños complejos no podríamos aplicar esta clase de valores.

La forma más simple de aplicar color al texto de un elemento; como puede ser un párrafo o una lista, es estableciendo como valor el nombre (en inglés) del color que deseemos aplicar a la propiedad color. Por ejemplo, en la declaración color:blue; estableceríamos el color azul para el texto.

La segunda forma de controlar el color del texto es aplicando valores hexadecimales al color. Esta nueva forma de implementar valores es más precisa que la primera, y está destinada a conseguir mayor precisión en el color que deseamos establecer. Como ejemplo, para introducirnos, tenemos la siguiente declaración que establece el color verde para el texto: color:#00FF00;.

Su funcionamiento es el siguiente: se trata de tres pares de números; que miden la catidad de color primario que se aplicará. El primer par de números corresponde al color rojo, el pár de números del medio corresponde al color verde, y el último par de números al color azul. Mezclando estos tres, en mayor o menor grado, podemos crear cualquier color.

Figura 8.  Los colores que representa cada pareja
de números hexadecimales.

La tercera forma de aplicar color se basa en la anterior: mezclando distintas cantidades de colores primarios. La diferencia está en la sintaxis, ya que en este caso no se usa notación hexadecimal; lo que se usa son coordenadas paramétricas. Aquí un ejemplo de esta forma para color azul: color:rgb(0,0,255);.

La sintaxsis del valor de la propiedad empieza por unas siglas, las iniciales de cada color que se representa: red, green y blue. Entre paréntesis ponemos los parámetros de cada color separados por comas; el rango va de 0 a 255.

Existe una variante que consiste en poner los parámetros en tanto por ciento, en vez de utilizar el rango de 0 a 255. Por ejemplo, podemos escribir la siguiente declaración para poner un color rojo:rgb(100%,0%,0%);.

Estos son solo algunos ejemplos, puedes acceder a una completa paleta de colores a través de este enlace.