HTML: Colores

Los colores son muy importantes en el diseño, ya que permiten modificar la apariencia de un documento HTML o página web. En HTML se pueden especificar mediante el atributo style sobre el elemento que se quiere modificar, o usando un selector en las hojas de estilo en cascada (CSS). Se puede modificar el color del texto, el color de fondo, el color del borde de una caja, y mucho más.

Sintaxis

Para modificar los colores de una web será necesario estar familiarizado con las propiedades CSS y los valores que deben usarse para indicar el color deseado. En la siguiente lista se detallan las propiedades más populares, usadas para modificar el color de todo tipo de elementos:

• color: especifica el color del texto.
• border: especifica las propiedades del borde.
• border-color: especifica sólo el color del borde.
• background: especifica las propiedades del fondo
• background-color: especifica sólo el color de fondo.

Por ejemplo, si queremos que una palabra de un párrafo aparezca de color rojo, la encerraremos en un elemento de línea <span>, le añadiremos un atributo style en el que indicaremos la propiedad CSS color y el color red.

<p>Texto normal y <span style='color:red'>texto rojo</span>.</p>

El resultado es el siguiente:

Texto normal y texto rojo.

Ahora vamos a crear una caja contenedora con un elemento de bloque <div> y con el color de fondo rojo. También le añadiremos el atributo style. En este caso, su valor tendrá con la propiedad background y el color red.

<div style='background:red;width:100%;height:15px'></div>

Dando como resultado:

En este caso, también le hemos indicado un ancho del 100% y un alto de 15px para indicarle un tamaño y así se pueda ver mejor el color de fondo.

Finalmente, vamos a crear otra caja contenedora con el elemento <div>, pero en este caso, en vez de modificar el color de fondo vamos a modificar el color del borde. Por tanto, su valor tendrá la propiedad border-color y el color red.

<div style='border:1px solid red;width:100%;height:15px'></div>

Obteniendo el resultado siguiente:

Valores de color

Los valores del color se pueden especificar mediante un nombre, mediante un código hexadecimal, o introduciendo sus valores en los modelos del color RGB y HSL. Además, se puede indicar un valor de transparencia.

Lista de valores de color:

• Nombre
• Código hexadecimal
• Modelo RGB
• Modelo HSL

