Jeu de mémoire des couleurs : recréer chaque teinte au curseur

Chaque manche se joue en trois temps. La couleur cible remplit d'abord le plateau gris, sous un compte à rebours. Elle s'efface ensuite, et trois curseurs prennent sa place, réglés au hasard, sans rapport avec la bonne réponse. Le bouton « Valider » compare enfin la couleur recomposée à l'originale et traduit leur écart en points. Une partie enchaîne 5 manches, et son total additionne leurs notes arrondies.

Prenons une cible réglée sur une teinte de 210°, une saturation de 40 % et une luminosité de 80 %, soit le code #7AA3CC. Les curseurs s'arrêtent sur 222°, 52 % et 70 %, soit #5672B3. L'écart atteint ΔE 16,5, et la manche rapporte 4,6 points. Sous la note, le jeu détaille alors l'erreur, réglage par réglage.

• « Trop sombre : luminosité inférieure de 10 points »
• « Trop vive : saturation supérieure de 12 points »
• « Teinte décalée de 12° »

Pendant une partie, le mode et la durée d'affichage restent bloqués. Les couleurs ne sont tirées qu'au moment où l'on appuie sur « Commencer », avec le générateur aléatoire cryptographique du navigateur. Rien n'est donc tiré au chargement de la page.

Aucune norme ne définit ce jeu. La durée d'affichage, le nombre de couleurs, la courbe des points et les verdicts sont des choix propres au site. Il en va de même des seuils des remarques, du fond gris et de la sélection des drapeaux.

Les trois curseurs reprennent le modèle que les logiciels anglophones nomment HSB ou HSV, souvent noté TSL en français. Alvy Ray Smith l'a décrit comme un hexacône, calculé sur les valeurs RVB (rouge, vert, bleu) que l'écran reçoit.

• La teinte situe la couleur sur un cercle chromatique gradué en degrés. Le Dictionnaire médical de l'Académie nationale de médecine en fait un synonyme de tonalité chromatique, l'attribut qu'expriment des mots comme rouge, jaune, vert ou bleu.
• La saturation règle la pureté, du gris à la couleur franche. Le CNRTL diffuse le Trésor de la langue française informatisé. Ce dictionnaire la décrit comme la caractéristique « permettant d'estimer la proportion de blanc mélangé à la teinte pour reproduire la couleur ».
• La luminosité dose la lumière, du noir à la couleur pleine. Dans le modèle de Smith, elle vaut le plus élevé des trois canaux RVB.

Le vocabulaire varie d'une discipline à l'autre. Dans la terminologie de l'Académie nationale de médecine, la luminosité traduit l'anglais brightness, et la clarté traduit lightness. La clarté désigne aussi la coordonnée L* de l'espace CIELAB. Le curseur « Luminosité » du jeu n'est ni l'une ni l'autre : il appartient à un modèle d'écran.

Sous chaque curseur, une bande montre les couleurs qu'il donnerait seul, les deux autres restant fixes. Au début de chaque manche, la teinte part d'une position quelconque. La saturation est alors tirée entre 20 % et 80 %, la luminosité entre 30 % et 90 %.

Des pas égaux sur ces réglages ne produisent pas des différences visibles égales. Le score ne compare donc pas les chiffres affichés à côté des curseurs, mais les couleurs elles-mêmes.

Les points découlent du seul écart entre la cible et la couleur recomposée, noté Delta E ou ΔE. Chaque couleur vaut 10 × e^(−(ΔE ÷ 20)^1,3) points, arrondis au dixième. Un écart de 2,0 garde ainsi 9,5 points, tandis qu'à ΔE 20 il n'en reste que 3,7, soit 10 divisé par e.

L'écart de couleur se calcule avec la formule CIEDE2000, que fixe la norme ISO/CIE 11664-6:2022 de la Commission internationale de l'éclairage (CIE). Le jeu convertit d'abord les deux couleurs, telles qu'il les envoie à l'écran en sRGB, dans l'espace CIELAB. Ses trois axes sont la clarté L*, le chroma C* et l'angle de teinte h.

Pour vérifier ce calcul, le code du site reproduit les 34 paires de test publiées par Sharma, Wu et Dalal et diffusées par l'Université de Rochester.

Dans ce jeu, une couleur s'affiche sur un fond gris puis disparaît, avant d'être recomposée de mémoire avec trois curseurs. Sa reconstitution est notée sur 10 d'après l'écart CIEDE2000 entre les deux couleurs affichées. À ΔE 5,0, la note atteint 8,5 ; à 10,0, elle tombe à 6,7, et à 40,0 il ne reste que 0,9 point. Une partie compte 5 couleurs, et son total sur 50 additionne les notes arrondies. La courbe, les verdicts et les seuils sont propres au site. Aucune étude n'a mesuré les erreurs de mémoire en CIEDE2000, si bien qu'un total ne se compare qu'à d'autres parties de ce jeu. Comme chaque écran restitue les couleurs à sa façon, deux résultats obtenus sur deux appareils ne se comparent pas exactement non plus.

