La creciente gama de colores en la Web

CSS se introdujo en la web allá por 1996. En ese momento, la mayoría de los monitores de computadora eran bastante terribles. Los colores de CSS, ya sea definidos con formato RGB, HSL o hexadecimal, se adaptaban a los monitores de la época, todo dentro del espacio de color sRGB.

La mayoría de los dispositivos más nuevos tienen una pantalla de amplia gama. Una gama es la gama de colores que se pueden mostrar. Una pantalla de amplia gama es capaz de mostrar más colores que sRGB. Utilizan el espacio de color Display P3. (También está Rec.2020, un espacio de color aún más grande, pero es bastante raro y actualmente no vale la pena pensar en ello). Como lo expresó Lea Verou del grupo de trabajo de CSS: “Nuestros sitios web están descoloridos porque las pantallas avanzaron más rápido que CSS Color. " Si queremos aprovechar al máximo la gama de colores que la mayoría de pantallas son capaces de mostrar, necesitamos utilizar nuevos formatos de colores CSS: lab, lcho display-p3.

Se pueden encontrar ejemplos en la naturaleza en el sitio web de Panic (creadores del alguna vez popular editor de texto Coda y del todavía muy popular Untitled Goose Game) o el sitio de marketing de un producto llamado Playdate. Ambos utilizan colores sorprendentemente vibrantes e intensos que adquieren una viveza única al utilizarlos display-p3.

Para tener una idea de la gama de colores que faltan en sRGB, consulte el siguiente lápiz. Los cuadros interiores contienen un color más allá de la gama sRGB. Los cuadros exteriores muestran ese color fijado a la gama de colores sRGB (es decir, el color equivalente más cercano que un navegador es capaz de mostrar sin usar display-p3, labo lch). (Tenga en cuenta que el soporte actualmente está limitado a los usuarios de Safari).

El selector de color en Safari Technology Preview muestra de manera útil qué colores se encuentran fuera de la gama de colores sRGB.

Una historia de nuevas sintaxis

Antes de pasar a la sintaxis de lab(), lch()y la color()función, echemos un vistazo a las sintaxis new rgb()y hsl()(que son compatibles con todos los navegadores web, menos Internet Explorer).

En la sintaxis anterior, cada número está separado por comas: rgb(200, 100, 20);. Las comas ya no son necesarias, por lo que el valor separado por espacios rgb(200 100 20);es válido. Para especificar la transparencia, ahora podemos usar rgb(200 100 20 / 50%)en lugar de usar rgba()o hsla(). Las sintaxis más nuevas no aportan ningún beneficio real, pero vale la pena examinarlas porque coinciden con la sintaxis de lch(), lab()y color().

lab()y utilice lch()siempre color()números separados por espacios (no se permiten comas) y una barra diagonal seguida de un porcentaje para especificar la transparencia. Echemos un vistazo a cómo funcionan.

La función CSS color() y el espacio de color display-p3

La color()función permite especificar un color en un espacio de color particular (en lugar de utilizar el espacio de color sRGB utilizado por rgb(), hsl()o hexadecimal). El espacio de color que debemos especificar para utilizar una amplia gama de colores es display-p3, que utiliza tres valores numéricos, que representan los canales rojo, verde y azul de: color: 1 0 0rojo total, 0 0 1azul total y 0 1 0verde total.

background-color: color(display-p3 1 0 0.331); /* vibrant pink color */

Al momento de escribir este artículo, display-p3es la única forma de acceder a colores de alta gama, ya que es compatible con Safari desde 2017. Sin embargo, lab()habrá lch()mejores opciones una vez que se implementen (Chrome y Safari están trabajando en ello actualmente). Aquí hay una toma de Lea Verou:

