Erzeugung von Farbschemata - Theorie und Algorithmen [geschlossen]

28

Ich werde Diagramme und Grafiken erstellen und suche nach einer Theorie zu Farbschemata und Algorithmusbeispielen.

Beispielfragen:

  • Wie werden Komplementär- oder Analogfarben erzeugt?
  • Wie man Pastellfarben, kalte und warme Farben erzeugt?
  • Wie kann man eine beliebige Anzahl zufälliger, aber unterschiedlicher Farben erzeugen?
  • Wie überträgt man das alles auf das Hex-Triplett (Webfarbe)?

Meine Implementierung wird in AS3 sein, aber alle Beispiele im Pseudocode sind willkommen.

daniel.sedlacek
quelle
Ich habe mehr recherchiert und experimentiert, nur um zu bestätigen, dass es wirklich auf die subjektive Wahrnehmung einer Farbe ankommt, nicht auf eine physikalische Eigenschaft des reflektierten Lichts. Das Munsell-Farbsystem ist der Schlüssel. Es ist jedoch schade, dass ich das Kopfgeld nicht aufteilen kann, da @Steven Jeuris mir sehr mit den Links zu den Bibliotheken Colorjizz und Mojocolor geholfen hat. Vielen Dank an alle für Ihre Hilfe.
Daniel.sedlacek
Stark relevante Stapelüberlauf- Frage mit interessanten Antworten: " Wie werden automatisch N" unterschiedliche "Farben erzeugt? "
Alexey Popkov
Eine weitere relevante Frage von gamedev, ebenfalls mit interessanten Antworten: Gibt es ein optimales
Frepa

Antworten:

15

Auf der Suche nach weiteren Informationen zu dieser Frage (mit der ich auch zu kämpfen hatte) habe ich diesen Blog gefunden . Stefano Mazzocchi erklärt seine Theorie, warum Programmierer beim Auswählen von Farben für das UI-Design nicht mithalten können, und bietet einige hilfreiche Ratschläge und Links.

Der erste Ratschlag, den er gibt, ist diese offensichtliche Tatsache, die die Grundlage für die Auswahl von Farbtönen und Sättigungen bildet:

Zwei Informationen mit dem gleichen Kontrast zu ihrem Hintergrund werden auf der gleichen Wichtigkeitsebene wahrgenommen (alle anderen Dinge sind gleich), während mehr Kontrast mehr Wichtigkeit und weniger Kontrast weniger Wichtigkeit kennzeichnet.

Dies ist der erste Hinweis, wie Sie Farben für den Vordergrund und den Hintergrund auswählen können. Weniger wichtige Informationen sollten einen geringeren Kontrast und wichtigere Informationen einen höheren Kontrast aufweisen.

Der erste Link führt zu Color Scheme Designer , einer Seite ähnlich wie Kuler. Wie Kuler ist es ein praktisches interaktives Werkzeug, bietet jedoch keinen Einblick, wie Farben ausgewählt werden sollten, dh welche Gelbtöne mit welchen Grüntönen oder Blautönen funktionieren usw.

Der nächste Link, den er anbietet, ist eine Website des NASA Color Usage Research Lab mit dem Titel Using Color in Information Display Graphics . Diese Site bietet viel mehr Informationen zum Auswählen von Farben für den richtigen Kontrast usw. und listet die mathematischen Formeln zum Messen von Dingen wie Kontrast auf. Ich habe noch keinen SW-Code oder Pseudo-Code-Algorithmus auf dieser Site gefunden, aber ich habe nur ein paar Seiten angesehen. Stefano weist auch darauf hin, dass das NASA-Farblabor das Munsell- Farbsystem verwendet , ein HSV-ähnliches System , das jedoch gewichtet ist, um die menschliche Farbwahrnehmung genauer widerzuspiegeln als messbare Farbeigenschaften.

Ein letzter Link, der in Stefanos Blog erwähnt wird, ist eine Site namens Color Trends + Palettes :: COLOURlovers . Diese Site bietet keine bessere Hilfe beim Auffinden eines Algorithmus zum Auswählen von Farben als Color Scheme Designer oder Kuler, sondern hebt die weniger messbare Qualität der aktuellen Änderungen in unserem flüchtigen Genuss bestimmter Farben und Paletten hervor. Es ist einen Besuch wert, wenn Sie möchten, dass Ihre Benutzeroberfläche die neuesten Trends widerspiegelt.

