CSS se introdujo en la web en 1996. En ese momento, la mayoría de los monitores de computadora eran bastante terribles. Los colores de CSS, ya sea que se definan con el formato RGB, HSL o hexadecimal, se adaptaron 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 gama amplia. A gama es la gama de colores que se pueden mostrar. A amplia gama la pantalla es capaz de mostrar más colores que sRGB. Usan el espacio de color Display P3. (También está Rec.2020, un espacio de color aún más grande, pero eso es bastante raro y actualmente no vale la pena pensar en ello). Como dijo Lea Verou del grupo de trabajo de CSS: “Nuestros sitios web se desvanecen porque las pantallas avanzan más rápido que CSS Color. ” Si queremos aprovechar al máximo la gama de colores que la mayoría de las pantallas son capaces de mostrar, necesitamos utilizar nuevos formatos de colores CSS: lab, lch o display-p3.
Se pueden encontrar ejemplos en la naturaleza en el sitio web de Pánico (creadores del otrora popular editor de texto Coda y del aún muy popular Untitled Goose Game) o el sitio de marketing de un producto llamado Playdate. Ambos hacen uso de colores sorprendentemente vibrantes e intensos que son excepcionalmente vivos al hacer uso de display-p3.
El sitio web de Panic presenta un tono llamativo de rosa.
Para tener una idea de la gama de colores que faltan en sRGB, consulte el siguiente Pen. Las cajas internas contienen un color más allá de la gama sRGB. Los cuadros exteriores muestran ese color sujeto 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, lab, o 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.
Cualquier color por encima o a la derecha de la línea blanca se encuentra fuera de la gama sRGB
Una historia de nuevas sintaxis
Antes de saltar a la sintaxis de lab(), lch(), y el color() función, echemos un vistazo a la nueva rgb() y hsl() sintaxis (que son compatibles con todos los navegadores web, menos Internet Explorer).
| Escribe | Sintaxis antigua | Nueva sintaxis |
|---|---|---|
| RGB | rgb(0, 128, 255) |
rgb(0 128 255) |
| RGBa | rgba(0, 128, 255, 0.5) |
rgb(0 128 255 50%) |
| LGV | hsl(198, 28%, 50%) |
hsl(198 28% 50%) |
| HSLa | hsla(198, 28%, 0.5) |
hsl(198deg 28% 50% / 50%) |
Fuente: @mathias
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(). No hay un beneficio real para las sintaxis más nuevas, pero vale la pena mirarlas porque coinciden con la sintaxis para lch(), lab() y color().
| Escribe | Sintaxis |
|---|---|
| Laboratorio | lab(56.29% -10.93 16.58 / 50%) |
| color() | color(sRGB 0 0.5 1 / 50%) |
| LCH | lch(56.29% 19.86 236.62 / 50% |
lab(), lch() y color() utilice siempre números separados por espacios (no se permiten comas) y una barra inclinada seguida de un porcentaje para especificar la transparencia. Echemos un vistazo a cómo funcionan.
La función CSS color() y display-p3 espacio de color
El color() La 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 necesitamos especificar para usar el color de gama amplia es display-p3, que utiliza tres valores numéricos, que representan los canales rojo, verde y azul del color: 1 0 0 es rojo total, 0 0 1 es azul total, y 0 1 0 es totalmente verde.
background-color: color(display-p3 1 0 0.331); /* vibrant pink color */En el momento de escribir, display-p3 es la única forma de acceder a colores de gama alta, ya que es compatible con Safari desde 2017. Sin embargo, lab() y lch() habrá mejores opciones una vez que se implementen (Chrome y Safari están trabajando actualmente en ello). Aquí hay una toma de Lea Verou:
display-p3 no es perceptualmente uniforme y es difícil crear variantes (más claras o más oscuras, más o menos vívidas, etc.) ajustando sus parámetros. Además, es una solución a corto plazo. Funciona ahora, porque las pantallas que pueden mostrar una gama más amplia que P3 son raras. Una vez que el hardware avanza de nuevo, color(display-p3 ...) tendrá el mismo problema que los colores sRGB tienen hoy. LCH y Lab son dispositivos independientes 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 HSL es más fácil de razonar que los valores RGB o hexadecimales.
Aquí está Chris Coyier en 2015:
El verdadero atractivo de HSLa es que tiene un sentido más intuitivo de lo que le hará al color cambiar los valores. 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 ligereza 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 dice Brian Kardell:
Hacer cosas como mezclar colores, aclarar, oscurecer, se puede hacer bien solo si incluyen 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 visualización.
Aquí hay un ejemplo visual de Lea Verou que demuestra la superioridad de Lab/LCH sobre HSL. ella comenta:
Un truco para lograr degradados estéticamente agradables del mismo color con diferentes luminosidades es convertir a Lab, variar L en su lugar y luego volver a convertir a HSL/RGB.
“El brillo percibido de todos los tonos en un espectro con la misma saturación y luminosidad. […] Está bastante claro que son diferentes. —Brian Kardell (Imagen: Rob Waychert)
Tanto Lab como LCH utilizan el espacio de color CIELAB, que está diseñado para alinearse con la visión humana. Si le da a dos colores el mismo valor de luminosidad, al ojo humano le parece que tienen la misma luminosidad, independientemente de su tono.
Laboratorio
background-color: lab(40% 83 -104); /* a shade of purple */La L en lab() significa luminosidad y se escribe como un porcentaje (que puede llegar hasta el 400 % para el blanco extra brillante, pero generalmente estará entre el 0 % y el 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 de entender para nosotros. Sin embargo, el valor rojo/verde y el valor azul/amarillo no son exactamente intuitivos. 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 significa luminosidad (y funciona exactamente de la misma manera), C es croma y H es tono. Chroma es en gran medida análogo a la saturación, pero también se puede considerar como la intensidad o vitalidad del color. A diferencia de los otros formatos de color nuevos, en realidad puede predecir el tipo de efecto que tendrá el cambio de estos valores individuales; es similar a HSL de esta manera. La mejor manera de entenderlo es probar este selector de color LCH.
Definición de respaldos
Tenemos que pensar en dos tipos de compatibilidad: la compatibilidad del navegador con los nuevos valores de color CSS y la capacidad de las pantallas para mostrar estos colores.
Recurrir al valor sRGB coincidente más cercano para navegadores que no admiten funciones de color es fácil y exactamente como estamos acostumbrados a definir propiedades de reserva:
.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 del ejemplo anterior se ignorará si el navegador no la comprende y el rgb() En su lugar, se usará el valor, gracias a la cascada. Sería laborioso escribir dos líneas de CSS cada vez que desee 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 gama alta 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);
}Hay 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 para el color
@supports nos 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 calcule uno por usted, puede pasar un segundo valor de color a la función color(). Sin embargo, esto requeriría la 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 un mayor control para hacer algo elegante, la especificación Media Queries Level 4 trae una nueva color-gamut consulta de medios que nos puede ayudar 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. Actualmente, la cantidad de pantallas compatibles con rec-2020 es 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 verificar 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 en el 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 usa 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 ser utilizada para video:
[S]Una pantalla puede mostrar luces ultrabrillantes durante breves períodos de tiempo, 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: soporte de herramientas de diseño
Desafortunadamente, 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!