display-p3no es perceptualmente uniforme y es difícil crear variantes (más claro o más oscuro, más o menos vívido, etc.) ajustando sus parámetros. Además, es una solución a corto plazo. Ahora funciona porque las pantallas que pueden mostrar una gama más amplia que la P3 son raras. Una vez que el hardware vuelva a avanzar, color(display-p3 ...)tendremos el mismo problema que tienen los colores sRGB hoy en día. LCH y Lab son independientes del dispositivo y pueden representar toda la gama de la visión humana, por lo que funcionarán independientemente de cómo avance el hardware.

Una mayor ligereza: Lab y LCH

Es posible que haya visto artículos en la web que argumentan que es más fácil razonar sobre HSL que sobre los valores RGB o hexadecimales.

Aquí está Chris Coyier en 2015:

El verdadero atractivo de HSLa es que tiene un sentido más intuitivo lo que cambiará los valores en el color. Aumentar el segundo valor aumentará la saturación de ese color. Disminuir el tercer valor disminuirá la luminosidad de ese color. Eso hace que crear tus propias variaciones de color sobre la marcha sea mucho más fácil.

Si bien HSL puede ser más fácil de entender que hexadecimal o RGB, está lejos de ser perfecto. La forma en que calcula la luminosidad simplemente no coincide con la percepción humana. Según HSL, hsl(240deg 100% 50%)y hsl(60deg 100% 50%)tienen la misma ligereza, 50%. Comparemos los dos.

Para el ojo humano, el azul parece más oscuro. Como lo expresa Brian Kardell:

Hacer cosas como mezclar colores, aclarar y oscurecer se puede hacer bien sólo si incluye una idea de cómo funcionan realmente nuestros ojos, en lugar de cómo les gusta pensar a las máquinas sobre el almacenamiento y la exhibición.

Aquí hay un ejemplo visual de Lea Verou que demuestra la superioridad de Lab/LCH sobre HSL. Ella comenta:

Un truco para obtener degradados estéticamente agradables del mismo color con diferentes luminosidades es convertir a Lab, variar la L y luego volver a convertir a HSL/RGB.

Tanto Lab como LCH utilizan el espacio de color CIELAB, que está diseñado para alinearse con la visión humana. Si se le da a dos colores el mismo valor de luminosidad, al ojo humano le parecerá que tienen la misma luminosidad, independientemente de su tono.

Laboratorio

background-color: lab(40% 83 -104); /* a shade of purple */

La L in lab()significa luminosidad y se escribe como porcentaje (que puede llegar hasta el 400% para un blanco extra brillante, pero generalmente estará entre 0% y 100%). A y B no representan nada: son canales de color. A es un valor numérico entre verde (valores negativos) y rojo (valores positivos), mientras que B es un valor numérico entre azul (valores negativos) y amarillo (valores positivos). La ligereza es bastante fácil para nosotros de entender. Sin embargo, el valor rojo/verde y el valor azul/amarillo no son exactamente intuitivos. La LCH es probablemente una mejor alternativa.

LCH

background-color: lch(69% 56 244); /* a shade of blue */

lch()es el más legible por humanos de los nuevos valores de color. L nuevamente representa la luminosidad (y funciona exactamente de la misma manera), C es el croma y H es el tono. El croma es en gran medida análogo a la saturación, pero también puede considerarse como la intensidad o vitalidad del color. A diferencia de otros formatos de color nuevos, en realidad puede predecir el tipo de efecto que tendrá el cambio de estos valores individuales; en este sentido es similar a HSL. La mejor manera de entenderlo es probar este selector de color LCH.

Definición de alternativas

Tenemos dos tipos de soporte en los que pensar: soporte del navegador para los nuevos valores de color CSS y la capacidad de las pantallas para mostrar estos colores.

Recurrir al valor sRGB más cercano para navegadores que no admiten funciones de color es fácil y exactamente como estamos acostumbrados a definir propiedades alternativas:

.pink-text {  color: rgb(255, 0, 79); /* Will be used as a fallback */  color: color(display-p3 1 0 0.331); /* Will be used if supported */}

