Juego de memoria de colores

Al pulsar «Empezar», el color objetivo llena un tablero gris y una cuenta atrás marca el tiempo que queda para mirarlo. Al llegar a cero, la muestra se oculta y aparecen tres deslizadores en una posición al azar. Los mueves hasta que el recuadro se parece al color que recuerdas, y «Listo» compara los dos. Cada color es una ronda de la partida; con las banderas no se enseña nada antes.

Al ocultarse el original, el recuadro pasa a mostrar tu propio color, que cambia con cada movimiento. Las barras de los deslizadores se pintan con los colores que daría cada uno, de modo que la propia barra enseña hacia dónde ir. Al empezar, el tono parte de cualquier punto, la saturación de 20 % a 80 % y el brillo de 30 % a 90 %.

Tras pulsar «Listo», el juego da los puntos de ese color sobre 10, con un decimal, y un veredicto de una palabra. Debajo aparecen la diferencia en ΔE, una pista sobre cada deslizador desviado y una tabla con tus valores junto a los del objetivo. Si el color era de una bandera, se ve además la bandera.

Los colores se sortean al pulsar «Empezar», nunca mientras carga la página: los del día salen de la fecha, y los demás, del generador criptográfico del navegador. Ninguna norma define este juego. El tiempo para mirar, el número de colores, la fórmula de los puntos, los veredictos y el fondo gris son elecciones de este sitio.

Son las tres coordenadas del modelo HSB, también llamado HSV, con el que muchos programas de dibujo y edición describen un color de pantalla. El tono es la posición en la rueda de color, medida en grados. La saturación indica lo intenso o grisáceo que resulta, y el brillo, lo lejos que está del negro.

Alvy Ray Smith describió este modelo como un hexacono construido sobre los valores rojo, verde y azul que guarda la pantalla. En él, el brillo es el mayor de los tres canales, y la saturación dice cuánto queda el canal menor por debajo del mayor, en proporción. Con el brillo a cero sale negro, y con la saturación a cero, un gris.

Tono y matiz se usan a menudo como sinónimos. El Diccionario de la lengua española define matiz como «cada una de las gradaciones que puede recibir un color sin perder el nombre que lo distingue de los demás». En el juego, mover el tono unos pocos grados cambia el matiz; moverlo mucho cambia el nombre, del rojo al naranja, por ejemplo.

Un mismo paso del deslizador no produce siempre la misma diferencia visible: unos grados de tono se notan mucho en ciertos colores y apenas en otros. Por eso los puntos no salen de los números de los deslizadores, sino de CIELAB, el espacio de color de la CIE. CIELAB describe cada color por su claridad, su croma y su ángulo de tono. Esa claridad y ese croma no coinciden con el brillo y la saturación del modelo HSB.

Con una diferencia de ΔE 1,0 respecto al original, un color conserva 9,8 puntos; con 5,0 quedan 8,5, y con 20,0, apenas 3,7.

Esos puntos salen de una curva propia de este sitio: 10 × e^(−(ΔE ÷ 20)^1,3), redondeado a una décima. Una diferencia de 20 deja 10 ÷ e, unos 3,7 puntos, y un intento al azar casi no suma. El total de la partida es la suma de los 5 resultados ya redondeados.

Delta E, que se escribe ΔE, es el número que expresa una diferencia de color: cero significa dos colores iguales. El juego lo calcula con CIEDE2000, la fórmula de la norma ISO/CIE 11664-6:2022 de la Comisión Internacional de Iluminación (CIE). Antes pasa cada color de sRGB a CIELAB, con las fórmulas del módulo CSS Color 4.

Para comprobar el cálculo, el código reproduce los 34 pares de prueba de Sharma, Wu y Dalal, cuyos datos conserva la Universidad de Rochester.

Como referencia, Paravina y su equipo estudiaron a 175 personas que comparaban cerámica dental en una cabina de luz. Una diferencia de 0,8 ya la notaba la mitad de esas personas, y una de 1,8 era el límite que la mitad aún aceptaba. Son cifras de objetos vistos a la vez, no de pantallas ni de memoria.

En pocas palabras, cada partida reúne 5 colores, y todos pasan por las mismas fases. Primero se ven unos segundos sobre un gris neutro, salvo los de banderas, que se piden sin enseñarlos. Después se ocultan, y los reconstruyes con los deslizadores de tono, saturación y brillo. Al terminar, el juego mide la distancia entre tu color y el original con CIEDE2000, una fórmula que estima cuánto se distinguen dos colores a la vista. Una diferencia que casi no se ve conserva cerca de 10 puntos, una de 20 deja unos 3,7 y un intento al azar se queda casi en cero. La partida suma los 5 resultados, con un máximo de 50 puntos. Junto a cada nota salen un veredicto de una palabra y una pista por cada barra desviada. Ni la curva ni los veredictos vienen de una norma, porque los ha fijado este sitio.

