Colores CSS

Uno de los primeros cambios de estilo que hacemos cuando aprendemos CSS es hacer variaciones en los colores de primer plano y de fondo de un documento HTML o de cualquiera de sus elementos o partes. Sin embargo, indicar el color específico no es una tarea fácil. Hay múltiples formas de definir un color en CSS, algunas más sencillas, otras más complejas.

Propiedades de color

Primero vamos a ver las propiedades CSS que podemos utilizar para cambiar el color de texto y el color de fondo de un elemento HTML:

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

Como podemos ver en la tabla anterior, la propiedad color establece el color del texto, mientras que la propiedad background-color establece el color de fondo del elemento. De esta forma, podemos hacer cosas como estas:

.element {
  background-color: black;   /* Color de fondo */
  color: white;              /* Color de texto */
}

Sin embargo, aunque se suele hacer mucho en fases de aprendizaje, lo normal no suele ser indicar colores con palabras clave, ya que es una forma poco precisa de hacerlo, sino utilizar alguna función CSS de colores que veremos a continuación.

Formas de indicar un color

Todas las propiedades CSS donde existen valores , establecen la posibilidad de indicar varias formas alternativas (con algunos derivados) para especificar el color deseado:

Esquema	Nombre	Descripción
red	Palabra clave predefinida	Establece un color mediante una palabra clave predefinida.
rgb()	Función RGB	Utiliza una función rgb() (rojo, verde, azul).
rgba()	Función RGB con canal alfa	Función rgb() o rgba() con un canal alfa (transparencia) añadido.
#rrggbb	Código RGB hexadecimal	Notación RGB abreviada en hexadecimal.
#rgb	Código RGB hexadecimal con canal alfa	Notación RGB abreviada en hexadecimal con un canal alfa añadido.
hsl()	Función HSL	Función hsl() (matiz de color, saturación y brillo).
hsla()	Función HSL con canal alfa	Función hsl() o hsla() con un canal alfa añadido.

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.

La mayoría de los editores tienen los denominados ColorPicker, que no son más que un sistema cómodo y rápido para elegir un color a base de clics por una paleta o circulo visual. También podemos hacerlo directamente en buscadores como Duck Duck Go o Google.

Consejo: Si lo que buscamos es un sistema para extraer colores (color dropper) de una página web, imagen u otra aplicación de nuestro escritorio, podemos usar tanto el Developer Tools del navegador (incorpora uno integrado en el selector de colores), como la aplicación Power Toys (Windows).

Palabras clave de color

El primer caso (y más limitado) permite establecer el color utilizando palabras reservadas de colores, como red, blue, orange, white, navy, yellow u otras. Existen más de 140 palabras clave para indicar colores:

Además, 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 (tanto en CSS, como en SVG)

Veamos algunos ejemplos de palabras clave de color:

.element {
  background-color: blue;
  background-color: transparent;
  background-color: lightpink;
  background-color: rebeccapurple;  /* En honor a Rebeca, la hija de Eric Meyer */
}

Como hemos dicho, estas palabras clave son limitadas, por lo que si necesitamos una tonalidad muy específica puede ser insuficiente, y sería mejor utilizar uno de los códigos o funciones de color que veremos en los próximos apartados.

Colores del sistema

Además de las palabras clave predefinidas anteriores, también tenemos algunas otras palabras clave para hacer referencia a ciertos colores establecidos por el sistema operativo. Estas palabras clave son las siguientes:

Valor	Significado
canvas	Color de fondo del contenido de una aplicación o documento.
canvastext	Color de texto de una aplicación o documento.
linktext	Enlace no visitado y no activo.
visitedtext	Enlace ya visitado.
activetext	Enlace activo.
buttonface	Color de fondo de un botón pulsable.
buttontext	Color de texto de un botón pulsable.
buttonborder	El color del borde un botón pulsable.
field	Color de fondo de campos de texto <input>.
fieldtext	Color de texto de campos de texto <input>.
highlight	Color de fondo de textos seleccionados.
highlighttext	Color de texto de textos seleccionados.
selecteditem	Color de fondo de ítems seleccionados.
selecteditemtext	Color de texto de ítems seleccionados.
mark	Color de fondo de un texto especialmente marcado <mark>.
marktext	Color de texto especialmente marcado <mark>.
graytext	Color de texto desactivado.

* Los cuadritos anteriores se calculan a partir del sistema operativo en tu navegador. Si tienes un sistema operativo que no soporta alguna de estas palabras clave, te aparecerá con fondo rojo rayado.

Función RGB

Si queremos indicar en CSS un color utilizando la función RGB, podemos utilizar la función rgb(), escogiendo entre una de las siguientes variaciones:

Función RGB	Descripción
rgb(r, g, b)	Notación clásica: Valores numéricos o porcentajes separados por coma.
rgb(r, g, b, a)	Se añade al anterior un valor correspondiente al canal alfa, separado por coma. Ver canales alfa
rgb(r g b)	Notación moderna: Valores numéricos o porcentajes separados por espacio.
rgb(r g b / a)	Se añade al anterior un valor correspondiente al canal alfa, separado por /. Ver canales alfa

Como se puede ver, en cada uno de los casos anteriores, se deben indicar los valores r, g y b. Significan rojo, verde y azul, respectivamente, y hacen referencia a la cantidad de color que poseen estos canales para generar otro color. Para especificarlo se puede hacer de dos formas:

• Como números, desde el 0 al 255, siendo el primero el más oscuro y el segundo el más claro.
• Como porcentajes, desde el 0% al 100%, siendo el primero el más oscuro y el segundo el más claro.

