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?

[#29 frg]

#23 Estaba migrando una mierdilla con muchos años y el nuevo tema utilizaba todo en hsl, por lo que hice la conversión de los antiquísimos CSS, añadiendo cosas "modernas" como variables, diferentes colores para día y noche, y esas cosas que antaño no existían.

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

[#33 Artok]

#17 pues mirando mejor esto parece que el espectro de color es más amplio. Esto si da juego. De hecho, cuando empezó la web recuerdo que primero se diseñaba en cmyk, la reproducción más habitual y luego se convertía a rgb. Hoy día es al revés.
Si esta paleta es más amplia es interesante, aunque según leo la mayoría de dispositivos lo van a convertir a rgb, con lo que ya pierdes control y precisión sobre la reproducción.

[#37 PerritaPiloto]

#33 Por eso en realidad te limitas a los colores que tengan correspondencia exacta en todos los sistemas.

Generalmente siempre sabes si vas a imprimir tarjetas, hacer carteles, es para un rótulo, o solo se va a quedar el la web.

[#38 Artok]

#37 yo ya paso del cmyk

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

[#35 mcfgdbbn3]

#24: Te tocará aprender todos los antiguos, y el nuevo.
xkcd.com/927/ (Standars)

[#32 Artok]

#13 ademas que un diseñador no usará estas métricas, compondrá visualmente desde una paleta. Sin nombres ni códigos. Luego convertirá, ya sea rbg, cmyk, color web o lo necesario para su reproducción más precisa.

Todo esto lo hacen para complicar más la vida del diseñador, que hoy día hasta tienen que lidiar con los de back end

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

[#30 PacoJones]

#28 No no, si me parece bien, necesitas esa retrocompatibilidad.

Lo que destaco es cómo de "simple" era CSS antiguamente para aprender y lo complejo que se ha vuelto ahora si tienes que empezar a aprenderlo. Los cambios para mí han sido graduales y acumulativos, pero para alguien empezando es sobrecogedor.

Lo malo de antes es que CSS no estaba del todo bien interpretado en todos los navegadores, estándares web mal implementados, IE6 era una pesadilla, los hacks para versiones de navegador concretas, bugs, diseño en tablas, etc. Por suerte ahora sabes que CSS en general funciona sin grandes problemas.

[#34 mcfgdbbn3]

#30: Lo bueno de CSS es que si quieres hacer algo sencillo, en plan texto, algún formulario simple o imágenes, no te obliga a complicarte mucho, con una serie de etiquetas básicas sacas todo.

Lo que nunca se debe hacer son los clásicos "deprected", que son un problema porque no siempre hay una persona de mantenimiento que se puede hacer cargo y actualizar el código, sea CSS, C, HTML, Python, JS... y peor aún lo de Python, crear un lenguaje incompatible... pero con la misma extensión y todo, cuando podrían haber usado ".py3" y carpetas de instalación diferentes, y solucionar en buena medida el problema.

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

[#28 Pepeolobo]

#25 Que CSS sea un Frankenstein me parece una ventaja, no un problema.
Uno de sus puntos fuertes es su retrocompatibilidad, si una página usa HEX o un desarrollador quiere usarlo, va a funcionar sin problema. Mientras que si necesita algo más complejo puede usar otra especificación.

Sería mucho peor si solo se aplicase una especificación, ya que implicaría rehacer todas las webs y tener que aprender de nuevo cada vez que surja algo nuevo. O directamente que no haya nada nuevo.

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

[#39 alfema]

#16 lo mismo decía mi madre durante una época en la que se dedicó a vender lanas y accesorios.

Que tenía que calcular bien la lana a pedir para que lo que fuera a tejer saliera del mismo color y no fueran tintadas diferentes.

[#31 armadilloamarillo]

#10 Rojo, Naranja, Amarillo, Verde, Azul, Morao, blanco, negro.. pues sí.

En google dice que hay un "Indigo" pero para mi es azul oscuro.

[#36 Malversan]

#31 Quita un par si eres daltónico.