Schauen Sie sich noch einmal die NASA-Website an und lesen Sie einige der Seiten dort durch, insbesondere die zu Color Science , und Sie sollten in der Lage sein, einen funktionsfähigen Algorithmus für die Auswahl von Farben zu finden, die zusammenarbeiten und den gewünschten Kontrast liefern.

BEARBEITEN: Ich werde zusätzliche hilfreiche Links in diesem Bereich hinzufügen, sobald ich sie finde.

  1. Interaktiver genetischer Algorithmus für Farben.pdf
  2. Ein wahrnehmbarer Farbsegmentierungsalgorithmus.pdf
  3. Ein Leitfaden zum Kombinieren von Farben und Farbschemata für großartiges Webdesign.html
Oosterwal
quelle
Ich habe mehr recherchiert und experimentiert, nur um zu bestätigen, dass es wirklich auf die subjektive Wahrnehmung einer Farbe ankommt, nicht auf eine physikalische Eigenschaft des reflektierten Lichts. Das Munsell-Farbsystem ist der Schlüssel. Es ist jedoch schade, dass ich das Kopfgeld nicht aufteilen kann, da @Steven Jeuris mir sehr mit den Links zu den Bibliotheken Colorjizz und Mojocolor geholfen hat. Vielen Dank an alle für Ihre Hilfe.
Daniel.sedlacek
9

Was die Tools zur Farberzeugung betrifft , gefällt mir http://kuler.adobe.com am besten.

Bildbeschreibung hier eingeben

Wenn Sie auf der Site eine Farbpalette (5 Farben) erstellen, stehen folgende Optionen zur Verfügung: Analog, Monochrom, Triade, Komplementär, Zusammengesetzt und Schattiert. Natürlich können Sie Ihre Farben anpassen, anstatt sie automatisch zu generieren. Jeder Farbblock zeigt Ihnen die numerischen Werte in RGB und Hex (sowie CMYK / HSV / Lab).

Wie werden Komplementär- oder Analogfarben erzeugt?

Dies beinhaltet etwas mehr Kenntnisse in der Farbtheorie. Sie können sich hier eine nette (grundlegende) Erklärung ansehen . Siehe die Farbräder.

Wie man Pastellfarben, kalte und warme Farben erzeugt?

Im Allgemeinen sind Pastellfarben "weiche Farben". Sie sind das höhere und niedrigere Spektrum einer Tönung. Siehe den von Kuler erstellten Abschnitt über Pastellfarben .

Wie kann man eine beliebige Anzahl von zufälligen, aber unterschiedlichen Farben erzeugen?

Für Ihre Diagrammzwecke bin ich nicht sicher, ob zufällige Farben funktionieren würden. Jede Farbe sollte von Hand ausgewählt werden.

Wie überträgt man das alles auf das Hex-Triplett (Webfarbe)?

Die meisten Grafikprogramme zeigen Hexadezimalwerte für Farben an. Hex ist eine RGB-Zeichenfolge aus ## (rot), ## (grün), ## (blau).

Zum Beispiel ist reines Rot FF0000, reines Blau # 0000FF. Lila (Sie erhalten durch Mischen von Rot und Blau) ist # FF00FF.

Da Sie Diagramme erstellen, empfehle ich, die folgenden Blogs zu besuchen, um Inspirationen zu erhalten:

http://infosthetics.com

http://flowingdata.com

Wenn Sie Zeit haben, lesen Sie die Lektionen in Farbtheorie durch