Après chaque validation, le jeu affiche une note sur 10 à une décimale, un verdict en quelques mots, l'écart ΔE et des remarques sur les réglages manqués. Le verdict dépend seulement de l'écart, par paliers.

• « Dans le mille » : écart inférieur à 2.
• « Très proche » : écart inférieur à 5.
• « Proche » : écart inférieur à 10.
• « Un peu à côté » : écart inférieur à 20.
• « Loin du compte » : écart de 20 ou plus.

Ces paliers sont ceux du site, pas une échelle mesurée. Les seuils publiés portent sur d'autres conditions : Paravina et ses collègues ont réuni 175 observateurs devant des céramiques dentaires, dans une cabine d'observation. La moitié d'entre eux percevaient un écart de ΔE 0,8, et la limite d'acceptabilité se situait à 1,8. Aucune de ces valeurs n'a été mesurée sur un écran.

Les remarques signalent la luminosité dès qu'elle s'écarte de 6 points, la saturation à partir de 8 points et la teinte à partir de 8°. Cet angle n'est jugé que si la cible atteint 15 % sur les deux autres réglages. Une couleur grisâtre ou très sombre n'a en effet presque pas de couleur dominante à retenir. Sans erreur notable, le jeu indique « Tous les curseurs étaient proches ».

Un petit tableau compare enfin les valeurs des deux couleurs, réglage par réglage, avec leur code hexadécimal. Ce code de six caractères, précédé d'un dièse, note en base 16 les trois canaux RVB : #808080 désigne par exemple le gris du plateau.

Les trois modes notent de la même façon ; ils se distinguent par l'origine des couleurs et par le temps laissé pour les observer.

Le défi du jour propose 5 couleurs identiques pour tout le monde, quelle que soit la langue de la page. Elles dépendent de la seule date, celle du calendrier de l'appareil, et chacune reste visible 5 secondes. Les scores d'une même journée se comparent ainsi entre amis.

La partie libre tire 5 nouvelles couleurs à chaque lancement, avec un temps d'observation au choix : 2, 3, 5 ou 10 secondes. L'option « Sans masquer : comparer côte à côte » laisse la couleur affichée à côté des curseurs, une façon calme d'apprendre à les manier.

Dans ces deux modes, chaque couleur combine une teinte quelconque, une saturation de 25 % à 100 % et une luminosité de 30 % à 100 %. Ses valeurs tombent sur des crans entiers, si bien qu'un 10 parfait reste possible. Deux couleurs d'une même partie s'écartent d'au moins ΔE 15, pour qu'aucune nuance ne revienne deux fois.

Le navigateur garde le meilleur score de chaque mode, et en partie libre celui de chaque durée. Il conserve aussi le meilleur résultat de chacun des 30 derniers jours de défi, ainsi que les 10 dernières parties. Tout reste dans son stockage local, sans envoi à un serveur.

Le bouton « Copier le résultat » copie une ligne avec le total et un carré par couleur. Ce carré est vert à partir de 8 points, jaune à partir de 5, rouge en dessous, et un lien rouvre le même mode.

Le mode « Couleurs des drapeaux » ne montre rien au départ : il nomme un pays et l'une des couleurs de son drapeau, à recomposer de mémoire. Le drapeau apparaît ensuite avec la note.

La sélection couvre 40 drapeaux et 73 couleurs, et chaque partie pioche 5 drapeaux différents. Chaque cible reprend la couleur exacte de l'image du drapeau, issue de la bibliothèque libre flag-icons, sous licence MIT. Ce sont les mêmes images que dans le quiz des drapeaux du site.

Les bandes noires et blanches sont écartées, trop faciles, tout comme les couleurs présentes seulement dans un petit emblème. Ces cibles ne tombent pas toujours sur des crans entiers des curseurs, et un 10 parfait n'y est donc pas toujours possible. Pour certaines couleurs, la meilleure note accessible descend à 9,9.

Ce mode fait appel au souvenir d'objets familiers, que Bartleson a étudié en 1960 auprès de 50 observateurs, avec 931 échantillons Munsell. Selon son article du Journal of the Optical Society of America, la saturation et la clarté augmentaient en mémoire dans la plupart des cas.

Pour la France, l'article 2 de la Constitution, publié par le Conseil constitutionnel, dispose : « L'emblème national est le drapeau tricolore, bleu, blanc, rouge. » Aucun texte ne fixe la nuance de ces trois couleurs.

Selon la Présidence de la République, elles associent le blanc du roi au bleu et au rouge de la ville de Paris. Depuis 1794, précise l'Élysée, l'ordre veut que « le bleu soit attaché à la gaule du pavillon, le blanc au milieu et le rouge flottant dans les airs ». Le choix de cet ordre par le peintre Louis David n'est, d'après la même page, qu'une légende.