Supón que el juego enseña un azul claro con tono 210°, saturación 40 % y brillo 80 %, el #7AA3CC. Tras la cuenta atrás lo reconstruyes con 222°, 52 % y 70 %, es decir, #5672B3. La diferencia es de ΔE 16,5, así que la ronda vale 4,6 puntos y el veredicto es «Algo desviado».

Bajo los puntos, las pistas de esa ronda señalan qué deslizadores quedaron lejos:

• Demasiado oscuro: brillo 10 puntos por debajo
• Demasiado intenso: saturación 12 puntos por encima
• El tono se desvía 12°

Tu versión salió más oscura y más intensa que el original. Lo segundo va en la línea del desvío hacia más saturación que describen varios estudios sobre la memoria del color, aunque no todos lo encuentran.

Los veredictos dependen solo de la diferencia, con estos límites:

• «Clavado»: menos de ΔE 2.
• «Muy cerca»: menos de 5.
• «Cerca»: menos de 10.
• «Algo desviado»: menos de 20.
• «Muy lejos»: 20 o más.

Las pistas nombran el brillo cuando se aleja 6 puntos o más, la saturación desde 8 puntos y el tono desde 8°. Esa última solo aparece si el color mostrado tiene al menos un 15 % de saturación y de brillo. Un gris o un color casi negro apenas tiene matiz que recordar. Si nada se aleja tanto, la pista dice «Todos los deslizadores quedaron cerca».

El reto diario da a todo el mundo los mismos colores cada día, y la ronda libre saca colores nuevos en cada partida. Un tercer modo pide colores de banderas de memoria. El modo elegido, y también el tiempo para mirar, queda fijo hasta que termina la partida.

• Reto diario: los 5 colores del día son iguales para cualquier persona y en cualquier idioma, porque salen solo de la fecha del calendario de tu dispositivo. Cada uno se ve 5 segundos.
• Ronda libre: eliges cuánto se ve cada color, 2, 3, 5 o 10 segundos. El modo de comparar deja el color a la vista junto a los deslizadores, una forma más fácil de aprender a manejarlos.
• Colores de banderas: el juego nombra un país y uno de los colores de su bandera, sin enseñar nada antes. Los detalles están en el apartado sobre las banderas.

Salvo con las banderas, los colores usan valores enteros de los deslizadores. Su saturación va de 25 % a 100 %, y su brillo, de 30 % a 100 %. Así siempre se puede rehacer el color exacto y lograr un 10 perfecto. Además, dos colores de una misma partida se separan al menos ΔE 15, de modo que ninguno se repite.

El marcador enseña tu mejor puntuación en el modo elegido. Con colores libres se guarda una por cada tiempo, porque mirar 2 segundos no es lo mismo que mirar 10. Con los colores del día, el marcador muestra tu mejor resultado de hoy.

En el modo de banderas toca adivinar el color de la bandera sin verlo antes. El juego nombra un país y uno de sus colores, lo reconstruyes de memoria y, al pulsar «Listo», aparece la bandera junto a los puntos. Hay 40 banderas y 73 colores en total.

El blanco y el negro quedan fuera por ser demasiado fáciles, igual que los colores que solo salen en un emblema pequeño. Cada color es el que pinta la imagen de la bandera, la misma del quiz de banderas, que viene del proyecto de código abierto flag-icons. Como esos colores no caen en valores enteros de los deslizadores, aquí el 10 exacto no siempre es posible.

Bartleson (1960) estudió con 50 personas y 931 muestras Munsell cómo se recuerdan los colores de objetos conocidos. En la mayoría de los casos, la saturación y la claridad aumentaban en la memoria, y una bandera es justo un objeto conocido.

En España, la forma de la bandera la fija la Constitución, y sus colores, un real decreto; los dos textos están publicados en el Boletín Oficial del Estado. Según el artículo 4.1 de la Constitución, «la bandera de España está formada por tres franjas horizontales, roja, amarilla y roja». El mismo artículo añade que la amarilla es «de doble anchura que cada una de las rojas».

El Real Decreto 441/1981, de 27 de febrero, fija además los dos colores en el sistema CIELAB. El rojo bandera tiene tono 35, croma 70 y claridad 37; el amarillo gualda bandera, tono 85, croma 95 y claridad 80. Como tolerancia, el decreto admite 5 unidades CIELAB.

Según el cálculo de esta página, que lee esas cifras CIELAB con el blanco D65 de las pantallas, el rojo cabe en la gama sRGB. Su color más cercano, #AD1519, queda a ΔE 0,1. El amarillo no cabe en ella, y el color más próximo, #FABD00, se queda a ΔE 2,8. La imagen del juego pinta el rojo como #AA151B y el amarillo como #F1BF00, a ΔE 1,0 y 3,2 del decreto.