Jin
quelle
Vielen Dank für den langen Kommentar, der aber keine meiner Fragen beantwortet. Ich muss wirklich zufällige Farben erzeugen, kuler ist cool, aber für mich nutzlos und ich syndiziere diese Blogs :).
daniel.sedlacek
Dieser Link "Wissen über Farbtheorie" definiert die Primärfarben als Rot, Gelb und Blau. Zuletzt habe ich überprüft, dass die additiven Primärfarben Rot, Grün und Blau und die subtraktiven Primärfarben Cyan, Magenta und Gelb sind. Woher kommt also das rote, gelbe und blaue Set?
Steve314
@ Steve314, das RYB-Modell wird für Kunst verwendet. Siehe: en.wikipedia.org/wiki/RYB_color_model
Jin
Vielen Dank. Ich bin froh, dass ich das als Frage formuliert habe - ich kann so tun, als wäre ich jetzt kein Idiot.
Steve314
4

Eine Idee, die ich mir schon seit einiger Zeit überlegt habe, ist es, so viele Farben wie nötig in möglichst unterschiedlichen (begrenzten) Farben zu erzeugen. Der zusätzliche Aufwand besteht darin, dass wenn ich später ein paar zusätzliche Farben für dasselbe Diagramm benötige (möglicherweise werden ein paar zusätzliche Balken hinzugefügt), diese in dasselbe Schema passen müssen, wobei die vorhandenen Farben gleich bleiben.

Die Idee, die ich mir ausgedacht habe, ist ein kleiner Trick. Stellen Sie sich einen Farbkreis vor (möglicherweise hat jeder einen anderen Farbton mit der gleichen Sättigung und Helligkeit, obwohl Sie jeden Kreis durch einen beliebigen Farbraum definieren können). Anstatt für diesen Kreis einen Winkel in Grad anzugeben, haben Sie einen Bereich von Null bis 255. In der Binärdarstellung sind dies 00000000 bis 11111111. Fügen Sie Eins zu einem 8-Bit-Wert 255 hinzu, und der Wert läuft wieder auf Null über, sodass er auf natürliche Weise als "Kreiswert" fungiert. (In technischer Hinsicht ist Addition und Subtraktion modulo 256).

Der Trick ist, wenn Sie die Farbe Null, Farbe Eins usw. auswählen, um diese Zahlen bitweise umzukehren. Um das in C zu machen, würde ich ...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

So wird die Sequenz 0, 1, 2, 3, 4 in 0, 128, 64, 192, 32 transformiert.

Der Punkt ist, dass Sie 256 verschiedene Farben haben und die frühesten sehr weit auseinanderliegen, wobei die späteren weniger weit auseinanderliegen und die Lücken füllen (64 liegt auf halbem Weg zwischen 0 und 128, 32 liegt auf halbem Weg) zwischen 0 und 64 etc).

Jede Bitbreite für einen bestimmten "Winkel" funktioniert, wenn Sie die Bitumkehrung anpassen, und natürlich können Sie mehrere Zyklen gleichzeitig für verschiedene Parameter der Farbe ausführen (möglicherweise dreht sich der Farbton schnell, die Sättigung dreht sich jedoch langsamer).

Das lässt nur die Frage offen, wie Sie Ihre "Winkel" bestimmten RGB-Zahlen zuordnen oder was auch immer, für die ich kein Experte bin - oh, und ob ActionScript Bit-Fiddling unterstützt.

Steve314
quelle
Faszinierender Trick! +1. Aber eine Warnung für ähnliche, interessante Fragen auf gamedev.stackexchange und Stackoverflow : die Wahrnehmung von Farbe ist nicht linear, so dass die gleiche Winkeländerung als eine große Veränderung für einige Farben aussehen kann und eine sehr kleine Veränderung für andere.
Frepa
@Frepa - wahr, es sei denn, Sie achten sorgfältig darauf, wie Sie mindestens RGB zuordnen - eine triviale Zuordnung zu RGB würde wahrscheinlich für die meisten Zwecke keine guten Ergebnisse liefern. Ich bin mir des Problems bewusst, aber wie gesagt, ich bin kein Experte darin - ich hätte wahrscheinlich zumindest sagen sollen, dass das Problem verschiedene Farbräume und Konvertierungen zwischen ihnen beinhaltet.
Steve314
3

Dazu gibt es eine interessante Stapelüberlauf-Frage " Funktion zum Erstellen von Farbrädern ". Vielleicht möchten Sie auch eines der empfohlenen Dokumente lesen (PDF).

