Vista previa de 4 nuevas funciones de color CSS trucos CSS

Acabo de escribir en mi artículo "¿Qué hay de nuevo después de CSS3?" sobre los cambios de color CSS recientes y futuros. Curiosamente. Hay tantas o más formas nuevas y próximas de definir los colores que las que tenemos ahora. Pensé que echaríamos un vistazo muy pronto.

Primero, una advertencia importante. Estas cosas son tan complicadas. Apenas lo entiendo. Pero aquí hay algunos aspectos:

• Antes de todo este cambio inminente, solo había RGB como modelo de color y todo se trataba de eso.
• Teníamos diferentes "espacios de color" que lo trataban de manera diferente (p. rgb() la función mapea este modelo de color RGB como un cubo con coordenadas lineales, hsl() la función asignó este modelo de color RGB como un cilindro), pero todo era gamma sRGB.
• Con los próximos cambios tenemos nuevos modelos de color. y (!) Obtenemos nuevas características que asignan este patrón de color de manera diferente. Así que creo que es una especie de golpe doble-triple.

No puedo enseñarles personalmente todos los detalles sutiles. Estoy escribiendo esto porque apuesto a que hay muchos de ustedes como yo. Me pregunto por qué deberías estar interesado en esto y este es mi intento de entender por qué. I usted tiene que cuidar de todo esto.

Display-P3 es el que abre colores mucho más brillantes que podrían haberse expresado antes.

body {
  background: color(display-p3 1 0.08 0); /* super red! */
}

Resulta que los monitores modernos pueden mostrar muchos más colores, especialmente los muy brillantes, pero no tenemos forma de definir estos colores con la sintaxis de color CSS clásica, como HEX, RGB y HSL. ¡Súper raro, ¿no?! pero si usas Pantalla-P3obtienes una gama más amplia de acceso a estos colores vibrantes.

El desarrollador Panic quedó atrapado en esto temprano y comenzó a usar estos colores como un "arma secreta":

🌈 Junto con WebGL, los colores de p3 ahora son una gran parte de la pila de armas secretas en el sitio web de Panic. ¡Shh, no se lo digas a nadie, pero deberías ver esta página en la pantalla del iMac Pro! https://t.co/glrhPNuCdR

- Pánico (@pánico) 24 de mayo de 2019

Jen Simmons también describe cómo usarlos, incluida una copia de seguridad para navegadores no compatibles:

Color de pantalla P3. Diseño de navegador. Increíble.

Déjame mostrarte cómo cambiar a P3, encontrar un color y luego encontrar un color de respaldo para navegadores más antiguos. Todo mientras se trabaja en Safari Web Inspector. (¡Enciende el sonido para que puedas escucharme explicar!) pic.twitter.com/AaKhrn2s3e

-Jen Simmons (@jensimmons) 5 de enero de 2022

Recursos

HWB es el que es más "para la gente", excepto que es un poco controvertido y aún se basa en sRGB.

No tengo ni idea hwb() era algo - gritarle a Stephen Judis por blogs sobre eso.

Por lo general, pienso en HSL como un formato de color CSS que es "para personas" (y bueno para el control de programas), porque manipular 360 ° de tono y 0-100% de saturación y luz tiene un sentido obvio.

Pero en hwb()tenemos Matiz (igual que HSL, creo), entonces Blancura y NegruraStefan:

Agregar blanco y negro a un color afecta su saturación. Supongamos que agrega la misma cantidad de blanco y negro a un color, el tono del color sigue siendo el mismo, pero el color pierde saturación. Esto funciona hasta un 50 % de blanco y un 50 % de negro (hwb(0deg 50% 50%)), lo que conduce a un color acromático.

Stefan expresó algunas dudas de que esto sea más fácil de entender que HSL y tiendo a estar de acuerdo. Probablemente solo necesito acostumbrarme más, pero parece ser más abstractamente que simplemente cambiar la luminosidad o la saturación.

HWB está limitado a la misma gama de colores (sRGB) que todos los formatos de color anteriores. Aquí no se desbloquean nuevos colores.

