Colores CSS3: código RGB con y sin transparencias

Asignar un color a un texto, un borde o el fondo de un objeto es una de las propiedades más importantes de CSS para obtener un buen diseño. CSS heredó del lenguaje HTML dos formas de expresar los colores planos, usando código hexadecimal y usando el sistema RGB. En CSS3 se mantienen esos dos sistemas y se incluyen el uso de transparencias en los colores, una propiedad nueva que puedes graduar para jugar con diferentes cajas superpuestas. En este artículo te mostraremos varios recursos online que puedes usar para elegir los colores con el código hexadecimal y RGB sin tener que memorizar nada, pero también te daré claves sobre las propiedades de CSS3 que aceptan color y como funcionan los códigos hexadecimal y RGB.

La síntesis aditiva y el color RGB 
Lo primero que hay que aclarar es que RGB y HEX son diferentes formas de escribir los colores en CSS pero que se basan en el mismo sistema, que se llama RGB y se basa en los siguientes conceptos.

• El color es una propiedad de la luz, que percibe el ojo.
• El ojo humano percibe tres colores básicos. Rojo, Verde y Azul (red, green, blue) en inglés.
• Síntesis aditiva. La unión de los tres colores básicos a máxima intensidad crea la luz blanca (#FFFFFF). La ausencia de luz es el negro (#000000).
• La suma aditiva de luces crea colores muy diferentes, que no siempre son intuitivos.

• Mezcla de Rojo Verde, #FFFF00 crea el color amarillo.
• Mezcla de Rojo Azul, #FF00FF crea el color cían (azul claro).
• Mezcla del Verde y Azul #00FFFF crea el color rosa.

• La intensidad de la luz cada uno de los tres colores básicos se mide en 256 grados, en números del 0 al 255.
• Se emplea este sistema de 256 grados de intensidad porque la codificación de la información a nivel de la máquina está basada en un código binario de 0-1. Los 256 grados de intensidad son 2x2x2x2 x 2x2x2x2, es decir 8 bits con 2 posibilidades. Esto da a un total de 24 bits y sumados a 8 bits que se reservan para la transparencia dan un sistema de color de 32 bits.
• Con este sistema llamado también color real, se consiguen 256x256x256 combinaciones posibles. En total más de 16 millones de combinaciones, sin contar las transparencias.

Como puedes ver todos los colores posibles son la suma de 3 variables, por ello la forma más correcta de representar el sistema RGB es un cubo. Conociendo esto las diferencias que vamos a encontrar ahora son sólo 3 formas diferentes de expresar los colores de una página Web, para pantallas de color de 32 bits. En los dos primeros casos usaremos el sistema decimal y en el otro caso una numeración hexadecimal.

Color RGB en sistema decimal.

Este sistema es el menos empleado, pero es el más fácil de explicar ya que usa los números decimales que todos conocemos. Para determinar un color de un tipo de letra se usan tres cifras entre 0 y 255, que se corresponden a los tres tipos de luz. Los tres números van separados por comas y entre paréntesis.

rgb (0, 0, 0)            es el color negro.
rgb (255, 0, 0)        es el color rojo intenso.
rgb (255, 255, 0)    es el color amarillo.
rgb (255, 127, 0)    es el color naranja.

Añadiendo transparencia. Color RGBA.
En CSS3 además podemos añadir un cuarto valor, que va de 0 a 1. Si el color es totalmente opaco será 1 y si es una superficie totalmente transparente será 0. Esto es lo que se llama el color RGBA y se escribiría así para conseguir un color naranja con un nivel de transparencia muy alto que permitiera ver lo que hay debajo.

rgba (255, 127, 0, 0.2)

Colores HEX en CSS3.

En CSS los mismos colores se pueden codificar usando sólo dos cifras para cada número, para ello se usa un sistema hexadecimal, es decir con 16 caracteres diferentes. 00 es el valor más bajo y FF es el valor más alto. En este caso el color va precedido del signo # y valores para Red Green Blue van juntos.

#000000 es el negro,
#FF0000 es el rojo intenso
#FFFF00 es el color amarillo
#FF8000 es el color naranja

Una cosa curiosa es que el 8 es el número medio, no el 5, porque la numeración es la siguiente: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Así 0F equivale a 15, mientras que 1F es el equivalente al 31 en el sistema decimal.

La nomenclatura más usada, pero tiene la desventaja de que no permite añadir transparencias. La parte positiva es que algunos colores pueden ser abreviados, colocando sólo tres valores numéricos. Por ejemplo el blanco será #FFF, el blanco #000, el rojo #F00. En este sistema los saltos de un color a otro son de 17 tonos. Por ejemplo del #000 al #100 hay 15 colores intermedios que no se han tocado ya que en realidad los códigos completos son #00000 y #110000. Entre ellos nos saltamos los siguientes 15 tonos: #010000, #020000, #030000, #040000, #050000, #060000, #070000, #080000, #090000, #0A0000, #0B0000, #0C0000, #0D0000 #0E0000, #0F0000, #100000.

Algunos colores en el sistema RGB en los que no existe nada de luz roja.

Estos son los 3 sistemas de codificación que usamos en CSS3 para el sistema RGB, aunque algunos colores en CSS3 también los puedes escribir directamente en palabras inglesas. Por ejemplo red es equivalente a #FF0000. Aparte hay otro sistema para codificar el color, en el que se separa la luminosidad del color y que se llama color HSL, que dejamos para otra ocasión.


Recursos para el uso de colores RGB en programación.

• Tabla de códigos hexadecimales. Puede ser útil para tenerlo impreso y así trabajar los primeros esbozos sin tener que estar encima del ordeanador.
• Tabla de colores hexadecimales 2. Lo mismo pero mostrando todos los códigos compactos. Hay que decir que en estas tablas sólo se incluyen 256 colores de las más de 16 millones de combinaciones posibles.
• Generador de códigos hexadecimales. Es lo más rápido y cómodo.
• Nombres clave para los colores de la Web, con equivalencias en código hexadecimal y en decimal.
• Tabla de valores RGB decimales, con convertor al sistema HEX.

Imágenes: la primera imagen no tiene copyright. Las otras tres han sido creadas por Joan Tapia Llorens, con licencia Creative Commons BY-SA 3.0. Puedes usarlas para tu blog añadiendo la referencia y un enlace a este artículo.