Cómo usar las funciones HSL y calc en CSS para crear colores claros y oscuros

Sass ofrece mixins como darken y lighten para oscurecer o aclarar colores, pero ¿cómo podemos hacerlo sin un preprocesador, utilizando únicamente el poder de CSS moderno?

En este artículo vamos a ver cómo usar las funciones hsl y calc para generar versiones claras y oscuras de nuestros colores.

Demo

Puedes revisar el resultado final en este ejemplo interactivo.

Nuestros objetivos

• Aprender a usar HSL para definir colores en CSS.
• Usar la función calc() para manipular la luminosidad.

Colores en HSL

Para comenzar, supongamos que queremos tres versiones del color rojo corporativo de nuestra marca. La versión hexadecimal es #ff0000. Tomando ese valor como referencia, ¿cómo podemos modificarlo? Aquí es donde el formato HSL nos ayuda.

La función hsl() nos permite definir un color según su tono (Hue), saturación (Saturation) y luminosidad (Lightness). Si tomamos el color rojo #ff0000 y lo convertimos a HSL, el resultado es hsl(0, 100%, 50%).

Cómo convertir de HEX a HSL

Podemos usar hsl(0, 100%, 50%) para crear el color rojo corporativo y guardarlo en una variable:

--color-company-red: hsl(0, 100%, 50%);

Esto funciona bien, pero ¿cómo podemos cambiar la luminosidad para hacerlo más claro o más oscuro? El primer paso es separar los componentes del color y luego reconstruirlo usando la función hsl():

  --color-company-red-h: 0;
  --color-company-red-s: 100%;
  --color-company-red-l: 50%;
  /* Usando hsl creamos el color rojo por defecto */
  --color-company-red: hsl(var(--color-company-red-h), var(--color-company-red-s), var(--color-company-red-l));

Perfecto, primer paso completado: ya tenemos nuestro color rojo base definido con variables independientes.

Usar la función calc() para aclarar y oscurecer

Ahora que desacoplamos los valores del color rojo, podemos usar la función calc() de CSS para modificar el valor de la luminosidad.

La función calc() de CSS nos permite realizar operaciones matemáticas directamente con valores (por ejemplo: width: calc(3px + 100px);).

Si usamos la función calc() con los operadores + o - sobre la variable CSS --color-company-red-l, podemos aumentar o reducir la luminosidad. Con menos luminosidad obtenemos un tono oscuro, y con más luminosidad obtenemos un tono claro:

  /* Versión clara */
  --color-company-red-light: hsl(
    var(--color-company-red-h),
    var(--color-company-red-s),
    calc(var(--color-company-red-l) + 15%)
  );
  /* Versión oscura */
  --color-company-red-darken: hsl(
    var(--color-company-red-h),
    var(--color-company-red-s),
    calc(var(--color-company-red-l) - 25%)
  );

Ahora es momento de aplicar estos colores y sobrescribir las variables según la versión que queramos mostrar:

/* Cada clase sobrescribe el valor de --box-bg con una versión del color rojo */
 
.red {
   --box-bg: var(--color-company-red);
}
 
.red-light {
  --box-bg: var(--color-company-red-light);
}
 
.red-darken {
 --box-bg: var(--color-company-red-darken);
}
 
.box {
  background: var(--box-bg);
}

Demo final

¡Listo! Ya tenemos variantes claras y oscuras basadas en nuestro color rojo corporativo sin necesidad de ningún preprocesador.

Ejemplo en StackBlitz

Foto de zero take en Unsplash