Entonces, esto es más visualización científica que diseño gráfico, pero creo que la teoría es la misma. En los mapas de color utilizados para visualizar datos, a menudo hay bandas de color que sobresalen cuando no deberían. ¿Creo que son una forma de bandas de Mach ?

Por ejemplo, usé este mapa de color bipolar y produce imágenes como esta:

Es casi como un anillo de naranja neón alrededor de 0.2, y uno similar para el azul alrededor de -0.2. Aquí hay una gráfica de los componentes RGB y un cálculo de la luminancia relativa en negro:

Lo modifiqué manualmente para tratar de deshacerme de las bandas, y algo lo logré, pero realmente no entiendo la teoría detrás de esto:

Es mejor, pero todavía veo bandas en él.

Para otro ejemplo, para el mapa de color caliente, pensé que tal vez tenía que linealizar el gráfico de luminancia para evitar las bandas, pero realmente no funcionó:

Las bandas amarillas y naranjas todavía están allí, solo se movieron y se untaron un poco. Entonces, las discontinuidades en la gráfica de luminancia no son la causa del problema.

¿Cómo hago una transición suave de colores sin bandas? ¿Existen reglas para hacer curvas suaves a través del espacio de color Lab o algo así? ( Editar: Ooh, encontré un ejemplo para esto : "La escala de color se calcula utilizando el espacio de color L a b *. Sigue una rampa uniforme a lo largo de la dirección L *, y sigue una trayectoria semicircular en a * -b * avión.")

Actualización: Aquí hay una gráfica de este mapa de colores en el cubo RGB, que muestra los ángulos agudos de los que habla el usuario568458:

No olvide que, incluso si está trabajando con valores de color LAB, los valores RGB tienen que emitirse para mostrarlos en una pantalla. En algún momento, tiene que decirle a los píxeles rojos, verdes y azules de una pantalla qué hacer.

Míralo en términos RGB, y la causa de las bandas es bastante simple.

Tome un selector de color y mire los degradados, y notará que las bandas están alrededor de los puntos donde cambia la naturaleza del degradado:

• En el rojo, es alrededor de donde pasa de aumentar suavemente la R en el RGB a agregar G para volverse amarillo, alrededor de # FF0000 a # FF2500
• En el azul, es alrededor de donde pasa de aumentar suavemente la B en el RGB a agregar G para convertirse en cian - alrededor de # 0000FF a # 0025FF

Y de la misma manera con las gráficas inferiores, agregando amarillo a blanco: son esencialmente tres gradientes unidos. Usando el degradado rojo como ejemplo:

• es # 000000 a # FF0000 (aumento del brillo en términos de HSB, aumento del canal rojo en RGB)
• luego # FF0000 a # FFFF00 (cambiando el tono en términos de HSB, aumentando el canal verde en RGB)
• luego # FFFF00 a #FFFFFF (cambiando la saturación en términos de HSB, aumentando el canal azul en RGB)

Por lo tanto, siempre habrá una unión visible, si así es como está configurada. Como regla general, donde la precisión y la linealidad son el objetivo principal, es mejor mantener un gradiente simple, variando una característica constantemente (a menos que desee bandas, por ejemplo, en algunos tipos de escáner cerebral).

Dicho esto , si está decidido a atravesar el espectro más amplio (se ve bien), buscaría comenzar a agregar el segundo canal antes de que se complete el primero, formando una sección de puente entre los gradientes o tener un ligera curva en forma de S inversa a la velocidad a la que se agrega el segundo canal (probablemente ambos).

Entonces en lugar de:

• 000000 a # FF0000, 100% negro a 100% rojo

• FF0000 a # FFFF00, 100% rojo a 100% amarillo

• FFFF00 a #FFFFFF, 100% amarillo a 100% blanco

... podría ser (solo adivina la parte superior de mi cabeza, necesitará un ajuste):

• 000000 a # E90000, 100% negro a rojo brillante

• E90000 a # FF2500, (PUENTE CORTO) rojo brillante (oscuro) a rojo brillante (ligeramente naranja)

• FF2500 a # FFE900, rojo brillante (ligeramente naranja) a amarillo brillante (ligeramente naranja)

• FFE900 a # FFFF25, (PUENTE CORTO) amarillo brillante (ligeramente naranja) a amarillo brillante (claro)

• FFFF25 a #FFFFFF, amarillo brillante (claro) a 100% blanco

... luego ajuste las curvas de cada sección según el gusto :-)

Editar: Aquí hay una demostración de la sugerencia de "cortar las esquinas". No es perfecto, es bastante sin refinar, es algo que reuní a simple vista en unos minutos usando la herramienta de mezcla de Illustrator (objetos sin mezclar en la parte inferior para mostrar los puntos de color). Cada segmento del gradiente entre cada punto de color es 100% lineal, mientras que probablemente quieras algo más redondeado, y como resultado, si miras con cuidado, puedes detectar bandas.

Los resultados varían naturalmente entre monitores: en mi monitor "bueno", es suave; en el monitor 'malo' que uso para verificar la resistencia de las imágenes web (donde las bandas originales no se muestran muy claramente), las naranjas siempre aparecen atenuadas, lo que hace que las áreas rojas y amarillas parezcan más brillantes que la naranja que se une, enfatizando demasiado el rojo y áreas amarillas, pero aún se puede ver que el 'borde' de las bandas originales se ha ido en gran medida.

De cualquier manera, en comparación con los gradientes originales, puede ver claramente la diferencia. (En cuanto a las matemáticas detrás de esto, no tengo idea, no soy matemático, pero espero que esto ayude a identificar el problema y la solución)

La otra ventaja es que puedes usar la transición más clara de negro> un canal más.

O la misma idea en un cubo de color RGB (perdona la crudeza, está destinado a ser demostrativo, no exacto ...):

Esto muestra probablemente más claramente lo que quise decir cuando dije que el gradiente de ejemplo se puede mejorar haciendo que las transiciones de los segmentos principales a los segmentos de corte de esquina sean más suaves que angulares.

Quizás esto pueda ayudarte, funciona para mí, pero no conozco una forma manual de lograrlo.

http://nomorebanding.com/