Colores
En el siguiente punto, vamos a ver algunas de las nuevas funciones que dispone CSS para asignar color a un elemento.
La principal diferencia entre estas funciones radica en el modelo de color que utilizan, algunas son más intuitivas para los humanos (como hsl) y otras son más precisas para la percepción humana (como lab y lch).
Por ejemplo, la función hsl que ya vimos, nos permite definir un colo basado en sus tres componentes hue (tono, es decir, color representado como un círulo cromático), saturation (saturación, intensidad del color) y lightness (luminosidad).
Esta opción es la más intuitiva y legible para nosotros, por tanto nos viene bien para crear paletas de colores, estados de UI (un hover) o temas dinámicos donde sólo cambias el hue
Función hwb()
- h (hue, tono): ángulo o matiz de color, el valor será entre 0deg y 360deg. Mismo concepto que hsl
- w (whiteness, blancura): que es el porcentaje debalnco que se mezcla con el color base, de 0% a 100%
- b (blackness, negrura): que es el porcentaje de la negro que se mezcla con el color base, 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.
¿Cuándo usamos esta función? La mejor forma es cuando queremos procesar colores, es decir craer gradientes suaves o cuando queremos crear una consistencia perceptiva, es decir que diferentes colores de una paleta "parezcan" tener el mismo brillo
.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 (chroma): cromaticidad o intensidad de color, es similar a la 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
¿Cuándo usarlo? Es el modelo de color moderno preferido para casi todo. Es intuitivo como hsl (puedes elegir un tono y ajustar fácilmente su intensidad), es perceptualmente uniforme como lab (por tanto ideal para gradientes y paletas consistentes) y se puede acceder a colores de alta definición, es decir, se pueden crear colores mucho más "vibrantes" en pantallas compatibles.
.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.
Consejos de uso
- A dia de hoy la función lch() es la más utilizada a la hora de seleccionar un color debido a que es la que ofrece una mayor calidad y consistencia.
- La función hsl() nos facilita la legibilidad ya que es la que tiene un mayor soporte en los navegadores, aunque a día de hoy lch() y lab() están más que soportadas.
- La función color-mix(), es la más útil cuando queremos mezclar dos colores.