Códigos de colores

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:

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 {
  width: 150px;
  height: 150px;
  background-color: indigo;   /* Color de fondo */
  color: white;               /* Color de texto */
}

<div class="element"></div>

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.

Las propiedades color y background-color no son las únicas en las que podemos establecer colores. A medida que avancemos, encontraremos más propiedades donde usarlos.

Formas de usar colores en CSS

En CSS podemos utilizar en muchos lugares y de muchas formas alternativas. En la siguiente tabla puedes observar muchas de las formas existentes:

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: Existen formas para extraer colores de páginas o partes de la pantalla. Se llaman color dropper o color picker. Buscadores como Google, editores como VSCode o incluso el Developer Tools del propio navegador. Si estás en Windows, te recomiendo la aplicación Power Toys.

Palabras clave

Antes de meternos a entender las funciones de color como rgb(), hsl() u otros, vamos a ver las palabras clave predefinidas o del sistema. Son muy limitadas, pero nos pueden servir como primera opción para entender como funciona todo.

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

Canales alfa o transparencia

En algunos casos, es muy posible que necesitemos indicar un color con cierto grado de transparencia. Hasta ahora, solo hemos utilizado la palabra clave transparent, que es transparente al 100%. Pero más adelante veremos como utilizar transparencias parciales mediante canales alfa.

Además, también existe la propiedad opacity, mediante la cuál podemos hacer que un elemento y su contenido o elementos hijos tengan una transparencia parcial o completa. La veremos más adelante.