Des valeurs précises existent pourtant dans la charte graphique de l'État, publiée en février 2020 par le Service d'information du Gouvernement. Elle définit le bleu France, RVB 0, 0, 145 (#000091), et le rouge Marianne, RVB 225, 0, 15 (#E1000F). Ce sont les couleurs de la marque de l'État, autour du bloc Marianne, et non une définition légale du drapeau.

L'image du drapeau français que le jeu utilise reprend exactement ces deux valeurs. En mode drapeaux, le bleu et le rouge de la France à recomposer sont donc ceux de la charte.

En partie seulement : une couleur retenue varie davantage qu'une couleur comparée côte à côte, et plusieurs études l'ont vue glisser vers plus de saturation. D'autres décrivent un souvenir presque sans biais, et la question reste débattue.

Ces travaux ont été menés en laboratoire, chacun avec ses échantillons, ses délais et ses mesures. Aucun n'exprime les erreurs en CIEDE2000, si bien que leurs chiffres ne servent pas de norme pour les points du jeu.

• Newhall, Burnham et Clark (1957) ont fait reproduire 25 couleurs de mémoire et côte à côte. De mémoire, les réglages variaient davantage et prenaient moins de temps. Ils donnaient aussi des puretés systématiquement plus élevées et des luminances un peu plus hautes.
• Chez Uchikawa (1983), un intervalle de 3 secondes multipliait par 1,5 à 2,0 le seuil de discrimination de la saturation obtenu en comparaison simultanée. Pour la plupart des longueurs d'onde, les couleurs retenues glissaient vers une saturation plus forte.
• Pérez-Carpinell et ses collègues (1998) ont testé 50 observateurs sur des échantillons Munsell. En comparaison directe, les écarts moyens restaient le plus souvent sous 1 unité CIELAB ; de mémoire, ils étaient en général plus grands. Le délai comptait, qu'il soit de 15 secondes, 15 minutes ou 24 heures.
• Dans cette même étude, l'orange était le mieux retenu ; le jaune, le vert clair, le bleu et le rose l'étaient le moins bien.
• Nilsson et Nelson (1981) ont étudié 16 teintes après des délais de 0,1 à 24,3 secondes. Les décalages restaient faibles, la mémoire semblait remarquablement peu biaisée, et la dispersion grandissait avec le délai.
• Bae et ses collègues (2015) montraient une couleur 100 millisecondes, la masquaient 900 millisecondes, puis la faisaient choisir sur un cercle chromatique. Les réponses s'éloignaient des frontières entre catégories pour se rapprocher de leur centre, même sans délai.
• Olkkonen, McCarthy et Allred (2014), avec des délais de 0,4 à 4 secondes, ont trouvé des estimations de teinte attirées vers la moyenne de la série vue.
• La synthèse d'Allred et Olkkonen (2015) relève un consensus : la variabilité augmente pendant les quelques secondes de la mémoire iconique et de la mémoire de travail, puis plafonne. L'existence d'un biais systématique propre à la mémoire reste débattue.
• Dans une thèse de doctorat, Laws (2000) a fait travailler 52 étudiants sur écran d'ordinateur. Les erreurs portaient d'abord sur la clarté, puis sur la saturation, et le moins sur la teinte.

Ces résultats éclairent la mémoire visuelle et la perception des couleurs en général. Ils viennent du laboratoire et ne prédisent pas un score à ce jeu.

Le plateau garde le même gris neutre en thème clair comme en thème sombre : sRGB 128, 128, 128, soit #808080. Une couleur ne paraît en effet pas identique sur un fond blanc et sur un fond noir, un effet appelé contraste simultané.

Le jeu calcule l'écart sur les valeurs sRGB qu'il envoie à l'écran. Selon le module CSS Color 4 du W3C, le sRGB est l'espace de couleur par défaut du web. Ce que l'œil reçoit dépend pourtant de l'appareil ; l'écart affiché reste donc une estimation.

Plusieurs réglages déplacent les couleurs. Apple décrit Night Shift comme une fonction qui décale l'affichage vers des tons plus chauds, et True Tone modifie lui aussi le rendu. Microsoft présente de son côté l'éclairage nocturne de Windows, qui réchauffe les couleurs le soir.

Un écran non étalonné, le mode sombre ou une faible luminosité de l'écran modifient aussi la couleur perçue. Deux scores obtenus sur deux appareils ne se comparent donc pas exactement, ce que rappelle la note placée sous le jeu.

Ce jeu ne mesure rien de médical et ne remplace pas un test de daltonisme : il ne contient pas de planches d'Ishihara et ne pose aucun diagnostic. Pour distinguer deux nuances voisines plutôt que de retenir une couleur, le jeu trouver la couleur différente propose un autre exercice.