Colores
Función hwb()Función lab()Función oklab()Función lch()Función oklch()Función color()Función color-mix()

<< Funciones matemáticas Opacity >>

En el siguiente punto, vamos a ver algunas de las nuevas funciones que dispone CSS para asignar color a un elemento.

Función hwb()

La función hwb(hue whiteness blackness) es un método muy parecido al ya visto hsl pero un poco más fácil. Los parámetros que recibe son:

  • h: ángulo o matiz de color, el valor será entre 0deg y 360deg.
  • w: que es el porcentaje de la claridad, de 0% a 100%
  • b: que es el porcentaje de la oscuridad, de 0% a 100%
.elemento {
    background: hwb(12 50% 0%);
    background: hwb(50deg 30% 40%);
    background: hwb(0.5turn 10% 0% / .5);
}

El cuarto parámetro que está recibiendo en el último background, corresponde con el canal alfa o transparencia y que se indica o bien con un número entre 0 y 1 o con un porcentaje entre 0% Y 100%, precedidos en ambos casos por una barra /.

Función lab()

Cuando hablamos de LAB, hacemos referencia a un motor de color mucho más completo que los vistos hasta ahora como RGB o HSL. LAB significa: L – luminosidad de negro a blanco, A - luminosidad de rojo a verde y B luminosidad de azul a amarillo. Los parámetros por tanto que usamos con la función lab pueden ir en formato numérico o porcentaje y si le añadimos una / podemos añadir el canal alfa de transparencia.

Los parámetros de estas funciones pueden tomar los siguientes valores:

  • l (luminosidad negro-blanco): un procentaje entre 0% y 100%, o un número entre 0 y 100
  • a (luminosidad rojo-verde): un porcentaje entre -100% y 100%, o un número entre -125 y 125.
  • b (luminosidad azul-amarilla): un porcentaje entre -100% y 100%, o un número entre -125 y 125.
.elemento {
    background-color: lab(100 125 125);
    background-color: lab(100 125 125 / 0.4);
}

Función oklab()

La función oklab es una mejora de la función lab, es una función útil para:

  • Transformar una imagen en escala de grises sin cambiar la luminosidad
  • Modificar la saturación de los colores mientras el usuario sigue teniendo la misma percepción de color e iluminación
  • Crear un gradiente de colores suave y uniforme por ejemplo cuando se interpolan en un elemento canvas.

Los valores que pueden tener los tres parámetros de la función son

  • l (luminosidad negro-blanco): un porcentaje entre 0% y 100% o un número entre 0 y 1.
  • a (luminosidad verde-rojo): un porcentaje entre -100% y 100%, o un número entre -0.4 y 0.4.
  • b (luminosidad azul-amarillo): un porcentaje entre -100%y 100% o un número entre -0.4 y 0.4
.elemento {
    background-color: oklab(80 0.50 0.11);
    background-color: oklab(80% 0.2 -0.2 / 0.75);
}

Función lch()

La función LCH corresponde al modelo de color CIE LCH, donde se utilizan las coordenadas cilíndricas en los parámetros CH. La L corresponde a la luminosidad de blanco y negro, la C a la saturación en forma de distancia geométrica desde el eje L, y la H al tono de color en forma de ángulo. Por tanto, los parámetros que pueden tener los valores de la función lch (l c h [/alfa]) son:

  • l: luminosidad negro-blanco dado en valores de 0% a 100% o un número entre 0 y 100.
  • c: saturación con un valor entre 0% a 100% o un número entre 0 y 150.
  • h: tono de color con un valor entre 0deg y 360deg o un número sin unidades
.elemento {
    background-color: lch(80 120 100 / 75%);
    background-color: lch(50% 132 180 / 0.75);
}

Función oklch()

La función oklch es como la función lch() pero con una pequeña mejora, como pasaba con la función lab y oklab. Los parámetros que recibe la función lch (l c h [/alfa]) son:

  • l: es la luminosidad negro-blanco, un valor entre 0% y 100% o un número entre 0 y 100.
  • c: corresponde a la saturación, un valor entre 0% y 100% o un número entre 0 y 0.4
  • h: corresponde al tono de color, un ángulo entre 0deg y 360deg o un número sin unidades.
.elemento {
    background-color: oklch(0.5 0.3 50);
    background-color: oklch(0.5 0.3 50 / 75%);
}

Función color()

El espacio de color tradicionalmente usado es el sRGB creado por Microsoft y HP. Un espacio de color no es más que un conjunto de colores a mostrar en un medio, por ejemplo SRGB es un conjunto de colores con diferentes valores RGB. Un modelo de color es una forma de describir un color, por ejemplo RGB es usando el Rojo Verde y Azul.

Los diferentes espacios de colores definidos y soportados en web son:

  • sRGB: Espacio de color estándar creado por Microsoft y HP
  • srgb-linear: Espacio idéntico a sRGB pero con diferente función de transferencia de luz
  • display-p3: Variación de Apple para pantallas, TV o portátiles modernos
  • a98-rgb: Espacio de color creado por Adobe
  • prophoto-rgb: Espacio de color creado por Kodak

La función color() requiere que le indiquemos el espacio de colores y luego separado por espacio los valores de cada uno de los componentes. De forma opcional se puede indicar el canal alpha precedido de /.

.elemento {
    background-color: color(srgb 50% 25% 75%);
    background-color: color(display-p3 50% 25% 75%);
    background-color: color(srgb-linear 50% 25% 75%);
    background-color: color(a98-rgb 50% 25% 75% /0.5);
}

Función color-mix()

El método color-mix() nos permite mezclar dos colores en un espacio de colores determinado (srgb, srgb-linear, lab o oklab, xyz, xyz-d50, xyz-d65, hsl, hwb o lch o oklch). Además podemos indicar la cantidad de cada color, en el caso de no hacerlo estamos diciendo que sea 50% del primer color y 50% del segundo.

.elemento {
    background: color-mix(in xyz-d50, red 25%, blue 75%);
    background: color-mix(in lch, plum, pink);
    background: color-mix(in lch, plum 40%, pink);
    background: color-mix(in srgb, #34c9eb 20%, white);
    background: color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);
    background: color-mix(in oklch longer hue, red 40%, blue 60%);
    background-color: color-mix(in srgb, #34c9eb, white);
    background-color: color-mix(in srgb, #34c9eb 75%, white);
}

Si usamos espacios de colores polares (hsl, hwb o lch o oklch), entonces podemos indicar el método de interpolación. Usando las palabras longer, increasing/longer o decreasing/shorter siempre seguidas de hue nos permitirá definir los valores de la rueda de color interpolados.

<< Funciones matemáticas Opacity >>