La segunda línea de código en el ejemplo anterior se ignorará si el navegador no la entiende y rgb()en su lugar se utilizará el valor, gracias a la cascada. Sería laborioso escribir dos líneas de CSS cada vez que quieras especificar un color. Las variables CSS son una excelente manera de lidiar con esto. En este ejemplo usaremos @supports para saber si el navegador admite funciones de color en CSS:

/* https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ */:root {  --bright-green: rgb(0, 255, 0);}
/* Display-P3 color, when supported. */@supports (color: color(display-p3 1 1 1)) {  :root {    --bright-green: color(display-p3 0 1 0);  }}
header {  color: var(--bright-green);}

Si el color es particularmente importante para su diseño, puede utilizar una imagen de fondo, ya que la mayoría de los navegadores admiten colores de alta gama en las imágenes.

@supports not (color: color(display-p3 1 0 0.331)) {  @supports (-webkit-background-clip: text){    .pink-text {      background-image: url("pink-P3.png");      background-size: cover;      -webkit-background-clip: text;      -webkit-text-fill-color: transparent;    }  }}
.pink-text {  color: rgb(255, 0, 79);  color: color(display-p3 1 0 0.331);}

Existe un complemento PostCSS que convierte las funciones lab() y lch() a rgb(). Si te gusta Sass, hay una herramienta de Miriam Suzanne llamada Blend.

Una consulta de medios sobre el color

@supportsnos dice si el navegador admite la sintaxis CSS relevante. Lo que no nos dice es si el monitor de un usuario realmente puede mostrar ciertos valores de color. Si un monitor no admite colores de gama alta, la pantalla mostrará el color sRGB equivalente más cercano. Esto significa que se atienden todos los monitores sin escribir ningún código adicional.

Sin embargo, si prefiere elegir el color alternativo manualmente en lugar de dejar que el navegador lo calcule por usted, puede pasar un segundo valor de color a la función color(). Sin embargo, esto requeriría compatibilidad del navegador con la función de color (pero la compatibilidad con el segundo argumento aún no ha llegado a ningún navegador).

background-color: color(display-p3 1 0 0.331, #f54281);

Si necesita mayor control para hacer algo sofisticado, la especificación Media Queries Nivel 4 trae una nueva color-gamutconsulta de medios que puede ayudarnos aquí.

@media (color-gamut: p3) {   /* Code to run only on hardware that supports P3 color */}

En este ejemplo, obviamente estamos comprobando la compatibilidad con P3, pero también podríamos comprobar el espacio de color rec-2020 al que aludimos anteriormente, que tiene una gama aún más amplia que P3. La cantidad de pantallas que admiten rec-2020 es actualmente mínima y solo incluye televisores de alta definición, lo que significa que no serán un objetivo común para los desarrolladores en el futuro cercano. También puede comprobar la compatibilidad con sRGB, pero eso es casi todos los monitores hoy en día. La consulta de gama de colores, por otro lado, tiene un soporte de navegador razonablemente bueno al momento de escribir este artículo.

Nota al margen: consulta de medios de rango dinámico

En las notas de la versión de Safari 13.1, la consulta de medios de rango dinámico se utiliza para aplicar condicionalmente un color P3. Aparentemente, ese no es un buen caso de uso. Según Florian Rivoal (editor de la especificación Media Queries), esta consulta está diseñada para usarse en video:

[Algunas] pantallas pueden mostrar luces ultrabrillantes durante períodos breves, que se usan en videos para cosas como chispas, luz solar directa, etc. Esto es mucho más brillante que el blanco y no está diseñado para usarse con imágenes estáticas. . Sería incómodo y además dañaría la pantalla.

Una nota al margen más: compatibilidad con herramientas de diseño

Lamentablemente, las herramientas de diseño web populares como Figma, Sketch y XD actualmente no son compatibles con los espacios de color Lab, LCH o P3. Photoshop, sin embargo, tiene un selector de color Lab.

¡Ahí lo tenemos! Los colores CSS se están expandiendo en un momento en que las pantallas admiten más colores que nunca. ¡Es un momento emocionante para los nerds del color!