Recursos

LABORATORIO es como rgb() con una gama mucho más amplia

div {
  background: lab(150% -400 400);
}

Me gustó la explicación de Eric Portis sobre LAB cuando caminé y pregunté por él:

LAB es como RGB porque tiene tres componentes lineales. Los números más bajos significan menos que cosas, los números más altos significan más que cosas. Por lo tanto, puede usar LAB para indicar el verde más brillante y más verde que nunca, y será súper brillante y verde para todos, pero más brillante y más verde en monitores con rangos más amplios.

Entonces, tenemos todo el color extra, lo cual es genial, pero sRGB tenía eso. otros problema (excepto que está limitado en la expresión del color) que no es percepción igual. Brian Cardell:

El espacio sRGB no es perceptiblemente homogéneo. Hay el mismo movimiento matemático. diferentes grados de efecto percibido dependiendo de dónde se encuentre en el espacio de color. Si quieres leer la experiencia de un diseñador con esto, aquí un ejemplo interesante que hace un buen trabajo luchando por hacerlo bien.

El ejemplo clásico aquí es cómo en HSL los colores con exactamente la misma "Ligereza" realmente no se sienten iguales en absoluto.

HSL vs. LAB :: facilidad 💡

Los mismos colores de nuestra sofisticada encuesta de colores, pero esta vez mostré la versión LAB del mismo color arriba. ¡Observe cuán cerca está el valor de la luz LAB de los resultados de nuestra encuesta!

🎨 ¡Los espacios de color no son lo mismo! https://t.co/AIE0amdWY pic.twitter.com/xkEguq3KZG

-Adam Argyleink (@argyleink) 3 de diciembre de 2019

Pero en LAB, obviamente, esto es perceptivamente lo mismo, lo que significa que la manipulación programática del color es una tarea mucho más sensata.Y otra ventaja es que los colores en LAB se definen como independientes del dispositivo. Aquí está Michelle Barker:

LAB y LCH se definen en especificación tal como colores independientes del dispositivoLAB es un espacio de color al que se puede acceder en software como Photoshop y se recomienda si desea que el color se vea igual en la pantalla que, por ejemplo, impreso en una camiseta.

Recursos

LCH es como hsl() con una gama mucho más amplia

¿Recuerdas que dije que HSL es "para personas" porque es más fácil de entender que RGB? Cambiar el tono, la saturación y el brillo tiene mucho sentido. Similar aquí con lch() donde tenemos Ligereza, cromaticidady MatizVolviendo a mi conversación con Eric Portis:

LCH es más bien HSL: espacio polar. H = matiz = círculo. Entonces, hacer los cálculos para elegir colores adicionales (o cualquier transformación que desee) se vuelve trivial (solo agregue 180, ¡o lo que sea!)

Supongo que elegiría LCH solo porque le gusta su sintaxis o porque facilita algo de programación compleja que está tratando de hacer, y obtiene el hecho de que puede expresar un 50% más de colores de forma gratuita.

Aquí obtenemos la uniformidad de la percepción. Aquí está Lea Vera que parece emocionado de que la ligereza realmente signifique algo:

En HSL, la luminosidad no tiene sentido, los colores pueden tener el mismo valor de luminosidad, con una facilidad de percepción muy diferente. […] En LCH, todos los colores con la misma facilidad son igualmente brillantes para percibir, y todos los colores con la misma saturación están igualmente saturados cuando se perciben.

Otra ventaja del nuevo modelo es que podemos borrar nuestras manos de la "zona muerta gris" en los degradados de color CSS.Creo que debido a esta uniformidad de percepción, dos colores saturados no se volverán descarados y se derramarán sobre el territorio pobre.

He aquí una pequeña predicción personal: diría esto lch() probablemente será un favorito de los diseñadores. Pronto habrá muchas nuevas opciones de color y es demasiado difícil y extraño elegir siempre diferentes. LCH parece tener el mayor éxito en el dinero mental.

Recursos

"BIEN"

