CSS: Nombres de colores

En CSS, los colores se pueden especificar mediante varios métodos. El método más fácil es mediante el uso de palabras clave, que son nombres predefinidos gracias a los cuales el navegador web entiende el color que debe representar. Existe un total de 140 palabras clave para designar colores.

Los otros métodos tienen que ver con los modelos de color RGB y HSL. El modelo RGB combina tres colores (rojo, verde y azul) para formar 16 millones de colores; este modelo se pude usar con códigos hexadecimales o con la función rgb(). Cada color tiene un valor numérico que va del 0 al 255.

256 × 256 × 256 = 16.777.216 colores
(R)   (G)   (B)

En cambio, el modelo HSL puede generar los 16 millones de colores mediante la combinación de niveles de matiz (hue), saturación (saturation) y luminosidad (lightness). En este caso, se usa la función hsl().

Tal y como se puede ver, los modelos RGB y HSL no son intuitivos. En este sentido, usar nombres predefinidos es un recurso cómodo y práctico.

Por ejemplo, así se define un texto de color salmón:

.selector {
  color: salmon;
}

Texto de color salmón.

Los nombres (palabras clave) que permiten definir los colores se pueden escribir tanto en mayúsculas como en minúsculas.

Lista de los 140 nombres de colores

En la siguiente tabla se indican las 140 palabras clave para definir colores en CSS. A su lado se ha introducido sus equivalencias en código hexadecimal, también muy usado en diseño web. Los colores aparecen en orden alfabético.