Comment rendre une couleur identique sur différents arrière-plans?


17

Contexte de la perception des couleurs:

En raison de la nature de l'œil humain et du traitement visuel par le cerveau, il existe une illusion d'optique selon laquelle la même couleur sera différente en fonction de l'arrière-plan .

Il s'agit de l' effet de contraste , illustré ci-dessous - les rectangles centraux sont identiques:

entrez la description de l'image iciSource: Wikimedia

Une illustration (et un rapport) de la NASA rend l'effet de la couleur de l'arrière-plan encore plus évident:

entrez la description de l'image ici

entrez la description de l'image iciSource: Laboratoire de recherche sur l'utilisation des couleurs de la NASA

(Notez comment les deux couleurs les plus hautes de la deuxième image semblent identiques, mais sont en fait complètement différentes.)


Et la conception web?

Ma question concerne la conception de sites Web, en particulier dans ce cas, la couleur du texte du lien sur différents arrière-plans.

Pour une couleur de texte donnée, comment trouver la couleur complémentaire pour la faire apparaître identique sur un certain fond?


Jetons un coup d'œil à un exemple de cette question:

Considérez mon exemple ci-dessous, avec du texte jaune #FFF000sur les arrière-plans suivants:

  • blanc #FFFFFF,
  • noir #000000,
  • et gris #555555.


Comparer les couleurs sur différents arrière-plans pour le texte de conception Web


Comme prévu, ne se ressemble pas du tout. ( Voir et télécharger le fichier .PSD ici. )

Comment pouvons-nous donner la même apparence aux trois? De toute évidence, le texte sur le fond blanc doit être d'un jaune plus foncé et celui sur le gris nécessite des ajustements de teinte / tonalité. (Le texte environnant l'affectera également - mais c'est probablement plus difficile à prendre en compte.)

Cette couleur parfaite peut-elle être calculée d'une manière ou d'une autre, sur la base du Hex, du RGB ou d'un autre système? C'est là que réside le nœud de cette question, car elle serait beaucoup plus efficace que l'approximation manuelle.


Vous devrez utiliser des jaunes. Remarquez dans vos exemples qu'ils ont utilisé des couleurs similaires à celle qu'ils essaient de donner à un look différent.
Hanna

2
@Johannes, que voulez-vous dire?
Baumr

Dans votre premier exemple, les couleurs utilisées étaient toutes des nuances de gris. Dans votre deuxième exemple, votre violet a été rendu plus bleu grâce à l'utilisation d'un violet très brillant. Ensuite, dans votre exemple jaune, vous beurrez le jaune de blancs, de gris et de noirs. Donc, ce que je dis, c'est que vous devez utiliser des jaunes à la place pour que votre jaune apparaisse de la même manière sur différents arrière-plans.
Hanna

J'ai du mal à expliquer cela, je m'excuse.
Hanna

Réponses:


10

Il semble que vous recherchiez l'analogue de couleurs complémentaires , mais dans l' espace de légèreté plutôt que dans la teinte . Pour autant que je sache, aucune telle cartographie générale ne peut exister.

Supposons que vous puissiez compenser l'effet en supposant une corrélation linéaire entre l'arrière-plan et le premier plan, de sorte que lorsque l'arrière-plan s'assombrit, le texte de premier plan s'éclaircit de la même quantité. Je suppose que la teinte reste fixe. Il y aura toujours un point médian auquel l'arrière-plan et l'avant-plan partagent la même couleur.

Par exemple, considérons le noir sur blanc. La légèreté inverse pour les mêmes teintes est blanc sur noir, mais si vous avez essayé de trouver un premier plan pour chaque arrière-plan intermédiaire de la même teinte, à mi-chemin, vous frappez gris sur gris et ne voyez rien du tout.

Pour à peu près la même raison, je ne vois pas qu'une cartographie raisonnablement simple, même avec perte, peut exister.


1
Pour résoudre ce problème, je pense que nous aurions besoin de construire un modèle de l'œil humain (moyen) et de trouver le meilleur ajustement à l'aide d'un algorithme génétique
Baumr

1
@Baumr: Ça pourrait être une bonne thèse :)
Courses de légèreté avec Monica

0

Que diriez-vous de cela: utilisez des gris différents sous différents arrière-plans, peints en blanc et noir, de sorte que les premiers apparaissent les mêmes, mais pas lorsqu'ils sont contre un neutre.

Faites-moi savoir si ces deux ensembles de patchs se ressemblent au-dessus des lignes noires et blanches:

entrez la description de l'image ici

Parce que l'apparence de ces patchs au-dessus d'un gris neutre est illustrée sur cette image:

entrez la description de l'image ici

J'ai utilisé le mode de fusion de calques de GIMP appelé Grain Extract / Merge, qui m'a permis de trouver le gris le plus clair en extrayant un patch neutre d'un autre, puis le plus sombre en fusionnant les deux. En d'autres termes: j'ai trouvé deux gris dont la moyenne additive est neutre.

Avec la couleur sur un fond noir ou blanc, vous pouvez utiliser Grain Merge pour trouver la couleur moyenne de l'additif, et avec Grain Extract le complément de cette dernière.

EDIT: vérifiez cela. Vous pouvez trouver que ces jaunes semblent identiques.

entrez la description de l'image ici

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.