Erzeugung von Farbschemata - Theorie und Algorithmen [geschlossen]

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.

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

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

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

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.

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).

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.

• Colorjizz
• Mojocolor

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.

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).

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.

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)