Parece LAB 'n' amigos tan nuevo porque es nuevo... para CSS. pero laboratorio fue inventado en la década de 1940En una conversación con Adam Argyle, usó una frase memorable: Todos los espacios de color tienen un talón de Aquiles. Es decir, algo que de alguna manera apesta. Para sRGB, este es el tema de la zona muerta gris, así como la gama de colores limitada. LAB es genial y todo lo demás, pero ciertamente tiene sus debilidades. Por ejemplo, el degradado de azul a blanco en el LAB se mueve bastante torpemente a través de la ciudad morada.

En diciembre de 2020, Bjorn Ottoson estaba como "Oye, el nuevo espacio de color acaba de salir", y ahora existe OKLAB. Obviamente, los poderes de CSS ven suficiente valor en este espacio de color, tanto oklab() y oklch() ya estan especificadosSupongo que debería importarnos porque son justos. generalmente mejorpero no me cites al respecto.

Por qué se utiliza la pantalla P3 color() funcionan, pero los otros no?

Realmente no sé. Creo que CSS color() la función es un poco más nueva y así es exactamente como Safari la sumerge allí para comenzar. No tengo idea si Display P3 tendrá su propia función especial o si todos debemos comenzar a usar CSS color()o que.

/* This is how you use Display P3 */
color(display-p3 1 0.08 0); 

/* But this doesn't work */
color(oklch 42.1% 0.192 328.6);

/* You gotta do this instead 🤷‍♀️ */
oklch(42.1% 0.192 328.6);

/* But you can use the color space within a gradient... */
background-image: linear-gradient(
    to right 
    in oklch,
    lch(50% 100 100), 
    lch(50% 100 250)
  );

La sintaxis de color relativa es muy útil.

Hay una característica realmente genial llamada "sintaxis de color relativa" en la que básicamente puedes deconstruir un color CSS mientras lo mueves a otro formato. Digamos que tienes (obviamente) el color CSS HEX más famoso de todos los tiempos, niebla, y quieres patearlo en HSL en su lugar:

body {
  background: hsl(from #f06d06 h s l);
}

Tal vez no sea tan útil de inmediato, pero bueno, ahora podemos agregar alfa a eso! Literalmente, no hay otra forma de aplicar alfa a un color HEX existente, por lo que es bastante grande:

body {
  background: hsl(from #f06d06 h s l / 0.5);
}

Pero también puedo involucrarme con él. Digamos que quiero saturar un poco de niebla antes de agregar opacidad, porque una opacidad más baja lo amortiguará naturalmente, y quiero luchar contra eso. Puedo usar calc() en las variables predeterminadas allí:

body {
  background: hsl(from #f06d06 h calc(s + 20%) l / 0.5);
}

Esta muy padre. seguro que veremos alguno increíble las cosas vienen de eso. Y ciertamente no se limita a HSL. Acabo de usar HSL porque es con lo que me siento cómodo en este momento. Puedo empezar con el color especificado red y participar en LCH si quiero:

body {
  background: lch(from red l calc(c + 15) h / 0.25);
}

Estas cosas serán más útiles cuando se combinen generosamente con propiedades personalizadas.

Ya no hay características especiales solo para alfa.

Para que quede claro: no hay comas antes del valor alfa en la función de color CSS; en su lugar, solo una barra oblicua:

/* Old! */
rgb(255, 0, 0);
rgba(255, 0, 0, 0.5);

/* New! */
rgb(255 0 0);
rgb(255 0 0 / 0.5);
hsl(0deg 40% 40%)
hsl(0deg 40% 40% / 90%) /* can be percentage rather than 0.9 or whatever */

/* The New color stuff ONLY has the single base function, no alpha secondardy function */
lab(49% 39 80)
lab(49% 39 80 / 0.25)

/* Display P3, with the color function, essentially works the same way with the slash */
color(display-p3 1 0.08 0 / 0.25); 

Incluso puede definir su propio espacio de color CSS.

Pero literalmente no puedo ni pensar en ello. Llévame, lo siento.