Générer une Couleur Aléatoire à distinguer à l'Homme
Je suis en train de générer aléatoirement une couleur en hexadécimal, en javascript.
Cependant les couleurs sont générées, sont presque impossibles à distinguer de l'autre.
Est-il un moyen de l'améliorer?
Ici c'est le code que j'utilise:
function randomColor(){
var allowed = "ABCDEF0123456789", S = "#";
while(S.length < 7){
S += allowed.charAt(Math.floor((Math.random()*16)+1));
}
return S;
}
J'ai entendu quelque chose à propos de LGV et HSV modèle de couleur mais ne peut pas obtenir
pour travailler dans mon code. S'il vous plaît aider.
Merci d'Avance
- avez-vous quelques exemples de codes qui ont été générés? rappelez-vous que les codes hex suivre certaines conventions
- Que signifie exactement "méconnaissable" signifie ici? Je veux dire, sont les pixels de l'éclairage dans des moyens tels que vos yeux ne peuvent percevoir le rayonnement?
- Les lunettes de protection, ils ne font rien!
- fondamentalement, je suis en utilisant ces couleurs dans la coloration des nœuds d'un graphe. Mais lors de l'affichage sur un projecteur de nombreux nœuds, l'air presque identiques.
- Vous devriez peut-être ajouter plus d'écart entre les couleurs de la "liberté". Peut-être autoriser uniquement l'abréviation des éléments de couleur: #aaa, #bbb, #ccc, #000, n ° 333, etc
- Il est un peu juste de l'étude sur la différenciation de couleur. Surtout dans HCI recherche. en.wikipedia.org/wiki/Color_difference s'agit d'une bonne introduction.
- si vous avez généré #A00000 et #A10000 les couleurs est étonnamment similaires.
- Permettant seulement d'abréviation couleurs fait le travail, mais cela augmente également la répétition de la même couleur.
- Ensuite, créer un tableau de "utilisé" des couleurs qui ne peuvent pas être utilisés à nouveau. Vérifier leur existence, si elle est disponible, utilisez-la et collez-la dans le tableau. Laver rincer répéter.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser un ensemble fixe de couleurs, tels que ceux énumérés dans le jquery.color.js plugin.
Liste des couleurs de jquery.color.js plugin:
Le reste est tout simplement prélèvement aléatoire d'une propriété d'un objet Javascript.
À l'aide de
Colors.random()
pourrait vous obtenir un lisible par l'homme de couleur. J'ai même alimenté par un exemple ici.La meilleure façon de choisir au maximum de couleurs différentes serait d'utiliser LGV valeurs au lieu de RVB et de manipuler la Teinte, car il a une valeur de 0 à 360 valeur et s'enroule autour de (0, est de couleur rouge, et est donc 360);
si vous avez besoin de 10 à distinguer les couleurs, vous pouvez diviser 360 par 10, puis choisissez la couleur individuelle en multipliant la valeur par l'indice (base zéro).
Voici un exemple de fonction qui vous permet de choisir une couleur à partir de :
De cette façon, vous pouvez rendre aléatoire la sélection de la couleur par randomisation de l'index, mais les couleurs seront toujours dans la même palette.
Cela permet de sélectionner une couleur aléatoire à partir d'une palette de 10:
et il en sera de ce:
ou vous pouvez choisir une couleur dans la palette, comme 9 de couleur (index 8) de la palette de 13:
Ici un violon pour jouer avec: http://jsfiddle.net/2UE2B/
Je sais je suis très en retard pour ce parti, mais je l'ai écrit plus élaborée de fonction pour générer un ensemble de contraste des couleurs aléatoires pour un autre projet. Ils sont à la fois (au moins un peu), attrayant et vraiment aléatoire (non basées sur les couleurs prédéfinies) mais mon code est un peu plus compliquée que celle de certains autres réponses (donc ce n'est pas juste pour acquérir les notions de base)
C'est pour les utilisateurs qui veulent avoir plus d'une couleur aléatoire sur leur page, et veulent s'assurer qu'aucun des deux couleurs sont trop similaires.
Violon
Veuillez noter que, bien que je ne suis pas le faire dans mon exemple, qu'il peut également être utilisé pour ajouter de nouvelles distinctes, couleurs aléatoires à un ensemble:
Pour génère aléatoirement des couleurs, j'ai tendance à aller pour quelque chose de simple comme ceci:
Je ne suis pas sûr de ce que tu veux dire par méconnaissable. Cette méthode n'offre pas beaucoup de personnalisation, mais au moins il est facile de garder les numéros de trop claires ou trop sombres.
Si vous voulez donner de plus grands écarts entre le générés couleurs, vous pouvez essayer de réduire le nombre de caractères autorisés. J'ai utilisé une méthode comme ça dans le passé où je n'ai utilisé que
0369cf
que la piscine de caractères à extraire. En combinant ceci avec un chèque de doublons tend à donner plus de distinguer les couleurs, ainsi qu'en utilisant les#fff
3-caractère syntaxe.Voici votre fonction d'origine modifié pour utiliser cette méthode:
Essayez ceci:
Le voir en action:
http://jsfiddle.net/3wjgG/1/
Ce que vous dites, c'est que vous ne voulez pas générer de couleurs aléatoires, vous dites que vous voulez générer des couleurs différentes.
Vous pouvez trouver un bon tutoriel sur la façon de le faire ici: http://krazydad.com/tutorials/makecolors.php .
J'ai fait ce violon avec le code du tutoriel montrant comment vous permettrait de générer de non-répétition des couleurs:
http://jsfiddle.net/rGL52/
La seule differnce de l'tutoriel code est que la makegradient() renvoie un tableau de couleurs que vous pouvez appliquer dans votre page.
Je suis d'accord avec toutes les réponses, nous ne savons pas vraiment ce qui vous attend ici...
C'est une possibilité qui peut vous donner le choix entre le rgb(r, g, b) de sortie pour les css des éléments, et l'hex de sortie...
C'est un exemple rapide, vous avez juste à s'adapter à ce projet, mais il fonctionne que sur Firefox :
Ensuite, vous pouvez récupérer la valeur en tant que ci-dessous :
J'espère que cela peut vous aider.
En ce qui concerne meilleur.
Tout d'abord, pourquoi êtes-vous la construction de valeurs hexadécimales à partir de chaînes? Juste utiliser les nombres pour les valeurs, puis sortie avec quelque chose comme
yourNumber.toString(16)
.Ensuite, pour rendre les couleurs plus distincts, ne pas utiliser toute la gamme de 0 à 255 pour chaque élément de couleur, mais peut-être aller dans les sauts de 10, ou 20, ou tout ce que vous avez besoin de générer suffisamment larges différences.
J'ai écrit un petit script appelé SwitchColors.js qui peut être trouvé ici: https://github.com/akulmehta/SwitchColors.js
Le script produit des couleurs plus saturées et la luminosité peuvent être contrôlés. Bien qu'il ne peut pas produire distinguables visuellement les couleurs, il produit une saturation élevée et des couleurs vives qui peut aussi être attrayant.