Si usas degradados de color para tus diseños UI, seguro que alguna vez te has encontrado con el típico problema de saltos bruscos de color en algunas partes del degradado. Este problema se llama color banding y está bastante relacionado con la gama de color que veíamos en Conceptos básicos sobre el color.
¿Pero qué es el color banding exactamente?
El color banding es un efecto por el cual colores próximos se igualan formando una masa que ocupa el espacio de esos colores igualados.
Esto se debe a que la profundidad de color no es suficientemente amplia para representar toda la gama de color (gammut) debido a las capacidades técnicas del espacio de color y las limitaciones del modo de color.
También es posible que nos encontremos con este problema al comprimir imágenes porque precisamente, parte de la compresión consiste en reducir la cantidad de colores.
¿Cómo solucionar el color banding en los diseños UI?
Una vez entendido que las causas del color banding es la falta de colores dentro de una gama bien por el propio espacio de color, el modo de color o la supresión voluntaria de colores, podemos buscar opciones para solucionar estas bandas de color uniforme.
Si el color banding procede por la compresión de la imagen
La primera solución es comprimir menos la imagen hasta llegar a un punto de color banding aceptable.
Después, otras opciones pueden ser añadir ruido a la imagen o dienteado (dithering) por lo menos en las zonas donde se forman las bandas de color. Con esto aumentaremos algo el tamaño de la imagen, pero no tanto como con las soluciones que comento ahora.
Si el color banding viene de la fotografía de origen o de exportarla aunque no la hayamos comprimido
La primera opción que veo sería comprobar el espacio de color. Posiblemente la imagen esté en un espacio sRGB que, como veíamos en los conceptos básicos, es el espacio de color digital más reducido.
Otra opción, puede ser aumentar la profundidad de bits dentro del modelo de color. Es decir, pasar la imagen de 8 a 16 bits puede solucionar el problema al duplicar la cantidad de colores reconocidos.
Finalmente, también están las opciones de añadir ruido o dithering a la imagen o también tenemos la opción de añadir desenfoque gaussiano a las zonas con este problema.
