Estaba escribiendo en mi "¿Qué hay de nuevo desde CSS3?" artículo sobre cambios recientes y posibles cambios futuros en los colores CSS. Es extrañamente mucho. 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 rápido.
Primero, un importante aviso. Este material es tan complicado. Apenas lo entiendo. Pero aquí hay algunos aspectos:
- Antes de todo este cambio que se avecina, , solamente tenía RGB como modelo de color, y todo se trataba de eso.
- Teníamos diferentes "espacios de color" que lo manejaban de manera diferente (por ejemplo, el
rgb()función asignó ese modelo de color RGB como un cubo con coordenadas lineales, elhsl()función asignó ese modelo de color RGB como un cilindro) pero era toda la gama sRGB. - Con los próximos cambios, obtendremos nuevos modelos de color. y (!) Estamos obteniendo nuevas funciones que asignan ese modelo de color de manera diferente. Así que creo que es una especie de golpe doble-triple.
No puedo educarlos personalmente sobre todos los detalles esenciales. Estoy escribiendo esto porque apuesto a que muchos de ustedes son como yo. preguntándome por qué deberías preocuparte por esto, y este es mi intento de entender por qué I debería preocuparse por todo.
Display-P3 es uno que abre una tonelada de color más vibrante que se podía expresar antes.
body { background: color(display-p3 1 0.08 0); /* super red! */
}Resulta que los monitores modernos pueden mostrar muchos más colores, particularmente los más vibrantes, pero no tenemos forma de definir esos colores con las sintaxis de color clásicas de CSS, como HEX, RGB y HSL. Súper raro, ¿verdad? pero si usas Pantalla-P3, obtendrá una gama más amplia de acceso a estos colores vibrantes.
La tienda de desarrollo Panic se aferró a esto desde el principio y comenzó a usar estos colores como un "arma secreta":
🌈 Junto con WebGL, los colores p3 ahora son una gran parte de la pila de armas secretas del sitio web de Panic. ¡Shh, no se lo digas a nadie, pero deberías ver esta página en la pantalla de un iMac Pro! https://t.co/glrhPNuCdR
— Pánico (@pánico) 24 de mayo de 2019
Jen Simmons también cubre cómo usarlos, incluida una alternativa para navegadores no compatibles:
Mostrar color P3. Diseño en el navegador. Increíble.
Déjame mostrarte cómo cambiar a P3, encontrar un color y luego encontrar un color alternativo para navegadores más antiguos. Todo mientras trabaja dentro de Safari Web Inspector. (¡Activa el sonido para escucharme explicar!) pic.twitter.com/AaKhrn2s3e
- Jen Simmons (@jensimmons) Enero 5, 2022
Recursos
HWB es el que es más "para humanos", excepto que es un poco discutible y todavía se basa en sRGB.
No tenía ni idea hwb() fue una cosa - gracias a Stefan Judis por blogueando sobre eso.
Normalmente pienso en HSL como el formato de color CSS que es "para humanos" (y buena para control programático) porque, bueno, manipular 360° de Tono y 0-100% tanto de Saturación como de Luminosidad tiene algún tipo de sentido obvio.
Pero en hwb(), tenemos Color (lo mismo que HSL, creo), entonces blancura y Negrura. Esteban:
Agregar blanco y negro a un color afecta su saturación. Suponga que agrega la misma cantidad de blanco y negro a un color, el tono del color permanece igual, pero el color pierde saturación. Esto funciona hasta un 50 % de blanco y un 50 % de negro (
hwb(0deg 50% 50%)), lo que da como resultado 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 resumen 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 antiguos. Aquí no se desbloquean nuevos colores.
Recursos
LABORATORIO es como rgb() de una gama mucho más amplia
div { background: lab(150% -400 400);
}Me gustó la explicación de Eric Portis sobre LAB cuando pregunté al respecto:
LAB es como RGB en que hay tres componentes lineales. Los números más bajos significan menos de la cosa, los números más grandes significan más de la cosa. Por lo tanto, podría usar LAB para especificar el verde más brillante y verde que haya tenido un verde brillante, y será súper brillante y verde para todos, pero más brillante y más verde en monitores con gamas más amplias.
Entonces, obtenemos todo el color extra, lo cual es increíble, pero sRGB tenía esto otros problema (aparte de estar limitado en la expresión del color), que no es perceptivamente uniforme. Brian Kardell:
El espacio sRGB no es perceptualmente uniforme. El mismo movimiento matemático tiene 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í hay 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:: ligereza 💡
Los mismos colores de nuestra complicada encuesta de colores, pero esta vez he mostrado la versión de LAB del mismo color en la parte superior. ¡Observe cuánto más cerca está el valor de luminosidad de LAB de los resultados de nuestra encuesta!
🎨 ¡Los espacios de color no son todos iguales! https://t.co/AIEs0amdWY pic.twitter.com/xkEguq3KZG
—Adam Argyle (@argyleink) 3 de diciembre de 2019
Pero en LAB, aparentemente, es perceptualmente uniforme, lo que significa que la manipulación programática de colores es una tarea mucho más sensata. Y otra ventaja es que los colores de LAB se especifican como independientes del dispositivo. Aquí está Michelle Barker:
LAB y LCH se definen en el especificación as colores independientes del dispositivo. LAB es un espacio de color al que se puede acceder en software como Photoshop y se recomienda si desea que un color se vea igual en la pantalla que, por ejemplo, impreso en una camiseta.
Recursos
LCH es como hsl() de una gama mucho más amplia
¿Recuerdas que dije que HSL es "para humanos" en el sentido de que es más fácil de entender que RGB? Cambiar el tono, la saturación y la luminosidad tiene mucho sentido lógico. Similar aquí con lch() donde tenemos Ligereza, Chromay Color. Volviendo a mi conversación con Eric Portis:
LCH es más como HSL: un espacio polar. H = matiz = un círculo. Entonces, hacer matemáticas para elegir colores complementarios (o cualquier transformación que esté buscando) se vuelve trivial (solo agregue 180, ¡o lo que sea!)
Supongo que elegiría LCH solo porque le gusta su sintaxis o porque facilita algunas cosas programáticas complicadas que está tratando de hacer, y obtiene el hecho de que puede expresar un 50% más de colores de forma gratuita.
Aquí también obtenemos la uniformidad perceptiva. Aquí está Lea Verou que parece emocionado de que la ligereza realmente signifique algo:
En HSL, la ligereza no tiene sentido. Los colores pueden tener el mismo valor de luminosidad, con una luminosidad perceptible muy diferente. […] Con LCH, cualquier color con la misma luminosidad es igualmente perceptiblemente claro, y cualquier color con el mismo croma está igualmente perceptualmente saturado.
Otro beneficio del nuevo modelo es que podemos limpiarnos las manos de la “zona muerta gris” en gradientes de color CSS. Creo que debido a esta uniformidad perceptual, dos colores intensos no se volverán descarados ni degradados a través de un territorio no rico.
He aquí una pequeña predicción personal: yo diría que lch() probablemente va a ser un favorito de los diseñadores. Pronto habrá un montón de nuevas opciones de color y es demasiado difícil y extraño estar siempre eligiendo diferentes. LCH parece tener el mejor rendimiento mental.
Recursos
"OK"
LAB 'n' amigos parece tan nuevo porque es nuevo... para CSS. pero laboratorio fue inventado en la década de 1940. En una conversación con Adam Argyle, usó una frase memorable: Todos los espacios de color tienen un talón de Aquiles. Es decir, algo en lo que apestan. Para sRGB, es la zona muerta gris, así como la gama de colores limitada. LAB es genial y todo eso, pero ciertamente tiene sus propias debilidades. Por ejemplo, un degradado de azul a blanco en LAB viaja de manera bastante incómoda a través de purpletown.
En diciembre de 2020, Björn Ottosson es todo como "Oye, acaba de salir un nuevo espacio de color", y ahora existe OKLAB. Aparentemente, los poderes fácticos de CSS ven suficiente valor en ese espacio de color que ambos oklab() y oklch() ya están especificados. Supongo que debería importarnos porque son solo generalmente mejor, pero no me cites en eso.
¿Por qué Display P3 usa el color() funcionan pero los otros no?
Realmente no lo sé. Creo que el CSS color() La función es un poco más nueva y así es como Safari la sumergió allí para comenzar. No tengo idea si Display P3 tendrá su propia función dedicada, o si todos deberíamos 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.
Existe esta habilidad 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 el (obviamente) color CSS HEX más famoso de todos los tiempos, perro de niebla, y quieres pasarlo a HSL en su lugar:
body { background: hsl(from #f06d06 h s l);
}Tal vez eso no sea tan útil de inmediato, pero bueno, ¡ahora podemos agregarle alfa! Literalmente, no hay otra forma de aplicar alfa a un color HEX existente, por lo que es un poco enorme:
body { background: hsl(from #f06d06 h s l / 0.5);
}Pero también puedo meterme con eso. Digamos que quiero saturar un poco el perro de niebla antes de agregar opacidad porque la opacidad más baja lo atenuará naturalmente y quiero combatir eso. Puedo usar calc() en las variables implícitas allí:
body { background: hsl(from #f06d06 h calc(s + 20%) l / 0.5);
}Eso es tan cool. seguro que veremos alguno las increíbles ofertas de las cosas vienen de esto. Y ciertamente no se limita a HSL. Solo estaba usando HSL porque es lo que me resulta cómodo en este momento. Podría comenzar con el color mencionado red y meterme con eso en LCH si quiero:
body { background: lch(from red l calc(c + 15) h / 0.25);
}Este material será más útil cuando se combine liberalmente con propiedades personalizadas.
Ya no hay funciones especiales solo para alfa.
Para que quede claro: no hay comas antes del valor alfa en una función de color CSS, solo una barra inclinada en su lugar:
/* 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 eso. Me sorprende, lo siento.
