Colores

CSS es un estándar muy flexible, lo que significa que algunas cosas se pueden hacer de muchas formas diferentes. Precisamente, la forma de indicar los colores es uno de los apartados más flexibles en CSS.

Los colores en CSS se pueden indicar de cinco formas diferentes: palabras clave, colores del sistema, RGB hexadecimal, RGB numérico y RGB porcentual. Aunque el método más utilizado por los diseñadores es el RGB hexadecimal, a continuación se muestran todas las alternativas que ofrece CSS.

Palabras clave

CSS define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

En el siguiente ejemplo se muestran todos los colores básicos tal y como los muestra el navegador (pincha en cada uno para obtener más información):

Aunque es la forma más sencilla de indicar los colores, este método prácticamente no se utiliza en las hojas de estilos reales, ya que sólo permite hacer referencia a un número muy reducido de colores.

RGB decimal

En el campo del diseño gráfico, se han definido varios modelos diferentes para referirse a los colores. Los dos modelos más conocidos son RGB y CMYK. Simplificando su explicación, el modelo RGB consiste en definir un color indicando la cantidad de color rojo, verde y azul que se debe mezclar para obtener el color. Técnicamente, el modelo RGB es un modelo de tipo "aditivo", ya que se suman colores para obtener el color deseado.

Por lo tanto, en el modelo RGB un color se define indicando sus tres componentes R (rojo), G (verde) y B (azul). Cada una de las componentes puede tomar un valor entre cero y un valor máximo. De esta forma, el color rojo puro en RGB se crea mediante el máximo valor de la componente R y un valor de 0 para las componentes G y B.

Si todas las componentes valen 0, el color creado es el negro; si todas las componentes toman su valor máximo, el color obtenido es el blanco. En CSS, las componentes de los colores definidos mediante RGB decimal pueden tomar valores entre 0 y 255. El siguiente ejemplo establece el color del texto de un párrafo:

p { color: rgb(71, 98, 176); }

La sintaxis que se utiliza para indicar los colores es rgb() y entre paréntesis se indican las tres componentes RGB, en ese mismo orden y separadas por comas. El color del ejemplo anterior se obtendría mezclando las componentes R=71, G=98, B=176, que se corresponde con un color azul claro.

Si se indica un valor menor que 0 para una componente, automáticamente se transforma su valor en 0. Igualmente, si se indica un valor mayor que 255, se transforma automáticamente su valor a 255.

RGB porcentual

Otra forma de indicar las componentes RGB de un color es mediante un porcentaje. El funcionamiento y la sintaxis de este método es el mismo que el del RGB decimal. La única diferencia en este caso es que el valor de las componentes RGB puede tomar valores entre 0% y 100%. El mismo color del ejemplo anterior se puede representar de forma porcentual:

p { color: rgb(27%, 38%, 69%); }

Al igual que sucede con el RGB decimal, si se indica un valor inferior a 0%, se transforma automáticamente en 0% y si se indica un valor superior a 100%, se trunca su valor a 100%.

RGB hexadecimal

Aunque se trata del método más complicado de indicar los colores, es el que más se utiliza con mucha diferencia. De hecho, prácticamente todos los sitios web reales utilizan exclusivamente este método. A continuación se muestran los pasos necesarios para definir un color en RGB hexadecimal:

1. Se toman las componentes RGB del color original, por ejemplo R = 71, G = 98, B = 176
2. El valor numérico de cada componente se transforma del sistema numérico decimal al sistema numérico hexadecimal. Esta operación es exclusivamente matemática. En el sistema decimal, se utilizan 10 símbolos para representar los números: del 0 al 9. En el sistema hexadecimal se utilizan 16 símbolos (de ahí su nombre): del 0 al 9 y de la A a la F. Así, en el sistema hexadecimal, después del 9 no va el 10, sino la A. La letra B sería 11, la C sería 12, etc.
3. Si se realiza la conversión hexadecimal de las componentes numéricas anteriores, se obtienen unos nuevos valores: R = 47, G = 62, B = B0.
4. Una vez obtenidas sus componentes hexadecimales, el color se indica concatenando el valor de las componentes y añadiendo el prefijo #. Así, el color anterior en la notación RGB hexadecimal de CSS sería #4762B0.

Con esta nueva notación, el color del mismo ejemplo anterior se indica de la siguiente forma:

p { color: #4762B0; }

Recuerda que aunque es el método más complicado para definir un color, se trata del método que utilizan la inmensa mayoría de sitios web, por lo que es imprescindible dominarlo. Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales, por lo que no es necesario realizar a mano estas operaciones matemáticas.

Una de las ventajas del formato RGB hexadecimal es que se pueden comprimir sus valores cuando todas sus componentes son iguales dos a dos:

#AAA = #AAAAAA
#FFF = #FFFFFF
#A0F = #AA00FF
#369 = #336699

En el siguiente ejemplo se establece el color de fondo de la página a blanco, el color del texto a negro y el color de la letra de los titulares se define de color rojo:

body { background-color: #FFF; color: #000; }
h1, h2, h3, h4, h5, h6 { color: #C00; }

Colores del sistema

Los colores del sistema son similares a los 17 colores básicos, pero en este caso hacen referencia al color que muestran algunos elementos del sistema operativo del usuario.

Existen varios colores definidos, como por ejemplo ActiveBorder, que hace referencia al color del borde de las ventanas activas. La lista completa de colores definidos se puede ver en http://www.w3.org/TR/CSS21/ui.html#system-colors.

Aunque es posible definir los colores en CSS utilizando estos nombres, se trata de un método que casi nunca se utiliza, por lo que se puede considerar prácticamente como una rareza de CSS.

Colores web safe

Como cada componente RGB de los colores puede tomar un valor entre 0 y 255, el número total de colores que se pueden representar con este formato es de 256 x 256 x 256 = 16.777.216 colores. Sin embargo, en la década de los 90 los monitores de los usuarios no eran capaces de mostrar más de 256 colores diferentes.

A partir de todos los colores disponibles, se eligieron 216 colores que formaron la paleta de colores "web safe". Esta paleta de colores podía ser utilizada por los diseñadores con la seguridad de que se verían correctamente en cualquier navegador de cualquier sistema operativo de cualquier usuario.

Hoy en día, su importancia ha descendido notablemente, ya que prácticamente todos los usuarios utilizan dispositivos con una profundidad de color de 16 y 32 bits. No obstante, el auge en el uso de los dispositivos móviles hace que siga siendo un tema a considerar, ya que las pantallas de muchos móviles sólo pueden representar un número reducido de colores.

La lista completa de colores web safe y sus valores hexadecimales se pueden consultar en http://en.wikipedia.org/wiki/Web_colors#Web-safe_colors.