Como se puede ver en la siguiente imagen, donde utilizamos el formato de , si utilizamos una cantidad rgb(0, 0, 0) de cada canal, obtenemos el color negro (todos los canales están en su valor más oscuro). En cambio, si utilizamos una cantidad rgb(255, 0, 0), obtendremos el color rojo (solo el canal rojo está en el más oscuro).

De esta forma, mezclando las cantidades de cada canal, se puede obtener prácticamente cualquier color. Existen otros esquemas de colores, pero en diseño web es muy importante comprender el esquema RGB, ya que es uno de los más conocidos.

Veamos algunos ejemplos de indicar colores con la función rgb():

.element {
  /* Notación clásica */
  background-color: rgb(125, 80, 10);
  background-color: rgb(55%, 25%, 75%);

  /* Notación moderna */
  background-color: rgb(125 80 10);
  background-color: rgb(55% 25% 75%);
}

Más adelante veremos los canales alfa, que actualmente pueden indicarse tanto en las funciones rgb() como en las funciones rgba().

Formato hexadecimal

El formato hexadecimal es el más utilizado por los desarrolladores web, y viene derivado del formato RGB. 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: base 10), es simplemente el formato RGB abreviado.

Cada par de letras simboliza el valor del RGB en el sistema de numeración hexadecimal. Por ejemplo, tenemos el color rojo en RGB, que es rgb(255, 0, 0). Si queremos pasarlo al formato RGB abreviado, debemos convertir cada valor a hexadecimal, quedando FF (255), 00 (0) y 00 (0). Es decir, en hexadecimal: #FF0000.

Color RGB	Hexadecimal (RGB Abreviado)	Hex. abreviado	Palabra clave
rgb(255, 0, 0)	#FF0000	#F00	red (rojo)
rgb(0, 0, 0)	#000000	#000	black (negro)
rgb(0, 255, 255)	#00FFFF	#0FF	cyan (azul claro)
rgb(147, 112, 219)	#9370DB	#97D	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.

Truco: Como se puede ver en la tercera 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).

Veamos algunos ejemplos del formato hexadecimal (RGB abreviado):

.element {
  background-color: #512592;
  background-color: #000000;    /* Abreviable a #000 */
  background-color: #451;       /* Equivalente a #445511; */
}

Existe una forma de añadir un canal alfa en los colores hexadecimales, lo explicaremos más adelante.

Formato HSL

Otra función interesante para indicar colores en CSS es la función hsl(), ya que sus parámetros suelen ser mucho más intuitivos para la mayoría de los desarrolladores que otros como hexadecimal o RGB. Su sintaxis es la siguiente:

Función RGB	Descripción
hsl(h, s, l)	Notación clásica: Número de grados separados por coma.
hsl(h, s, l, a)	Se añade al anterior un valor correspondiente al canal alfa, separado por coma. Ver canales alfa
hsl(h s l)	Notación moderna: Número de grados separados por espacio.
hsl(h s l / a)	Se añade al anterior un valor correspondiente al canal alfa, separado por /. Ver canales alfa

Las siglas HSL significan matiz de color (hue), saturación y luminosidad (brillo). La primera cifra selecciona el matiz de color, representado con H en el círculo exterior de la imagen. Se trata de un valor de 0deg a 360deg. Por otro lado, las dos siguientes, son el porcentaje de saturación y el brillo del color, respectivamente, en ambos casos un valor de 0% a 100%.

Veamos algunos ejemplos de la aplicación de la función hsl() en nuestro código:

.element {
  /* Notación clásica */
  background-color: hsl(120deg, 25%, 75%);

  /* Notación moderna */
  background-color: hsl(120deg 25% 75%);
}

Canales Alfa

En algunos casos, es muy posible que deseemos indicar un color que tenga cierto grado de transparencia, y de esta forma, refleje el contenido, color o imágenes que se encuentren detrás parcial o completamente. Hasta ahora solo conocíamos la palabra clave transparent, que es una transparencia completa aplicable sólo en ciertas situaciones.

Sin embargo, existe la posibilidad de utilizar los denominados canales alfa, que permiten establecer un porcentaje de transparencia parcial sobre un color. Estos se pueden establecer en los diferentes formatos vistos hasta ahora, salvo en los colores con palabras clave.

Método	Descripción
rgb(r, g, b, a)	Notación clásica: Se añade un último parámetro con el porcentaje del canal alfa.
rgb(r g b / a)	Notación moderna: Se añade el porcentaje del canal alfa separado por un /.
hsl(r, g, b, a)	Notación clásica: Se añade un último parámetro con el porcentaje del canal alfa.
hsl(r g b / a)	Notación moderna: Se añade el porcentaje del canal alfa separado por un /.
#rrggbbaa	Se añade el porcentaje del canal alfa en hexadecimal como un nuevo par aa.
#rgba	Notación abreviada: Idem al anterior, pero sin repetir cada par.

Veamos algunos ejemplos de cada caso:

.element {
  background-color: rgb(0, 0, 0, 0.5);             /* Notación clásica */
  background-color: rgb(0 0 0 / 50%);              /* Notación moderna */
  background-color: hsl(180deg, 50%, 25%, 0.75);   /* Notación clásica */
  background-color: hsl(180deg 50% 25% / 75%);     /* Notación moderna */
  background-color: #aa44bb77;
  background-color: #a4b7;                         /* Notación abreviada */
}

Ten en cuenta que puedes usar tanto rgba() como hsla() en lugar de rgb() y hsl() para usar canales alfa. Antiguamente había que utilizarlos de forma obligatoria, pero actualmente rgb() y hsl() soportan canales alfa sin problemas.

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.