86 votes

Comment trouver une belle couleur de police si la couleur de fond est connue ?

Il semble qu'il existe un grand nombre d'applications Web de roue chromatique, de sélecteur de couleurs et de comparateur de couleurs, qui vous permettent de choisir une couleur et de trouver quelques autres couleurs qui créeront une disposition harmonieuse lorsqu'elles seront utilisées en combinaison. Cependant, la plupart d'entre elles se concentrent uniquement sur les couleurs d'arrière-plan et tout texte imprimé sur chaque couleur d'arrière-plan (si tant est que du texte soit imprimé dans l'aperçu) est soit noir, soit blanc.

Mon problème est différent. Je connais la couleur de fond que je veux utiliser pour une zone de texte. J'ai besoin d'aide pour choisir deux couleurs (plus il y en a, mieux c'est) que je peux utiliser comme couleurs de police sur ce fond. Le plus important est que la couleur garantisse la lisibilité de la police (le contraste ne doit pas être trop faible, ni trop élevé pour éviter de stresser les yeux) et, bien sûr, que la combinaison de l'avant-plan et de l'arrière-plan soit agréable à regarder.

Quelqu'un a-t-il connaissance d'une telle application ? Je préférerais une application web à tout ce que je dois télécharger. Merci.

39voto

Aaron Digulla Points 143830

Si vous avez besoin d'un algorithme, essayez ceci : Convertissez la couleur de l'espace RVB en espace HSV (teinte, saturation, valeur). Si votre framework UI ne peut pas le faire, consultez cet article : http://en.wikipedia.org/wiki/HSL_and_HSV#Conversion_from_RGB_to_HSL_or_HSV

La teinte est dans [0,360]. Pour trouver la couleur "opposée" (pensez à la roue des couleurs), il suffit d'ajouter 180 degrés :

h = (h + 180) % 360;

Pour la saturation et la valeur, inversez-les :

l = 1.0 - l;
v = 1.0 - v;

Reconvertir en RGB. Cela devrait toujours vous permettre d'obtenir un contraste élevé, même si la plupart des combinaisons sont peu esthétiques.

Si vous voulez éviter la partie "laide", construisez un tableau avec plusieurs "bonnes" combinaisons, trouvez celle qui présente la plus petite différence.

def q(x):
    return x*x
def diff(col1, col2):
    return math.sqrt(q(col1.r-col2.r) + q(col1.g-col2.g) + q(col1.b-col2.b))

et l'utiliser.

15voto

alexmeia Points 3495

Je vous suggère d'essayer quelques couleurs qui vous conviennent (en utilisant l'un des outils suggérés par d'autres dans les réponses si vous le souhaitez), mais n'oubliez pas que daltonisme existe, donc testez votre page à cette adresse :

http://colorfilter.wickline.org/

14voto

J c Points 3498

Vérifiez kuler Il s'agit d'une excellente ressource pour trouver des couleurs qui vont bien ensemble. Il suffit de faire une recherche sur le code couleur HTML (par exemple FF9900). Le résultat ne se limitera pas aux ensembles qui incluent des couleurs à fort contraste avec celle que vous avez sélectionnée, mais les ensembles comporteront généralement une combinaison de couleurs à faible et à fort contraste.

9voto

Michael Madsen Points 30610

Vous pourriez envisager quelque chose comme http://www.snook.ca/technical/colour_contrast/colour.html . Définissez la couleur d'arrière-plan, puis jouez avec la couleur d'avant-plan jusqu'à ce que vous obteniez un résultat satisfaisant (et, idéalement, conforme aux directives du W3C).

4voto

David Arno Points 15499

Avez-vous essayé yaflacolor ? Ce n'est pas tout à fait ce que vous recherchez (il ne vous permet pas de définir à la fois la couleur du texte et celle de l'arrière-plan), mais il affiche les couleurs complémentaires et les versions sombres et claires des couleurs ensemble. À moins que quelqu'un ne trouve exactement ce dont vous avez besoin, cela pourrait au moins vous aider à choisir vos couleurs.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X