Colores en CSS: por qué hemos cambiado RGB y HSL por OKLCH [ENG]

La nueva especificación CSS Color 4 ha agregado la nueva notación de OKLCH para declarar colores. En OKLCH existen varios parámetros: "l c h" o "l c h / a", donde cada uno es: L es la luminosidad percibida (0-1). "Percibido" significa que tiene una luminosidad constante para nuestros ojos, a diferencia de L en HSL. C es el croma, desde el color gris hasta el color más saturado. H es el ángulo de tono (0-360). A es opacidad (0-1 o 0-100%).

[#1 frg]

Acabo de aprender a poner hsl en los colores de CSS, ¡y me lo cambian!

[#2 mr_b]

#1 Del propio artículo, traducido (por DeepL), una muy buena explicación de cómo funciona:

• L es la luminosidad percibida. Va de 0 (negro) a 1 (blanco). También admite porcentajes (de 0 % a 100 %), pero el % no funciona en calc() ni en colores relativos.
• C es la cromaticidad, la saturación del color. Va de 0 (gris) a infinito. En la práctica, hay un límite, pero depende de la gama de colores de la pantalla (los colores P3 tendrán valores mayores que los sRGB) y cada tono

…   

[#4 frg]

#2 Se leer. Me jode tener que cambiar todo el CSS que acabo de generar.

[#6 Benzo]

#4 github.com/fpetrakov/convert-to-oklch

[#8 frg]

#6 Primera prueba rápida. FAIL

Ha dejado todo en blanco y negro

[#9 Benzo]

#8 Te ha quedado versión vintage

[#3 Ka0]

#1 Es peor, OKLCH es la evolución de LCH (cie LAB), no de HSL. Y seguro que habran mas cambios, es como cuando tienes un documento que quieres arreglar pero no lo quieres tirar y le añades un Ok al final del nombre, pero como sigues haciendo cagadas, después haces otro con la coletilla, final y luego otro con este Si y otro con definitivo….

[#5 frg]

#3 Me da hasta pereza mirar más sobre el tema. Creo voy a dejar todo en hsl y rgb sin migrar.

¡Qué pereza!  

[#15 dilsexico]

#3 Final_final_use this one_v3_document.indd

[#13 aPedirAlMetro]

"Unlike rgb() or hex (#ca0000), OKLCH is human readable"
Mis cojones.
Veamos un color rojo puro por ejemplo, en RGB: rgb(255, 0, 0)
Ahora el mismo color en OKLCH: oklch(0.628 0.2577 29.23)

SI alguien considera el segundo mas entendible a simple vista que el primero, es que no es de este planeta

"OKLCH frees designers from the need to manually choose every color. Designers can define a formula, choose a few colors, and an entire design system palette is automatically generated."
Diseñadores definiendo formulas

[#14 reivaj01]

#13 color: red;
Esto si que era "human readable"

[#17 PerritaPiloto]

#12 #13 Esto llevo diez años haciéndolo para generar efectos en matrices led con HSV.
Así que mi workflow no va a cambiar demasiado. Para dar o quitar saturación, o hacer un barrido de color sigue siendo superior. A efectos prácticos necesitas memoria por cada pixel, para almacenar cuatro valores en lugar de tres valores. Y esto, en los dispositivos son soporte nativo para cualquier espacio de color y un canal alfa, sigue ocupando lo mismo. Cuando las animaciones son procedirales ocupa muy…   

[#19 Joice]

#17 No me he enterado de nada, pero es muy interesante lo que comentas.

[#18 zeehio]

#13 oklch es muy útil para generar paletas de colores donde sólo varíe el croma o sólo varíe la luminosidad o solo varíe la saturación, y que la variabilidad sea perceptualmente regular.

"Quiero una paleta que todos los colores sean verde aceituna y me cambie su cromaticidad" es más fácil de lograr en oklch que en RGB porque en oklch solo tienes que variar una coordenada, mientras que en RGB normalmente tienes que variarlas todas.

Para eso me parece extremadamente útil. Si quiero #FF0000 escribiré eso, no tiene sentido convertirlo a otro espacio de color.

[#12 mcfgdbbn3]

Excusas para inflar más Internet, que una página web no baje de 4 Gb de memoria y el navegador ocupe como mínimo 32 Gb.

Ojalá se lo tiren o no se lleve a cabo, pero me imagino que habrá muchos intereses económicos.

[#7 Ne0]

Perooooo, en que nos afecta esto a los hombre si solo distinguimos 16 colores?

[#10 covacho]

#7 16 colores dice. Todo el mundo sabe que son 8 colores, si contamos el blanco y el negro.

[#11 Ne0]

#10 A ver!! que me he criado con 2 hermanas y una de ellas es costurera, algo he debido de aprender!!

[#16 PerritaPiloto]

#11 Si, que si la tela no es de la misma tintada que otra con la misma referencia, es posible que haya variación en el color. Así que en el orillo aparece a veces tanto la referencia al modelo de la tela como a la tintada.