CSS: Colores

El color es un componente muy importante en el diseño web. De hecho, es de las primeras cosas que se modifican cuando se empieza un nuevo proyecto. CSS ofrece propiedades para modificar el color del texto, el color de fondo y de los bordes, e incluso permite crear sombreados con cualquier color.

En CSS, los colores se pueden indicar mediante un nombre predefinido (existen 140), con código hexadecimal o introduciendo valores numéricos a través de los modelos de color RGB y HSL. El método más habitual es el código hexadecimal, pero todos los métodos son igualmente válidos.

Por ejemplo, el nombre predefinido del color rojo es red. Si se quiere indicar mediante el código hexadecimal se usará el valor #ff0000. En cambio, con el modelo de color RGB el valor deberá ser rgb(255, 0, 0), mientras que usando el modelo de color HSL su valor será hsl(0%, 100%, 50%). Todos estos valores representan diferentes maneras de mostrar el mismo color.

Colores mediante palabra clave

Existe una nomenclatura predefinida de colores que permite aplicar hasta un total de 140 colores solo recordando el nombre. Por ejemplo, el nombre salmon aplicará el color salmón y el nombre olive aplicará el color verde olivo. Los navegadores web reconocen estos colores y los muestran igual.

Algunos nombres son muy populares, aunque sean en inglés, por tanto es fácil recordar el verde (green), el rojo (red), el azul (blue), el gris (gray), el blanco (white), el negro (black), el púrpura (purple), el amarillo (yellow) o el fucsia (fuchsia). Pero algunos son más difíciles de recordar.

Debido al hecho de que existen 140 colores con nombre predefinido, se recomienda trabajar con una tabla de referencia de colores. De todos modos, las alternativas que se explican a continuación también se pueden dominar fácilmente.

Colores mediante código hexadecimal

Indicar colores mediante código hexadecimal es más difícil que el método anterior, y sin embargo es el más popular y utilizado. Su sintaxis es la siguiente: almohadilla (#) seguida de 6 dígitos hexadecimales divididos en 3 grupos de 2. Cada grupo representa una cantidad de color (de rojo, verde y azul).

El esquema es el siguiente:

#RRGGBB

Siendo los dos primeros dígitos correspondientes al color rojo («R» de Red), los dos dígitos del medio corresponden al color verde («G» de Green), y finalmente, los dos últimos dígitos tienen que ver con el color azul («B» de Blue). Se deduce que el modelo de color RGB es el corazón de este método.

Por tanto, cada uno de estos tres colores está definido mediante dos dígitos hexadecimales. Cada dígito hexadecimal puede tener 16 valores, esto implica que podemos especificar 256 tonalidades de cada uno de los tres colores (rojo, verde y azul). El 256 nace de la multiplicación 16×16.

Con la combinación de las 256 tonalidades de cada uno de los tres colores es posible formar 16.777.216 de colores. Esto es así porque es el resultado de 256×256×256, o lo que es lo mismo, 256³.

Los dígitos hexadecimales son los siguientes:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

Cada color tiene dos dígitos hexadecimales, siendo 00 el valor más bajo y ff el valor más alto (mayor cantidad). Vamos a crear la máxima saturación del color azul: introduciremos 00 en el grupo del rojo, 00 en el grupo del verde y ff en el grupo del azul. El color azul es #0000ff.

Cuando los dos dígitos hexadecimales de cada uno de los tres colores se repite es posible comprimirlos, dos a dos. En este caso, el color #0000ff puede especificarse de la siguiente manera: #00f, que también será válida. En muchos otros casos (#0f2385), esta simplificación no será posible.

Colores mediante la función ‘rgb()’

La función rgb() también permite especificar los colores del modelo RGB, pero en este caso no se usa números hexadecimales, sino que se usa números enteros del sistema decimal. Este método puede ser más fácil porque tenemos la costumbre de trabajar con el sistema decimal (base 10).

Esta función requiere tres parámetros que deben ir desde el número 0 hasta el 255 cada uno, formando así las 256 tonalidades de los colores rojo, verde y azul. Por tanto, la sintaxis es la que se indica a continuación: rgb(r, g, b). Solo hay que sustituir las variables r, g y b por números.

Para crear el color azul en su máxima saturación de color se deberá usar el valor 255 en el parámetro correspondiente al color azul, y dejaremos en 0 los otros dos parámetros. El resultado será el siguiente: rgb(0, 0, 255).

Colores mediante la función ‘hsl()’

El modelo de color HSL tiene otro mecanismo para formar los 16,7 millones de colores. En este caso, los colores no se forman a partir de la combinación de los tres colores anteriores, sino que se forman mediante los valores de su matiz (hue), su saturación (saturation) y su luminosidad (lightness).

Para especificar colores utilizando el modelo HSL debe usarse la función hsl(). Esta función también requiere tres parámetros: hsl(h, s%, l%). El primero es el matiz, cuyos valores van del 0 al 359, incluyendo decimales. El segundo y el tercero son la saturación y la luminosidad, que pueden ir del 0% al 100%.

El matiz es un parámetro que tiene que ver con la rueda del color. En esta rueda veremos el rojo en la posición 0, y en el lado opuesto veremos el color cian, que por tanto se encuentra en la posición 180. En cambio, la saturación y la luminosidad no tienen ningún secreto: se aplica o se quita porcentaje.

Para crear el color azul utilizando el modelo HSL se debe usar el valor 240 en el parámetro del matiz. Dejaremos la saturación al 100%, y finalmente dejaremos la luminosidad en un 50%. Resultado: hsl(240, 100%, 50%).

Colores transparentes

Aplicar transparencia a los colores es un buen recurso en el diseño web. En CSS existen varios métodos para lograrlo, y están implementados especificando el color con código hexadecimal y los modelos RGB y HSL. En cambio, usando nombres predefinidos no se puede otorgar transparencia.

Los valores de color mediante código hexadecimal pueden extender su sintaxis con una cuarta columna posterior. En esta cuarta columna se indicará, mediante dos dígitos hexadecimales, el nivel de transparencia. El valor mínimo será 00 y el valor máximo será ff, siendo así totalmente transparente. De esta manera se puede indicar 256 niveles de transparencia. Por ejemplo: #0000ff80

Si usamos los modelos de color RGB y HSL, en vez de usar las funciones rgb() y hsl() se debe usar las funciones rgba() y hsla(). Se puede ver que añaden la variable a, que hace referencia al canal alfa con el fin de definir la opacidad de los píxeles. Por tanto, tienen un cuarto parámetro que se expresa en tanto por uno, es decir, que 0.5 equivale al 50% de transparencia.

Así es como se define el color azul, transparente al 50%:

p {
  color: #0000ff80;
}

p {
  color: rgba(0, 0, 255, 0.5);
}

p {
  color: hsla(240, 100%, 50%, 0.5);
}

En este ejemplo hemos aplicado el color azul con una transparencia del 50% a los párrafos (elemento <p>), por lo que se cambiará el color del texto.

Propiedades de color

En CSS existen varias propiedades que permiten modificar los colores en varios contextos, como un borde o un sombreado. A continuación se detallan algunas de las propiedades más relevantes relacionadas con el color:

Además de las propiedades border-color y background-color, que son específicas del color, también existen las propiedades generales border y background, que además del color también permiten especificar varios parámetros particulares sobre los bordes y el fondo.