Propiedades relacionadas con los colores y los fondos que se pueden aplicar en una página web.

Uno de los primeros cambios de estilo que podemos pensar realizar en un documento HTML es hacer variaciones en los colores de primer plano y de fondo. Esto es posible con las primeras dos propiedades que veremos a continuación:

Propiedad Valor Significado
color: [color] Cambia el color del texto que está en el interior de un elemento.
background-color: [color] Cambia el color de fondo de un elemento.

La propiedad color establece el color del texto, mientras que la propiedad background-color establece el color de fondo del elemento. Todas las propiedades CSS donde se hace referencia a colores, establecen la posibilidad de indicar 4 formas alternativas (con algunos derivados) para especificar el color deseado:

Nombre Formato Ejemplo
Palabra clave predefinida [palabra] red
Esquema RGB rgb(rojo, verde, azul) rgb(255, 0, 0)
Esquema RGB con canal alfa rgba(rojo, verde, azul, alfa) rgba(255, 0, 0, 0.25)
Esquema RGB hexadecimal #RRGGBB #ff0000
Esquema RGB hexadecimal abreviado #RGB #f00
Esquema HSL hsl(color, saturación, brillo) hsl(0, 100%, 100%)
Esquema HSL con canal alfa hsla(color, saturación, brillo, alfa) hsla(0, 100%, 100%, 0.25)

ColorPicker: Herramienta de conversión de colores entre formato RGB/RGBA, HEX y HSL/HSLA

A continuación iremos explicando cada uno de estos formatos para entender como se especifican los colores en CSS y utilizar el método que más se adapte a nuestras necesidades.

Consejo: Si lo que buscamos es un sistema para extraer colores (eye dropper) de una página web, podemos utilizar la extensión para Chrome de ColorZilla o el propio Chrome Developer Tools, que integra dicha funcionalidad.

Palabras clave de color

En el primer caso, se puede establecer el color utilizando palabras reservadas de colores, como red, blue, orange, white, navy, yellow u otras. Existen más de 140 colores diferentes y puedes verlos todos en SVG Colors.

Existen algunos valores especiales que puedes utilizar cuando quieras especificar un color, como colores transparentes o el color actual del texto, muy útil para SVG, por ejemplo.

Valor Significado
transparent Establece un color completamente transparente (valor por defecto de background-color)
currentColor Establece el mismo color que se está utilizando para el texto (CSS3)

Formato RGB

Uno de los métodos más conocidos por los diseñadores gráficos es utilizar el formato RGB. Las siglas RGB significan rojo, verde y azul, por lo que cada cifra (del 0 al 255) representa la intensidad de cada componente de color. Como se puede ver en la siguiente imagen, si utilizamos una cantidad (0, 0, 0) de cada canal, obtenemos el color negro. En cambio, si utilizamos una cantidad (255, 0, 0), obtendremos el color rojo.

Colores R (rojo), G (verde) y B (azul)

De esta forma, mezclando las cantidades de cada canal, se puede obtener prácticamente cualquier color. Existen muchos esquemas de colores, pero en diseño web nos interesa particularmente el esquema RGB (junto al HSL).

Colores RGB

La mayoría de los editores tienen los llamados color picker, que no son más que un sistema para elegir un color a base de clics por una paleta o circulo de colores. Por ejemplo, en Sublime Text existen plugins como GutterColor o ColorPicker y en Atom, color-picker.

Formato hexadecimal

El formato hexadecimal es el más utilizado por los desarrolladores web, aunque en principio puede parecer algo extraño y complicado, sobre todo si no has oído hablar nunca del sistema hexadecimal (sistema en base 16 en lugar del que utilizamos normalmente, en base 10).

Cada par de letras simboliza el valor del RGB en el sistema de numeración hexadecimal, así pues, el color #FF0000, o sea HEX(FF,00,00), es equivalente al RGB(255,0,0), que es también equivalente al HSL(0, 100%, 100%). Veamos algunos ejemplos para clarificarlo:

Hexadecimal Hex. abreviado Color RGB Palabra clave
#FF0000 #F00 255,0,0 red (rojo)
#000000 #000 0,0,0 black (negro)
#00FFFF #0FF 0, 255, 255 cyan (azul claro)
#9370DB #97D 147,112,219 mediumpurple (lila)

HailPixel nos proporciona una manera muy sencilla y rápida de seleccionar tonalidades de color en formato hexadecimal con sólo mover el ratón. Por otro lado, en ColorSpire puedes seleccionar el color deseado y observar como varían tanto los valores hexadecimales como los valores RGB o HSL (ver a continuación).

Truco: Como se puede ver en la segunda columna, para ahorrar espacio puedes utilizar el formato hexadecimal abreviado, especificando sólo las primeras tres cifras de cada par. Por ejemplo, #9933AA como #93A. El color abreviado sólo será fiel cuando los pares de cifras sean idénticos (o al menos, aproximados).

Formato HSL

Las siglas HSL significan color (o matiz), saturación y brillo. La primera cifra selecciona el matiz de color (una cifra de 0 a 360 grados), seleccionando el color del círculo exterior de la imagen. Por su parte, las dos siguientes, son el porcentaje de saturación y el brillo del color, respectivamente (ambos, porcentajes de 0% a 100%).

Rueda de color HSL

Canales Alfa

En el caso de los formatos RGB y HSL, existen dos extensiones CSS3 en las que se utiliza un canal alfa de transparencia (transparencias parciales): RGBA y HSLA. En ellos, la última cifra no es más que el grado de transparencia representado mediante un valor del 0 (completamente transparente) al 1 (completamente opaco).

Aunque actualmente no existe, es muy posible que con el tiempo añadan soporte a la posibilidad de indicar un par adicional al formato hexadecimal que indique el grado de transparencia, por ejemplo, #FF000077.

Consejo: Una herramienta genial para seleccionar varios colores en nuestros proyectos es Adobe Color CC. Nos permite escoger entre colores análogos, monocromáticos, tríadas, colores complementarios, compuestos o tonos similares. Muy visual e intuitiva. Otra herramienta, más simple pero muy práctica es HSL Picker, donde puedes elegir el color deseado utilizando el formato de colores HSL y pudiendo seleccionar incluso los canales alfa.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).