En la práctica no importa si introducimos el color rojo indicando la palabra clave de su nombre (red), si lo hacemos mediante su código hexadecimal (#ff0000) o si lo hacemos mediante uno de los dos modelos de color (en RGB: rgb(255, 0, 0)). Todos funcionarán igual de bien. Es más importante sentirse cómodo; y por coherencia, se recomienda usar siempre el mismo método.

Valor por nombre

En HTML existe una nomenclatura predefinida de paletas de colores. En versiones antiguas de HTML, como es el caso de HTML 3.2, esta paleta era de 16 colores, y a partir de la versión 4.01 de HTML se publicó una paleta extendida con 140 colores. Por ejemplo, usando el nombre salmon como valor del color, se aplicará el color salmón, y usando el valor olive se aplicará el color verde olivo.

Tabla con los 16 nombres de colores más importantes:

Por supuesto, escribir directamente el nombre como valor del color —aunque sea en inglés— es el método más fácil de aplicar colores en documentos HTML. Debido a la cantidad de 140 colores predefinidos, es recomendable trabajar con una tabla de referencia al lado, ya que recordarlos a todos tampoco es algo habitual.

Valor por código hexadecimal

Especificar los colores mediante un código hexadecimal también es un método muy popular y relativamente sencillo, pues no es difícil familiarizarse con este método. Se trata de un código que empieza con el carácter # (almohadilla), al que le sigue 6 dígitos que se dividen en tres grupos. Cada grupo representa una cantidad de color. Resumiendo: #RRGGBB, de Red (rojo), Green (verde) y Blue (azul).

Los valores de cada grupo son dos dígitos que contienen enteros hexadecimales que van desde el 00 hasta el ff. Por ejemplo, si queremos crear el color rojo en su máxima saturación, introduciremos ff en el grupo del rojo, 00 en el grupo del verde y 00 en el grupo del azul. El resultado será: #ff0000.

Ejemplo de código HTML con un color en código hexadecimal:

<p style='color:#ff0000'>Texto rojo</p>

Con la combinación de los dos dígitos de cada grupo se pueden crear 256 colores, ya que es el resultado de 16×16. De este modo, podemos indicar 256 tonalidades de rojo, 256 tonalidades de verde y 256 tonalidades de azul. Y con la combinación de los tres grupos se pueden crear 16.777.216 colores (los famosos 16,7 millones de colores), o lo que es lo mismo, 256³.

Dígitos hexadecimales:

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

Valor por modelo RGB

Los colores se pueden especificar usando la función rgb(), que usa el modelo de color RGB. Los colores también se forman por la combinación del rojo, el verde y el azul, pero en este caso se usan números enteros en el sistema decimal (base 10) cuyos valores van del 0 al 255. La sintaxis es la siguiente: rgb(r, g, b). Se sustituye las variables r, g y b por números.

Si queremos formar el color rojo, será tan fácil como introducir el valor 255 en el parámetro del color rojo, el valor 0 en el parámetro del color verde y el valor 0 en el parámetro del color azul. El resultado será el siguiente: rgb(255, 0, 0).

Ejemplo de código HTML con un color en modelo RGB:

<p style='color:rgb(255,0,0)'>Texto rojo</p>

Valor por modelo HSL

Los colores se pueden especificar con la función hsl(), es decir, usando el modelo de color HSL. Este modelo permite crear los mismos 16,7 millones de colores que el modelo RGB, pero en vez de combinar tres colores lo hace modificando su matiz (hue), su saturación (saturation) y su luminosidad (lightness).

Los valores del matiz van desde el 0 hasta el 359, y pueden contener decimales. Debemos imaginar la rueda del color, en la posición 0 se encuentra el color rojo, y su complementario es el cian, que se encuentra en la posición 180. Los valores de la saturación y la luminosidad se aplican en porcentaje. Por lo tanto, estos valores deben ir desde el 0% hasta el 100%.

Si queremos formar la máxima saturación del color rojo, deberemos indicarle el valor de 0 en el matiz, el valor 100% en la saturación y el valor 50% en luminosidad. Si indicásemos una luminosidad del 0% saldría el color negro, y con una luminosidad del 100% saldría el color blanco.

Ejemplo de código HTML con un color en modelo HSL:

<p style='color:hsl(0, 100%, 50%)'>Texto rojo</p>

Aplicar transparencia

En ocasiones puede ser necesario aplicar transparencia a un color. Si lo especificamos mediante un nombre será imposible aplicarle transparencia. Para lograrlo debemos especificar el color mediante un código hexadecimal o con los modelos de color RGB y HSL.

En el caso del código hexadecimal, es tan sencillo como añadir una cuarta columna cuyo valor hexadecimal indicará el nivel de transparencia, que puede ir desde el mínimo (00) hasta el máximo (ff). Esto significa que cada color puede adquirir 256 niveles de transparencia. Por ejemplo: #ff000080.

En los casos de los modelos RGB y HSL es un poco diferente. En vez de usar las funciones rgb() y hsl() debe usarse las funciones rgba() y hsla(). La letra a que incorporan hacen referencia al canal alfa, que actúa como una máscara que permite definir la opacidad de cada píxel. Estas dos funciones se diferencian de las anteriores por la inclusión de un cuarto parámetro expresado en tanto por uno. Por ejemplo, para aplicar una transparencia del 50%: 0.5.

Color rojo con código hexadecimal, transparente al 50%: #ff000080.

Color rojo en modelo RGB, transparente al 50%: rgba(255, 0, 0, 0.5).

Color rojo en modelo HSL, transparente al 50%: hsla(0, 100%, 50%, 0.5).