Esas 5 unidades CIELAB son las de 1981, anteriores a la fórmula CIEDE2000, así que no equivalen a la misma cifra de ΔE en el juego. El artículo 2 del decreto añade los valores en el sistema CIE 1931, referidos al iluminante C.

La expresión rojo y gualda, con la que a menudo se nombra la bandera, viene de ese amarillo. Según el Diccionario de la lengua española, gualdo se dice de un color «amarillo como el de la flor de la gualda». La Constitución, en cambio, habla de franjas roja, amarilla y roja.

Porque la memoria no copia el color: lo guarda con más dispersión que la vista directa y, según algunos estudios, lo acerca al ejemplo típico de su categoría. Recordar colores cuesta más con unos que con otros. En Valencia, Pérez-Carpinell, Baldoví, de Fez y Castro (1998) vieron que el amarillo, el verde claro, el azul y el rosa se recordaban peor, y el naranja, mejor.

Ese trabajo de la Universitat de València contó con 50 participantes y muestras Munsell. Con las muestras una al lado de la otra, las diferencias medias quedaron casi todas por debajo de 1 unidad CIELAB; de memoria fueron en general mayores. También influyó la espera, de 15 segundos, 15 minutos o 24 horas.

En un trabajo posterior, de Fez, Capilla, Luque, Pérez-Carpinell y del Pozo (2001) usaron 34 muestras y una espera de 10 minutos. Tanto de memoria como a la vista, los colores elegidos tendían a ser más vivos que los originales, y el matiz no siguió un patrón claro. De Fez figura hoy en el equipo del Grupo de Óptica y Percepción Visual de la Universidad de Alicante. La página del grupo sitúa en Valencia el inicio de esa línea de investigación sobre la memoria del color.

Los estudios clásicos apuntan en la misma dirección. Newhall, Burnham y Clark (1957) compararon 25 colores igualados de memoria y a la vista. De memoria, las respuestas variaban más, llegaban antes y salían con más pureza y algo más de luminosidad. Uchikawa (1983) dejó 3 segundos entre muestra y respuesta, y el umbral para distinguir la saturación fue de 1,5 a 2,0 veces el de la comparación directa. Además, en la mayoría de las longitudes de onda, los colores recordados se desplazaban hacia más saturación.

Bae, Olkkonen, Allred y Flombaum (2015) enseñaban un color 100 milisegundos, lo ocultaban otros 900 y pedían elegirlo en una rueda de color. Las respuestas se alejaban de las fronteras entre categorías y se acercaban a su centro. Un color focal es el ejemplo más típico de uno de los colores básicos. Los colores próximos a uno de ellos se recordaban con más precisión: en su ejemplo, un amarillo más que un azul.

Olkkonen, McCarthy y Allred (2014), con esperas de 0,4 a 4 segundos, vieron que las estimaciones de tono se inclinaban hacia la media de los colores de la serie.

No todo apunta a un sesgo. Nilsson y Nelson (1981) probaron 16 tonos con esperas de 0,1 a 24,3 segundos. Describieron un recuerdo del tono notablemente libre de desvíos, aunque más disperso cuanto más larga era la espera. Allred y Olkkonen (2015) resumen el consenso: la variabilidad crece en los primeros segundos de la memoria icónica y de trabajo y luego se estabiliza. Si la memoria añade además un sesgo sistemático sigue en debate.

Una tesis doctoral de Virginia Tech, la de Laws (2000), puso a 52 estudiantes ante una pantalla de ordenador. Los errores fueron mayores en la claridad, después en la saturación y menores en el tono.

Todos son estudios de laboratorio sobre la percepción del color, con luces y muestras controladas, no partidas de este juego. Ninguno mide los errores en CIEDE2000, así que los veredictos del juego no son una norma medida.

El tablero es siempre del mismo gris neutro, sRGB 128, 128, 128 (#808080), con el tema claro y con el oscuro. Un mismo color parece distinto sobre un fondo blanco que sobre uno negro, un efecto llamado contraste simultáneo, y un fondo fijo evita que el tema cambie la muestra.

El juego calcula cada diferencia con los valores sRGB que envía a la pantalla. Según el módulo CSS Color 4 del World Wide Web Consortium, sRGB es el espacio de color por defecto de la web. Lo que ves depende además del panel, de su calibración y de su brillo.

Apple explica que Night Shift desplaza los colores de la pantalla hacia el extremo más cálido del espectro. Microsoft describe la luz nocturna de Windows como una opción que muestra colores más cálidos. El modo oscuro y un brillo bajo también cambian lo que se percibe, así que la ΔE es una estimación de lo que enseña la pantalla.

Este juego pone a prueba la memoria, no la capacidad de distinguir dos tonos que están a la vista. Para eso el sitio tiene otro juego, encuentra el color diferente, que esconde una casilla de otro matiz en una cuadrícula.