Génération de schémas de couleurs - théorie et algorithmes
Je vais générer des graphiques et des diagrammes et je recherche une théorie sur les schémas de couleurs et des exemples d'algorithmes.
Exemples de questions:
- Comment générer des couleurs complémentaires ou analogues?
- Comment générer des couleurs pastel, froides et chaudes?
- Comment générer un nombre quelconque de couleurs aléatoires mais distinctes?
- Comment traduire tout cela en triplet hexagonal (couleur web)?
Mon implémentation sera en AS3 mais tous les exemples en pseudocode sont les bienvenus.
En cherchant plus d'informations sur cette question (c'est quelque chose avec laquelle j'ai également eu du mal), j'ai trouvé ce blog . Stefano Mazzocchi explique sa théorie sur les raisons pour lesquelles les programmeurs aspirent à choisir des couleurs pour la conception de l'interface utilisateur et offre des conseils et des liens utiles.
Le premier conseil qu'il offre est ce fait évident qui jette les bases de la sélection des teintes et des saturations:
Deux informations avec le même contraste par rapport à leur arrière-plan seront perçues au même niveau d'importance (toutes choses étant égales par ailleurs), tandis qu'un plus grand contraste identifie plus d'importance et moins de contraste identifie moins d'importance.
Cela offre le premier indice sur la façon de choisir les couleurs pour le premier plan et l'arrière-plan - les informations moins importantes devraient utiliser un contraste plus faible et les informations plus importantes devraient utiliser un contraste plus élevé.
Le premier lien est Color Scheme Designer , un site similaire à Kuler. Comme Kuler, c'est un outil interactif pratique, mais il n'offre aucune idée de la façon dont les couleurs doivent être choisies, c'est-à-dire quels jaunes fonctionnent avec quels verts ou bleus, etc.
Le lien suivant qu'il propose est un site Web du laboratoire de recherche sur l'utilisation des couleurs de la NASA intitulé tilisation de la couleur dans les graphiques d'affichage des informations . Ce site fournit beaucoup plus d'informations sur la façon de choisir des couleurs pour un contraste approprié, etc., et répertorie les formules mathématiques pour mesurer des choses comme le contraste. Je n'ai pas encore trouvé de code SW ou d'algorithmes de pseudo-code sur ce site, mais je n'ai regardé que quelques pages. Stefano souligne également que le NASA Color Lab utilise le Munsell Color System , un système similaire au HSV mais pondéré pour refléter plus précisément la perception humaine de la couleur plutôt que les propriétés mesurables de la couleur.
Un dernier lien mentionné dans le blog de Stefano est un site appelé Color Trends + Palettes :: COLOURlovers . Ce site n'offre pas plus d'aide pour trouver un algorithme pour choisir des couleurs que Color Scheme Designer ou Kuler, mais il met l'accent sur la qualité moins mesurable des changements actuels dans notre plaisir fugace de certaines couleurs et palettes. Cela vaut la peine d'être visité si vous souhaitez que votre interface utilisateur reflète les dernières tendances.
Encore une fois, consultez le site Web de la NASA et lisez quelques-unes des pages, en particulier celles sur Color Science , et vous devriez être en mesure de trouver un algorithme pratique pour choisir des couleurs qui fonctionnent ensemble et fournissent le contraste souhaité.
EDIT: Je vais ajouter des liens utiles supplémentaires dans ce domaine au fur et à mesure que je les trouve.
En ce qui concerne les outils de génération de couleurs, j'aime http://kuler.Adobe.com le meilleur.
Lorsque vous créez une palette de couleurs (5 couleurs) sur le site, vos options sont Analogique, Monochromatique, Triade, Complémentaire, Composé et Nuances. Bien sûr, vous pouvez personnaliser vos couleurs au lieu de les générer automatiquement. Chaque bloc de couleur vous montre les valeurs numériques en RVB et hexadécimal (ainsi qu'en CMJN/HSV/Lab).
Comment générer des couleurs complémentaires ou analogues?
Cela implique un peu plus de connaissances sur la théorie des couleurs. Vous pouvez consulter une explication de Nice (de base) ici . Voir les roues chromatiques.
Comment générer des couleurs pastel, froides et chaudes?
En général, les couleurs pastel sont des "couleurs douces". Ce sont le spectre supérieur et inférieur d'une teinte. Voir la section générée par l'utilisateur couleur pastel de Kuler.
Comment générer un nombre quelconque de couleurs aléatoires mais distinctes?
Pour votre objectif de cartographie, je ne suis pas sûr que des couleurs aléatoires fonctionneraient. Chaque choix de couleur doit être choisi à la main.
Comment traduire tout cela en triplet hexagonal (couleur web)?
La plupart des logiciels graphiques affichent des valeurs hexadécimales pour les couleurs. Hex est une chaîne RVB composée de ## (rouge), ## (vert), ## (bleu).
Par exemple, le rouge pur est FF0000, le bleu pur est # 0000FF. Le violet (vous obtenez en mélangeant le rouge et le bleu) est # FF00FF.
Puisque vous allez créer des graphiques, je vous recommande de visiter les blogs suivants pour vous inspirer:
Si vous avez le temps, lisez Leçons de théorie des couleurs
Une idée que j'ai en tête depuis un moment est de générer des couleurs aussi différentes que possible (dans certaines limites) pour autant de couleurs que nécessaire. Le tracas supplémentaire étant que si j'ai besoin de quelques couleurs supplémentaires plus tard pour le même graphique (peut-être quelques barres supplémentaires ajoutées), elles doivent s'inscrire dans le même schéma, en gardant les couleurs existantes identiques.
L'idée que j'ai eue est un tour de passe-passe. Imaginez un cercle de couleurs (peut-être chacune étant une teinte différente avec la même saturation et la même luminosité, bien que vous puissiez définir n'importe quel cercle à travers n'importe quel espace colorimétrique). Au lieu de donner un angle en degrés pour ce cercle, ayez une plage de zéro à 255. En binaire, c'est 00000000 à 11111111. Ajoutez un à un 8 bits 255 et il déborde à zéro, donc il agit naturellement comme une "valeur circulaire" (en termes techniques, l'addition et la soustraction sont modulo 256).
L'astuce consiste à sélectionner la couleur zéro, la couleur une, etc., pour inverser les nombres en bits. Pour ce faire en C, j'utiliserais ...
value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);
Ainsi, la séquence 0, 1, 2, 3, 4 est transformée en 0, 128, 64, 192, 32.
Le fait est que vous avez 256 couleurs distinctes, et les premières sont très largement espacées, les dernières étant moins espacées et remplissant les espaces (64 est à mi-chemin entre 0 et 128, 32 à mi-chemin entre 0 et 64 etc).
N'importe quelle largeur de bit pour un "angle" particulier fonctionnera si vous adaptez le bit-reverse, et bien sûr vous pouvez exécuter plusieurs cycles à la fois pour différents paramètres de la couleur (peut-être que la teinte tourne rapidement, mais la saturation tourne plus lentement).
Cela ne laisse que la question de savoir comment vous mappez vos "angles" à des nombres RVB particuliers ou autre chose, ce que je ne suis pas un expert - oh, et la question de savoir si ActionScript prend en charge le bidouillage du bit.
Il y a une question intéressante sur le débordement de pile " Fonction pour créer des roues de couleur " à ce sujet. Vous pouvez également lire l'un des papiers recommandés (PDF).
Cette question m'a fasciné alors j'ai commencé à faire de la recherche sur Google. :) Ne vous attendez pas à une réponse basée sur l'expérience.
Fondamentalement, pour faire des calculs avec des couleurs, il est préférable de faire des opérations sur une roue chromatique, qui est représentée au format HSL .
L'auteur de cet article a eu la gentillesse de fournir des informations sur la conversion de RVB en HSL et un exemple de code sur la façon de calculer les couleurs complémentaires.
Si vous êtes chanceux, vous n'aurez pas besoin de comprendre tout cela, si l'une des bibliothèques AS3 maladroitement nommées suivantes fonctionne pour vous.
J'ai utilisé le code suivant. Remarque: il n'utilise aucune théorie sur le fonctionnement de l'œil/cerveau, je voulais juste pouvoir créer un palais de couleurs tel que rouge + vert + bleu = 1, et les couleurs sont à peu près également espacées. Le paramètre "moi" est la couleur sur un nombre total de couleurs possibles. Cela fonctionne à environ 91 ish num. Notez que je dois exécuter de zéro à num-1. D'autres choses sont possibles, la contrainte donnée ci-dessus est assez arbitraire, mais au moins elle génère des couleurs distinctes - en supposant que vous n'en avez pas besoin de trop.
void select_color(int me,int num){
int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
int j,nrows=0,irow=0,jcol=0;
float del,red,grn,blu;
// we build a red/green triangle with an area>=num
for(j=0;j<14;j++)if(me>=s[j])irow=j;
for(j=13;j>0;j--)if(num<=s[j])nrows=j;
jcol=me-s[irow];
del=1./(nrows-.9);
red=1.-del*irow;
grn=del*jcol;
blu=1.-red-grn;
glColor3f(red,grn,blu);
}
Encore une fois, il n'utilise pas de théorie des couleurs, il n'y a donc aucune garantie que la distance soit optimisée dans n'importe quel wat, surtout si vous êtes concerné par un utilisateur occasionnel souffrant de daltonisme partiel.
Vous pouvez également simplement définir les variables de couleur primaire sur des nombres aléatoires, mais elles sont encore moins susceptibles de former un ensemble visuellement distinct.
J'ai toujours aimé les utilitaires en ligne de VisiBone car vous pouvez sélectionner plusieurs couleurs et évaluer de manière interactive à quel point elles s'affrontent: http://www.visibone.com/colorlab/
Je dis à quel point ils s'affrontent parce que je connais le contraste des couleurs tel qu'il s'applique à l'art "analogique" et j'ai été surpris par la façon dont les couleurs que j'ai choisies se sont heurtées les unes aux autres dans l'art numérique. (De toute évidence, je ne suis pas un designer)
Dans le passé, je l'ai fait en sélectionnant à la main une vingtaine de couleurs, plutôt qu'en essayant de les générer. À moins que vos graphiques ne soient très complexes, vous n'en avez généralement pas besoin de plus. Cette approche, bien que simple, vous permet également d'attribuer la même couleur aux mêmes facteurs dans votre graphique (par exemple, vous pouvez toujours faire des "ventes" la même couleur, ce qui rend les graphiques plus faciles à interpréter).
J'aime échantillonner les couleurs de photos. En tant que designer, je fais cela manuellement. En tant que programmeur, je choisis généralement un pixel aléatoire. Si vous voulez plus de contrôle, vous pouvez créer vos propres "photos" qui respectent un certain ensemble de règles.