¿Cómo hacer que un color parezca el mismo en diferentes fondos?

Antecedentes sobre la percepción del color:

Debido a la naturaleza del ojo humano y al procesamiento visual del cerebro, existe la ilusión óptica de que el mismo color se verá diferente según el fondo .

Se conoce como el efecto de contraste , que se ilustra a continuación: los rectángulos centrales son idénticos:

ingrese la descripción de la imagen aquíFuente: Wikimedia

Una ilustración (y un informe) de la NASA hace que el efecto del color del fondo sea aún más evidente:

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquíFuente: Laboratorio de investigación de uso de color de la NASA

(Observe cómo los dos colores superiores en la segunda imagen parecen iguales, pero en realidad son completamente diferentes).


¿Qué pasa con el diseño web?

Mi pregunta se refiere al diseño web, específicamente en este caso, el color del texto del enlace en diferentes fondos.

Para un color de texto dado, ¿cómo se puede encontrar el color complementario para que parezca el mismo en un fondo determinado?


Veamos un ejemplo para esta pregunta:

Considere mi ejemplo a continuación, con texto amarillo #FFF000en los siguientes fondos:

  • blanco #FFFFFF,
  • negro #000000,
  • #555555y gris


Compare colores en diferentes fondos para texto de diseño web


Como era de esperar, no se ve igual en absoluto. ( Ver y descargar el archivo .PSD aquí. )

¿Cómo podemos hacer que se vea igual en los tres? Claramente, el texto en el fondo blanco debe ser de un amarillo más oscuro, y el que está en el gris necesita ajustes de matiz/tono. (El texto que lo rodea también lo afectará, pero es probable que sea más difícil de explicar).

¿Se puede calcular este color perfecto de alguna manera, basado en Hex, RGB u otro sistema? Ahí es donde radica el quid de esta pregunta, ya que sería mucho más eficiente que la aproximación manual.

Tendrás que usar amarillos. Observe en sus ejemplos que usaron colores similares a los que están tratando de hacer que se vean diferentes.
@Johannes, ¿a qué te refieres?
En su primer ejemplo, los colores utilizados fueron todos los tonos de gris. En su segundo ejemplo, se hizo que su púrpura se viera más azul mediante el uso de un púrpura muy brillante. Luego, en su ejemplo amarillo, está superponiendo amarillo a blancos, grises y negros. Entonces, lo que estoy diciendo es que necesitas usar amarillos para que tu amarillo se vea igual en diferentes fondos.
Me cuesta explicar esto, pido disculpas.
@Johannes, gracias, pero me cuesta entenderlo. Siéntase libre de responder: el PSD está arriba para descargar.
@Non-StopTimeTravel, ¡sí, es un clásico!

Respuestas (2)

Parece que estás buscando el análogo de los colores complementarios , pero en el espacio de la luminosidad en lugar del tono . Por lo que puedo decir, no puede existir tal mapeo general.

Suponga que puede compensar el efecto asumiendo una correlación lineal entre el fondo y el primer plano, de modo que a medida que el fondo se oscurece, el texto del primer plano se aclara en la misma cantidad. Supongo que el tono permanece fijo. Siempre habrá un punto medio en el que el fondo y el primer plano comparten el mismo color.

Como ejemplo, considere el negro sobre blanco. La luminosidad inversa para los mismos tonos es blanco sobre negro, pero si tratas de encontrar un primer plano para cada fondo intermedio del mismo tono, en el punto medio golpeas gris sobre gris y no puedes ver nada.

Por la misma razón, no puedo ver que pueda existir ningún mapeo razonablemente simple, incluso uno con pérdidas.

Para resolver esto, creo que necesitaríamos construir un modelo del ojo humano (promedio) y encontrar el mejor ajuste usando un algoritmo genético.
@Baumr: Podría ser una buena tesis doctoral :)

Qué tal esto: usa diferentes grises bajo diferentes fondos, pintados de blanco y negro, para que los primeros parezcan iguales, pero no cuando están contra uno neutro.

Avíseme si estos dos conjuntos de parches se ven iguales en la parte superior de las filas en blanco y negro:

ingrese la descripción de la imagen aquí

Porque el aspecto de estos parches sobre un gris neutro se muestra en esta imagen:

ingrese la descripción de la imagen aquí

Usé el modo de fusión de capas de GIMP llamado Grain Extract/Merge, que me permitió encontrar el gris más claro al extraer un parche neutral de otro, y luego el más oscuro al fusionarlos. En otras palabras: encontré dos grises cuyo promedio aditivo es neutral.

Con color contra un fondo blanco o negro, puede usar Grain Merge para encontrar el color promediado aditivo, y con Grain Extract el complementario de este último.

EDITAR: echa un vistazo a esto. Es posible que estos amarillos parezcan iguales.

ingrese la descripción de la imagen aquí