Gary Rowe
quelle
Ich habe den Unterschied zwischen SE und Programmierern ( meta.stackexchange.com/questions/68384/… ) speziell geprüft, bevor ich diese Frage gestellt habe :). Danke, ich werde das überprüfen, aber ich halte es nicht für eine Antwort auf meine Frage. PS: +1
daniel.sedlacek
2

Diese Frage faszinierte mich und ich fing an zu googeln. :) Erwarten Sie keine erfahrungsbasierte Antwort.

Grundsätzlich empfiehlt es sich, für Berechnungen mit Farben ein Farbrad zu verwenden, das im HSL-Format dargestellt wird .

Der Autor dieses Beitrags hat freundlicherweise einige Informationen zur Konvertierung von RGB in HSL sowie einen Beispielcode zur Berechnung von Komplementärfarben bereitgestellt.

Wenn Sie Glück haben, müssen Sie nichts davon verstehen, wenn eine der folgenden ungeschickten AS3-Bibliotheken für Sie funktioniert.

Steven Jeuris
quelle
Inzwischen habe ich auch mehr recherchiert und bin zu dem gleichen Schluss gekommen! (Außer ich bevorzuge HSV gegenüber HSL). Danke für die Links, das Colorjizz sieht super aus! ps: +1
daniel.sedlacek
1

Ich habe den folgenden Code verwendet. Hinweis: Es wird keine Theorie darüber verwendet, wie das Auge / Gehirn funktioniert. Ich wollte nur in der Lage sein, einen Farbpalette mit Rot + Grün + Blau = 1 zu erstellen, und die Farben sind ungefähr gleichmäßig verteilt. Der Parameter "ich" gibt an, welche Farbe von insgesamt einer Anzahl möglicher Farben verwendet wird. Es funktioniert um ca. 91 ish zu num. Beachten Sie, dass ich von null bis num-1 laufen sollte. Andere Dinge sind möglich, die oben angegebene Einschränkung ist ziemlich willkürlich, erzeugt aber zumindest unterschiedliche Farben - vorausgesetzt, Sie brauchen nicht zu viele von ihnen.

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);
}

Auch hier wird keine Farbtheorie verwendet, sodass es keine Garantie dafür gibt, dass die Entfernung in jedem Wasser optimiert wird, insbesondere wenn es sich um gelegentliche Benutzer mit teilweiser Farbblindheit handelt.

Sie können die Primärfarbvariablen auch einfach auf Zufallszahlen festlegen, aber es ist noch unwahrscheinlicher, dass sie einen visuell eindeutigen Satz bilden.

Omega Centauri
quelle
0

In der Vergangenheit habe ich dies getan, indem ich 20 oder mehr Farben von Hand ausgewählt habe, anstatt zu versuchen, sie zu generieren. Sofern Ihre Grafiken nicht sehr komplex sind, benötigen Sie normalerweise nicht mehr. Mit dieser einfachen Methode können Sie auch denselben Faktoren in Ihrem Diagramm dieselbe Farbe zuweisen (z. B. können Sie "Verkäufe" immer in derselben Farbe anzeigen, sodass die Diagramme leichter zu interpretieren sind).

GroßmeisterB
quelle
0

Ich probiere gerne Farben von Fotos aus . Als Designer mache ich das manuell. Als Programmierer wähle ich normalerweise ein zufälliges Pixel. Wenn Sie mehr Kontrolle wünschen, können Sie Ihre eigenen 'Fotos' erstellen, die einem bestimmten Regelsatz entsprechen.

Les
quelle
0

Ich habe VisiBones Online-Dienstprogramme immer gemocht, da Sie mehrere Farben auswählen und interaktiv bewerten können, wie stark sie miteinander in Konflikt stehen: http://www.visibone.com/colorlab/

Ich sage, wie stark sie kollidieren, weil ich mit dem Farbkontrast vertraut bin, der für "analoge" Kunst gilt, und ich war überrascht, wie stark die von mir ausgewählten Farben in der digitalen Kunst miteinander kollidieren. (Klar bin ich aber kein Designer)

frogstarr78
quelle