Ich möchte jedem von 10 Spielern eine eindeutige identifizierende Farbe geben. Gibt es dafür eine optimale Farbpalette? Wie erstelle ich eine?
Jedes Set, das ich mir ausgedacht habe, enthält Farben, die zu ähnlich sind.
Update: Ich wurde unten gefragt, wofür das ist (faire Frage). Jetzt kann ich dir sagen - Windwardopolis und die Farben haben super funktioniert.
multiplayer
color
usability
David Thielen
quelle
quelle
Antworten:
Sie könnten im HSV-Raum äquidistante Farbtonwerte erzeugen:
Es ist jedoch möglich, dass Sie nicht immer 10 Spieler haben. In diesem Fall wäre die Palette nur dann sehr effizient, wenn Sie eine andere Palette für eine andere Anzahl von Spielern generiert hätten. Stattdessen empfehlen einige Autoren , eine Palette mit dem goldenen Schnitt zu erstellen und dabei eine Eigenschaft zu nutzen, die sich aus dem Gleichverteilungssatz ergibt :
Auf diese Weise erhalten Sie eine sehr gute Farbtonverteilung, auch wenn Sie bei 3, 4 oder 7 Spielern anhalten.
Viele irrationale Zahlen reichen aus, aber der goldene Schnitt funktioniert am besten (es wurde bewiesen ).
Schließlich können Sie zwei verschiedene Generierungssequenzen verwenden, um
S
oderV
auch zu optimieren . Zum Beispiel ( edit : Ich habe densqrt
Aufruf für eine bessere Gleichverteilung hinzugefügt ):Update : Die obigen Ergebnisse können verbessert werden, indem eine Korrekturkurve für
H
(ähnlich der Gammakurve für RGB-Komponenten) verwendet wird, die das menschliche visuelle System berücksichtigt. Dies ist die Farbtonkorrekturkurve, die ich mit der CIEDE2000-Metrik berechnet habe :Die Ergebnisse für äquidistante Farbtonwerte sind wie folgt:
Und für die Golden-Ratio-Generierungssequenzen (mit und ohne Optimierungen
V
):Ich werde eine Annäherung der Kurvenformel für die Verwendung in Programmen veröffentlichen, sobald ich eine einigermaßen gute finde.
quelle
Die 8 StarCraft- Farben sind :
Obv. Blizzard sind UI-Genies und haben das Problem untersucht.
Sie ließen Green auf Wüstenkarten als Swap-In für Brown aus, also sind dort technisch gesehen 9 aufgeführt.
Die 12 Warcraft 3 Farben sind:
So sieht das aus:
Wie Sie sehen können, sind sie sehr unterschiedlich und leicht zu unterscheiden. Dunkelgrün ist eigentlich leicht von Blaugrün zu unterscheiden, möglicherweise weil das menschliche Auge am einfachsten Grüntöne unterscheiden kann. Wenn Sie sicher sind, dass es sich bei Ihren Spielern um weibliche Tetrachromaten handelt, können Sie wahrscheinlich alle Farben auswählen.
quelle
Ein paar Leute hier empfehlen, den HSV-Farbraum an 10 gleich weit entfernten Stellen zum Farbton aufzuteilen. Meiner Meinung nach ist das eigentlich keine gute Lösung. Das menschliche Auge nimmt Farbunterschiede im HSV-Spektrum nicht gleichmäßig wahr. Zum Beispiel nimmt das, was wir Orange nennen, einen winzigen Teil der Band ein, wohingegen ein guter Teil von 25% als grün gelten könnte. Es beginnt also mit einer schlechten Prämisse. Schauen Sie sich die erste Reihe von Farben in dieser Antwort an . Die beiden Grüns sind fast nicht zu unterscheiden.
Denken Sie daran, dass Ihre Benutzer über die Farben kommunizieren und sich auf diese beziehen müssen. Vor diesem Hintergrund ist das Starcraft / Warcraft-Thema ein guter Anhaltspunkt. Die Auswahl anhand einer Liste von Crayola-Farben in normalem Englisch ist keine schlechte Idee, da Sie am Ende bekannte, benannte Farben erhalten. Passen Sie dann einfach die Farben so an, dass sie kräftig und gedämpft sind, was auch immer zu Ihrer Ästhetik passt, solange sie noch erkennbar sind, z. B. als Rot, Orange, Gelb, Grün, Blau, Lila, Braun, Grau, Weiß, Schwarz.
Edit: Die Verbindung zwischen Sprache und Farbwahrnehmung ist so interessant, dass ich nur diesen tollen Link teilen wollte:
Die Crayola-Fikation der Welt: Wie wir den Farben Namen gegeben haben, und es hat unseren Verstand über empirischen Eifer durcheinander gebracht
quelle
Ich dachte, ich müsse diesen "Symbol" -Ansatz in eine separate Antwort aufteilen.
Früher, so gehe ich davon aus, brauchten die Leute Flaggen und andere Dinge, um eine Armee in der Ferne leicht identifizieren zu können, damit Sie wissen, ob Sie angreifen oder verteidigen (im Falle von Feinden) oder ob Sie erleichtert sind (im Fall von Verbündeten).
Das ist übrigens genau das, was Sie versuchen. Identifizieren Sie leicht etwas aus der Ferne.
Sie können dies nur mit Farbe tun, aber möglicherweise ist dies mit Farbe und Symbolen besser möglich . Die Verwendung einer Kombination aus Farben und Symbolen hilft farbenblinden Personen , Dinge zu identifizieren, wie viele der oben genannten Personen.
Wenn die Einheiten groß genug sind, können Sie auch 2-4 Farbwappen verwenden.
Das Muster ist leicht zu erkennen, nicht nur eine Farbe. Eine gute Texturierung kann dazu führen, dass das Wappen auf der Brust oder dem Oberarm jeder Einheit ziemlich groß ist.
In der Abbildung oben haben die Helme für verschiedene Einheiten unterschiedliche Geometrien sowie die Schildabzeichen.
Vielleicht interessiert Sie auch die Idee des japanischen Mon , die sehr einfach aussehende "Logos" sind.
Jetzt kennzeichnen Sie Ihre Einheiten im Grunde genommen mit modernen "Marken". StarCraft II tat dies ein wenig mit "Abziehbildern",
aber diese sind im Spiel kaum sichtbar
und werden nicht zur Identifizierung von Einheiten verwendet, sondern vielmehr zur Identifizierung von Farben.
Ich würde auch Flaggen als Inspiration betrachten, insbesondere solche, die kein 3-Streifen-Markenmuster verwenden (diese werden etwas verwirrend). Erwägen:
Diese haben alle einige sehr einfach aussehende und dennoch markante Flaggen.
Beachten Sie auch die Symbole, mit denen die amerikanische Regierung das Verteidigungspersonal identifiziert. Hierbei handelt es sich um monochrome Bilder (die vollständig in Schwarzweiß erstellt werden können). Dies ist also möglicherweise eine großartige Lösung, die farbenblinde Personen nicht ausschließt (verwenden Sie im Grunde genommen Symbole , um Teams zu identifizieren, anstatt Farben).
quelle
Warum das Rad neu erfinden? Es gibt sogar einen Standard für einen Satz von sechzehn Farben, von denen Sie zehn auswählen könnten. Dies ist der ANSI-Satz http://en.wikipedia.org/wiki/ANSI_escape_code#Colors
Die ANSI-Farben sind gleichmäßig auf dem RGB-Würfel verteilt, was meiner Meinung nach besser für dieses Problem geeignet ist als der HSV-Raum.
Wenn Sie die Extreme des RGB-Würfels aufnehmen, erhalten Sie vertraute Farben wie Rot, Blau, Zyan usw. Nach den acht Eckpunkten erhalten Sie alle dazwischen liegenden Punkte an den Rändern.
quelle
Es wird sehr schwierig sein, 10 unterscheidbare Farben zu erstellen. Dies ist ein häufig auftretendes Problem beim Erstellen von Diagrammen oder Diagrammen für viele Werte. Aus diesem Grund werden häufig Farben und Formen oder Kombinationen aus Farben und Hash-Mustern verwendet.
Wenn Sie Marker anzeigen müssen, können Sie 4 Grundfarben (z. B. Rot, Blau, Orange, Schwarz) und vier Grundformen (Quadrat, Kreis, Dreieck, Diamant) verwenden und 16 sehr einfach zu unterscheidende Marker erhalten.
Wenn Sie in Bereichen einfärben, verwenden Sie dieselbe Idee, kombinieren Sie jedoch Farben mit Schraffurmustern in schwarzen oder weißen Linien anstelle von Formen.
Eine andere zu berücksichtigende Sache ist, Farbe nicht als die einzige Weise zu benutzen, die Seite zu erklären. Wenn Sie mit der Maus über einen Bereich fahren, wird dieser möglicherweise hervorgehoben und ein Tooltip mit dem explizit angegebenen Spielernamen angezeigt. Oder vielleicht kann eine Liste der 10 Spieler mit der Maus überfahren werden, und wenn man sich über einem Spielernamen befindet, werden alle Bereiche auf der Karte für diesen Spieler angezeigt.
Denken Sie bei der Auswahl der Farben auch an die Farbenblindheit. Grün und Rot sind beispielsweise möglicherweise nicht unterscheidbar. Unter http://jfly.iam.u-tokyo.ac.jp/color/#select finden Sie eine Reihe von Farbvorschlägen, die für farbenblinde Personen kein Problem darstellen. Eine zusätzliche Ressource ist http://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBest
quelle
Selbst wenn Sie 10 eindeutige Farben erhalten, die von einer Person leicht unterschieden werden können, ist es für eine andere Person möglicherweise schwieriger, diese Gruppe zu unterscheiden.
Beschränken Sie sich auf einen kleineren Satz von Farben und fügen Sie ein unterscheidbares Merkmal hinzu , z. B. einen schwarzen Streifen . Für die Farbpalette ist es wahrscheinlich am besten, sich nicht zu sehr von dem zu entfernen, was die meisten Menschen leicht unterscheiden können: ROYGBIV . Ein einfacher Streifen / kein Streifen auf ROYGBIV bringt Ihnen 14 identifizierende Spielsteine.
Sie müssen sich auch nicht auf einen schwarzen Streifen beschränken. Betrachten Sie die folgende Lösung für die Verdrahtung von 25 Paaren (die genauso gut Streifen statt Paare sein könnten): http://en.wikipedia.org/wiki/25-pair_color_code
quelle
Ich wollte nur einen Verweis auf die Tableau-10-Palette einfügen, die für eine hohe Unterscheidungskraft entwickelt wurde und die in diesem Artikel beschrieben wird:
http://vis.stanford.edu/files/2012-ColorNameModels-CHI.pdf
"Die Tableau-10-Palette bietet die beste Farbwiedergabe und minimale Namensüberlappung."
quelle
Brent Berlin und Paul Kay haben gezeigt, dass sich der Farbraum in nur wenige Grundfarben aufteilen lässt. Dies hängt jedoch von Ihrer Kultur ab, da die Benennung einer Farbe die Unterscheidbarkeit erhöht.
Auf Englisch gibt es 11 Grundfarben: Weiß, Schwarz, Rot, Grün, Gelb, Blau, Braun, Lila, Rosa, Orange und Grau.
Ich mag die Idee, Farbtöne um ein Rad zu wählen, aus den gleichen Gründen nicht wie Matt Montag
quelle
Machen Sie mehr als nur Farben - mit visuellen Darstellungen, die sowohl die Überlieferung als auch den Kunststil und die Farbdarstellung verbessern.
Zum Beispiel verwendet Legend of the Five Rings eine unglaubliche Methode, um zwischen "Farbsätzen" zu unterscheiden.
Eines der schönsten Beispiele, aus denen man lernen kann. Beachten Sie die Hunderte von Möglichkeiten, die sie zwischen den Clans unterscheiden. Es sind nicht nur Primärfarben, sondern auch Sekundär- und sogar Tertiärfarben. Die Farben sind sogar in Frisur, Art der Abnutzung, Art des Charakters, einem Symbol, Flaggen, Banner, Mini-Flaggen auf dem Rücken, Persönlichkeiten enthalten.
Das Beste, was ich daraus machen würde, ist die Kombination mehrerer Farben. Es ist nicht einfach: Blau, Rot, Lila, Braun, Gelb, Grün, Blaugrün.
Es ist eine Kombination aus zwei Farben, wobei beide sehr ausgeprägt sind. Dies kann eine beträchtliche Anzahl zusätzlicher Spieler ermöglichen.
Jeder Clan würde sowohl eine Primärfarbe als auch eine Reihe von Sekundärfarben haben.
"Die Krabbe wurde hauptsächlich mit blaugrauen sowie schwarzen, roten und braunen Farben identifiziert."
Es ist wunderschön, denn egal wie die Person aussah (groß, gebrechlich, Samurai, Zauberer, Bauer), konnte man immer erkennen, aus welchem Clan sie stammten. Es war nicht nur "Rot" für Scorpion, es war ein dunkles Blutrot und SCHWARZ. Während Phoenix Sunburst-Farben hatte: rot, orange, gelb.
Sie würden niemals einen Skorpion mit einem Phönix verwechseln, selbst wenn ihre Farben ähnlich wären und beide viel Rot verwendeten.
quelle
Probieren Sie diesen Farbmischer aus: w3schools.com HTML Color Mixer .
Ich würde Folgendes tun: Wählen Sie eine Farbe für die erste Option. Wählen Sie dann eine für die 2. Option aus, sodass sich die 2. Farbe in Bezug auf die erste genau an der entgegengesetzten Position befindet. Die Farbe an Position: Zeile 1, Zelle 1 hätte also das Gegenteil: Letzte Zeile, Letzte Zelle.
Auf diese Weise erhalten Sie jedes Mal zwei sehr unterschiedliche Farben an den Enden der Mischung. Wiederholen Sie diesen Vorgang fünfmal und wählen Sie immer Farben aus, die weit von der letzten Auswahl entfernt sind.
quelle
Diese Frage hat viele Antworten, aber ich wollte mehr auf die Barrierefreiheit eingehen.
Wenn ich in Ihrem Szenario wäre (ich müsste Farben für eine Reihe von Dingen in einem Spiel auswählen, die von allen beteiligten Spielern als unterschiedlich wahrgenommen werden müssen), wäre mein Hauptanliegen, nicht nur Spieler aufzunehmen, die farbenblind sind, sondern auch Spieler, die Farben haben schlechte Sicht.
Die einzige Lösung für dieses Problem ist meines Wissens nach VALUE CONTRAST . Manche Menschen können nur in Schwarzweiß sehen (Quelle: ein Freund von der Kunsthochschule berichtet, dass er einen Kurs in Farbtheorie besucht und aufgrund einer fehlgeschlagenen Laser-Augenoperation überhaupt keine Farbe wahrnehmen kann). Einige Menschen sind sehbehindert oder teilweise / legal blind. Sie müssen verschiedene Grauschattierungen als Ausgangspunkt , so dass die Farben , die Sie DO wählen sind sichtbar und deutlich für ALLE .
Um all dies zu erreichen und Farben zu erzielen, die gut aussehen, betrachten Sie bitte dieses Bild, das Sie erhalten, indem Sie einen horizontalen Regenbogenfarbverlauf im Farbüberblendungsmodus über einen vertikalen Schwarz-Weiß-Farbverlauf legen (versuchen Sie es selbst, vielleicht mit einer benutzerdefinierten Farbe) andere Steigung als Regenbogen!):
Vom dunkelsten zum hellsten: Schwarz, Blau, Rot, Magenta, Grün, Cyan, Gelb, Weiß.
Können Sie den schwachen Zickzack "reiner Farbe" sehen? DAS ist der natürliche Wert der abgebildeten Farben. Auch bei reinen Farben ist Blau am dunkelsten und Gelb am hellsten. Nutzen Sie diese Informationen wählen Farben , die sowohl die Wertanforderungen für Spieler passen , der farbenblind und / oder Sehschwäche und ästhetisch ansprechend sind , um Menschen, die die volle Majestät der ausgewählten Farben wahrnehmen können.
Hoffe das hilft! : -)
PS Ich möchte sicherstellen, dass Sie diesen Kommentar auch gesehen haben!
quelle
Eine Möglichkeit, die optimale Einstellung in Bezug auf unterscheidbare Farben für eine variable Anzahl von Spielern (ohne Berücksichtigung der Farbenblindheit) sicherzustellen, wäre die Auswahl aus dem HSL- Farbmodell (Farbton, Sättigung und Helligkeit).
Sie wählen eine konstante Helligkeit und Sättigung, abhängig von Ihrer Wahl. Dann verschieben Sie den Farbton der Farbe
360 / playerCount
wie im folgenden Pseudocode:quelle
Ich möchte ein alternatives Farbschema vorstellen:
Dies sind die RGB-Farben (gleiche Reihenfolge) mit den vorgeschlagenen Namen:
Hinweis: Ich habe kein reines Schwarzweiß verwendet, da ich dachte, dass sie möglicherweise als Hintergrund oder Konturen verwendet werden.
Metodologie: Wählen Sie 12 Farben auf der gesättigten Seite des Farbwürfels aus (ich glaube, ich würde mit 12 glücklich sein), betrachten Sie deren Trennung und tweeten Sie dann mit einem Tool zur Simulation von Farbenblindheit. Danach fügte ich ein beinahe weißes, ein beinahe schwarzes hinzu und schlich ein graues, weil ich konnte. Das gab mir 15 Farben. Ich wollte 16 Farben, weil es eine Potenz von 2 ist, und ich dachte, es könnte den Entwicklern die Sache erleichtern. Schließlich fand ich einen Weg, eine 16. Farbe hinzuzufügen, ich musste die anderen dafür bewegen. Dann ... erneut mit dem Tool zur Farbblindheitssimulation prüfen, korrigieren und wiederholen.
Hier sind die verschiedenen Fälle von Farbenblindheit:
Normal:
Protanopie:
Deuteranopie:
Tritanopie:
Protanomalie:
Deuteranomalie:
Tritanomalie:
Achromatopsie:
Achromatomalie:
Nachdem ich eine Weile mit dem Werkzeug zur Simulation von Farbenblindheit gespielt habe, muss ich sagen, dass der Kontrast an erster Stelle steht.
Betrachten Sie beispielsweise die Farben 5 (hellgrün), 7 (grau) und 9 (hellviolett). Sie sehen in einigen Fällen ähnlich aus, insbesondere wenn sie klein und durch eine andere Farbe getrennt sind. Wenn Sie sie jedoch nebeneinander stellen, können Sie sie voneinander unterscheiden. Vergrößern Sie den farbigen Bereich und Sie können sie leichter voneinander unterscheiden. Also ... beim Entwerfen für Farbenblindheit werden nicht nur Farben ausgewählt.
In diesem Sinne ... Wenn Sie eine Kombination aus zwei Farben anstelle einer auswählen, um eine Fraktion darzustellen, ist dies ein langer Weg.
Diese Farben wurden durch eine sehr empirische Methode ausgewählt. Mir ist aufgefallen, dass es sehr wichtig ist, sicherzustellen, dass alle von unterschiedlicher Helligkeit sind. Ich bemerke auch, dass die meisten "Farben" zweimal auftreten (es gibt zwei Grüns, zwei Purpur, zwei Brauns usw.). Tatsächlich ist die vierte Farbe (oliv) die letzte, die ich hinzugefügt habe, und ich entscheide, dass es sich um eine gelbliche Farbe handelt, da es nichts Vergleichbares wie Gelb gibt. Ich nehme an, dass dies die Grundlage für eine systematischere Auswahl von Farben sein kann.
Im Nachhinein sollte ich wahrscheinlich die zweite gelbliche Farbe (oliv) dunkler machen und diesen Helligkeitsfleck für ein Rosa verwenden (siehe 7. Farbe). Warum? Weil es Ihnen mehr Schatten geben würde, mit denen Sie spielen können. Ern ... das ist gut genug und es ist mühsam, alle Bilder zu bekommen.
Nachtrag : Was ich nicht bedacht habe, ist, wie der LCD-Bildschirm die Farben verzerrt, wenn Sie aus dem bevorzugten Winkelbereich herausschauen.
quelle