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

[#27 Tailgunner]

#4 pues no lo cambies

[#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

[#23 MorrosDeNutria]

#1 Una pregunta, ¿por qué migraste a hsl? Fue necesidad o curiosidad?

[#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"

[#26 arturios]

#14 Y sigue siendo, no se van a quitar unos para poner otro.

De todas formas me parece una gran evolución, puedes hacer un css en el que le das un color base y a partir de ahí calcular el resto de colores que se van a usar sin que la luminosidad se resienta y sin tener que usar complejas fórmulas en js, para los que nos gusta hacer páginas sin javascript es un avance.

#18 lo ha explicado mucho mejor.

[#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.

[#21 Veo]

#17 Hombre, en soporte físico no es que usar tres o cuatro tintas para un color no te asegure consistencia... es que usar un 5% en una, a poco que en otra tengas un 20/30%, se pierde en la trama, sobre todo ahora que cada vez hay más sistemas de impresion digital, que usan tramas más agresividad para ahorrar tintas.

[#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.

[#20 Lightninglion]

#13 Es un fallo de expresión por parte del artículo. Porque sí, con RGB/HEX tienes la legibilidad de saber "cuánto" hay de cada color, pero lo que dice el artículo es que las personas no tienen la capacidad de imaginar con precisión el color resultante a partir de las cantidades de rojo/verde/azul.
Pero tampoco me parece que sea algo que HSL u OKLCH arreglen ya que implica recordar (y ahí también habrá fallos de precisión) en que punto de la "tabla" empieza cada tono.

[#22 Veo]

#13 Que yo sepa un diseñador web no debería tener ningún problema en hacer una simple fórmula... otra cosa es que sea un diseñador gráfico haciendo webs, pero eso es otra cosa.

[#24 MorrosDeNutria]

#13 como es un tema que no me interesa mucho… voy a darles 5 años a qué se aclaren y ya si eso aprendo el nuevo estándar

[#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.

[#25 PacoJones]

Llevo 20 años con RGBA, HEX o directamente con el nombre del color en inglés. Me da pereza otra especificación más que habrá que saber. Y por lo visto Tailwind 4 la ha incorporado por defecto.

CSS es un Frankenstein, conviven especificaciones antiguas con nuevas y muchas redundantes. Hace 15/20 años era fácil de recordar todo, ahora siento lástima por los iniciados aprendiendo CSS.