¿Cómo hacer que un color se vea igual en diferentes fondos?


17

Antecedentes sobre la percepción del color:

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

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

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

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

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 se vea igual en cierto fondo?


Echemos un vistazo a un ejemplo para esta pregunta:

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

  • blanca #FFFFFF,
  • negro #000000,
  • y gris #555555.


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


Como se esperaba, no se ve igual en absoluto. ( Vea y descargue el archivo .PSD aquí ) .

¿Cómo podemos hacer que se vea igual en los tres? Claramente, el texto en el fondo blanco debe ser un amarillo más oscuro, y el que está en el gris necesita ajustes de tono / 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, en base al Hex, RGB u otro sistema? Ahí es donde está el quid de esta pregunta, ya que sería mucho más eficiente que la aproximación manual.


Tendrás que usar amarillos. Observe que en sus ejemplos usaron colores similares al que están tratando de hacer que se vea diferente.
Hanna

2
@Johannes, ¿qué quieres decir?
Baumr

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á uniendo amarillo con blancos, grises y negros. Entonces, lo que estoy diciendo es que debes usar amarillos en su lugar para que tu amarillo se vea igual en diferentes fondos.
Hanna

Me está costando mucho explicar esto, me disculpo.
Hanna

Respuestas:


10

Parece que está buscando el análogo de colores complementarios , pero en el espacio de la claridad en lugar del tono . Hasta donde 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 oscurezca, el texto del primer plano se aclare en la misma cantidad. Supongo que el tono permanece fijo. Siempre habrá un punto medio en el que el fondo y el primer plano compartan el mismo color.

Como ejemplo, considere negro sobre blanco. La claridad inversa para los mismos tonos es blanco sobre negro, pero si trataste 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 en absoluto.

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


1
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,

1
@Baumr: Podría ser una buena tesis doctoral :)
Lightness compite con Monica el

0

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

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 encima de un gris neutro se muestra en esta imagen:

ingrese la descripción de la imagen aquí

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

Con el color sobre 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: mira esto. Es posible que estos amarillos parezcan iguales.

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.