Automatiquement changer la couleur du texte pour assurer la lisibilité
Les utilisateurs peuvent définir la couleur d'arrière-plan d'un bouton grâce à une zone de texte qui accepte RVB hexadécimal: ff00ff
, ccaa22
, etc. J'ai donc besoin de définir la couleur du texte à l'opposé. Pas sûr au sujet de la terminologie (en face de la couleur), mais l'idée est d'assurer la lisibilité.
- Cela va vous aider: stackoverflow.com/questions/1664140/...
- ce qui doit être fait est de convertir cette RVB à la LGV, en complément de la Teinte(hue=teinte+180mod360), et de la convertir en RVB... regarde pour la conversion des codes de mjijackson.com/2008/02/...
- smamatti && tejasva-dhyani: je suis étudiant à la fois des solutions. Semble très prometteur. Merci!
- En fait, qui vient d'être 15 en complément de la valeur hexadécimale...je ne sais pas si il fonctionne ou pas.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez inverser la couleur d'arrière-plan et l'utiliser comme couleur de premier plan. L'algorithme suivant donne des résultats identiques à l'Image "> Réglages > Inverser" commande couleur dans Photoshop:
JS:
CSS:
HTML:
Noter que ce n'est pas un gilet pare-balles de la solution. Les couleurs qui sont près de 50% de la luminosité et/ou d'une saturation ne sera pas produire suffisamment de contraste.
Démo sur jsFiddle
Salaman code est bon, mais parfois son inversion n'est pas assez lisible.
J'utilise YCbCr et il suffit de changer d'échelle de gris.
jsfiddle démo
factor
à 180 eninvertColor
fonction et elle aura fière allure!Je l'ai lié une autre Question à ce sujet dans les commentaires.
JS fonction pour calculer couleurs complémentaires?
Comme Tejasva dit, vous avez besoin de besoin de convertir RVB à la LGV, en complément de la Teinte et de la convertir en arrière.
J'ai mis en œuvre liés réponse d'un échantillon. Veuillez upvote l'affiche originale si cela a été utile pour vous, car ils ont fourni la solution en fait.
Échantillon
http://jsfiddle.net/pLZ89/2/
J'ai eu le même problème une fois, et recueilli de l'information sur internet également à l'aide de Salman Une réponse, je suis venu avec cette fonction, il prend en charge hex, rvb ou rvba
mais je ne pense pas que ce est ce que vous avez besoin, j'ai trouvé quelque chose de plus intéressant, ci-dessous la fonction retournera le blanc ou le noir, il va décider de la sorcière est plus lisible sur la couleur donnée.
Je ne prends pas de crédit pour tout cela, je viens d'avoir inspiré et modifié pour mes besoins.
Sources: L'espace YIQ fonction expliqué
Un peu en retard à la fête, mais de l'OMI, l'ensemble du texte doit être clair ou foncé. Couleur de texte est pour les liens.
Voici un coffeescript fonction que j'ai écrite à décider lequel utiliser:
JS:
Merci pour le post ZetCoby! Dû adapter votre "couleur.substr(" position de tableau pour tenir compte de l'initiale '#'; puis il fonctionnait très bien! vous pouvez également utiliser une couleur.replace('#',"); dans le bloc if...
Vous pouvez utiliser ce schéma simple pour atteindre cet objectif. Il suffit de convertir la couleur de RVB pour le HSV forme. Vous pouvez utiliser cette lien .
Ensuite utiliser ce pseudo-code;
Aussi, vous pouvez diviser [0,1] en plus de pièces. Et au lieu de définir 2 couleurs (someBrightColor,someDarkColor) , de définir plus de couleurs. Ma méthode proposée est "combien de lumière est la couleur de fond , de pth couleur du texte doit être sombre, et vice-versa'.
rgbToHsv() function
accepter la notation décimale[0, 255]
pas hex. Mais en supposant que je peux faire de cette traduction, je ne comprends vraiment pas votre pseudo-code. Veuillez expliquer un peu plus. THX!Voici un très petit moyen de compléter la valeur hexadécimale
//valeur hexadécimale comme "aa00cc"