it-swarm.dev

Erzeugung von Farbschemata - Theorie und Algorithmen

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

Beispielfragen:

  • Wie werden komplementäre oder analoge Farben erzeugt?
  • Wie erzeugt man pastellfarbene, kalte und warme Farben?
  • Wie kann man eine beliebige Anzahl zufälliger, aber unterschiedlicher Farben erzeugen?
  • Wie übersetzt man das alles in das Hex-Triplett (Netzfarbe)?

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

28
daniel.sedlacek

Auf der Suche nach weiteren Informationen zu dieser Frage (mit der ich auch zu kämpfen hatte) fand ich diesen Blog . Stefano Mazzocchi erklärt seine Theorie, warum Programmierer es nicht mögen, Farben für das UI-Design auszuwählen, 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 demselben Kontrast vor ihrem Hintergrund werden auf derselben Wichtigkeitsstufe wahrgenommen (alle anderen Dinge sind gleich), während mehr Kontrast mehr Bedeutung und weniger Kontrast weniger Bedeutung bedeutet.

Dies bietet den ersten Hinweis darauf, wie Farben für Vordergrund und Hintergrund ausgewählt werden - weniger wichtige Informationen sollten einen geringeren Kontrast und wichtigere Informationen einen höheren Kontrast verwenden.

Der erste Link führt zu Color Scheme Designer , einer Site ähnlich wie Kuler. Wie Kuler ist es ein praktisches interaktives Werkzeug, bietet jedoch keinen Einblick in die Auswahl der Farben, d. H. Welche Gelbtöne mit welchen Grün- oder Blautönen usw. funktionieren.

Der nächste Link, den er anbietet, führt zu einer Website des NASA Color Usage Research Lab mit dem Titel Verwenden von Farbe in Grafiken zur Informationsanzeige . Diese Website 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 auf dieser Site noch keinen SW-Code oder Pseudocode-Algorithmus gefunden, aber ich habe nur ein paar Seiten angesehen. Stefano weist auch darauf hin, dass das NASA Color Lab das Munsell Color System verwendet, ein System ähnlich dem HSV, das jedoch so gewichtet ist, dass es die menschliche Wahrnehmung von Farbe genauer widerspiegelt als messbare Eigenschaften von Farbe.

Ein letzter in Stefanos Blog erwähnter Link führt zu einer Site namens Color Trends + Palettes :: COLOURlovers . Diese Website bietet nicht mehr Hilfe bei der Suche nach einem Algorithmus für die Farbauswahl als Color Scheme Designer oder Kuler, betont jedoch die weniger messbare Qualität aktueller Änderungen in unserem flüchtigen Genuss bestimmter Farben und Paletten. Es ist einen Besuch wert, wenn Ihre Benutzeroberfläche die neuesten Trends widerspiegeln soll.

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

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 Algorithmus zur Wahrnehmungsfarbsegmentierung.pdf
  3. Eine Anleitung zum Kombinieren von Farben und Farbschemata für großartiges Webdesign.html
15
oosterwal

Was die Werkzeuge zur Farberzeugung angeht, mag ich http://kuler.Adobe.com am besten.

enter image description here

Wenn Sie auf der Site eine Farbpalette (5 Farben) erstellen, stehen Ihnen die Optionen Analog, Monochrom, Triade, Komplementär, Zusammengesetzt und Schattierungen zur Verfügung. 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äre oder analoge Farben erzeugt?

Dies beinhaltet etwas mehr farbtheoretisches Wissen. Sie können eine nette (grundlegende) Erklärung lesen hier . Siehe die Farbräder.

Wie erzeugt man pastellfarbene, kalte und warme Farben?

Pastellfarben sind im Allgemeinen "weiche Farben". Sie sind das höhere und niedrigere Spektrum einer Tönung. Siehe Kulers vom Benutzer generierter Abschnitt Pastellfarbe .

Wie kann man eine beliebige Anzahl zufälliger, aber unterschiedlicher Farben erzeugen?

Ich bin mir nicht sicher, ob zufällige Farben für Ihre Diagrammzwecke funktionieren würden. Jede Farbauswahl sollte von Hand ausgewählt werden.

Wie übersetzt man das alles in das Hex-Triplett (Netzfarbe)?

Die meisten grafischen Programme zeigen Hex-Werte für Farben an. Hex ist eine RGB-Zeichenfolge, die aus ## (rot), ## (grün), ## (blau) besteht.

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

Da Sie Diagramme erstellen, empfehle ich, die folgenden Blogs zu besuchen, um sich inspirieren zu lassen:

http://infosthetics.com

http://flowingdata.com

Wenn Sie Zeit haben, lesen Sie Lektionen in Farbtheorie

9
Jin

Eine Idee, an die ich schon seit einiger Zeit gedacht habe, ist es, möglichst unterschiedliche (in Grenzen) Farben für so viele Farben wie nötig zu generieren. 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 und die vorhandenen Farben gleich bleiben müssen.

Die Idee, die ich mir ausgedacht habe, ist ein bisschen fummeliger Trick. Stellen Sie sich einen Farbkreis vor (möglicherweise hat jeder einen anderen Farbton mit derselben Sättigung und Helligkeit, obwohl Sie jeden Kreis durch jeden Farbraum definieren können). Anstatt einen Winkel in Grad für diesen Kreis anzugeben, haben Sie einen Bereich von Null bis 255. In Binärform sind das 00000000 bis 11111111. Fügen Sie eins zu einem 8-Bit-255 hinzu, und es läuft wieder auf Null zurück, sodass es natürlich als "Kreiswert" fungiert. (In technischer Hinsicht ist Addition und Subtraktion Modulo 256).

Der Trick besteht darin, wenn Sie die Farbe Null, die Farbe Eins usw. auswählen, um diese Zahlen in Bit umzukehren. Um das in C zu tun, würde ich verwenden ...

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 auseinander liegen, wobei die späteren weniger weit auseinander liegen und die Lücken füllen (64 liegt auf halbem Weg zwischen 0 und 128, 32 liegt auf halbem Weg zwischen 0 und 64 usw.).

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, aber die Sättigung dreht sich langsamer).

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

4
Steve314

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

3
Gary Rowe

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

Um Berechnungen mit Farben durchzuführen, ist es grundsätzlich am besten, Operationen mit einem Farbrad durchzuführen, das im HSL-Format dargestellt wird.

Der Autor von dieser Beitrag war so freundlich, einige Informationen zur Konvertierung von RGB in HSL und Beispielcode zur Berechnung von Komplementärfarben bereitzustellen.

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

2
Steven Jeuris

Ich habe den folgenden Code verwendet. Hinweis: Es wird keine Theorie über die Funktionsweise des Auges/Gehirns verwendet. Ich wollte nur einen Gaumen mit Farben erstellen können, sodass Rot + Grün + Blau = 1 ist und die Farben ungefähr gleichmäßig verteilt sind. Der Parameter "ich" gibt an, welche Farbe von insgesamt einer Anzahl möglich ist. Es funktioniert, um ca. 91 ish zu nummerieren. Beachten Sie, dass ich von Null bis Nummer 1 laufen sollte. Andere Dinge sind möglich, die oben angegebene Einschränkung ist ziemlich willkürlich, erzeugt aber zumindest unterschiedliche Farben - vorausgesetzt, Sie benötigen nicht zu viele davon.

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 nicht garantiert werden kann, dass die Unterscheidbarkeit in jedem Wasser optimiert ist, insbesondere wenn Sie sich mit gelegentlichen Benutzern mit teilweiser Farbenblindheit befassen.

Sie können die Primärfarbvariablen auch einfach auf Zufallszahlen setzen, aber es ist noch weniger wahrscheinlich, dass sie eine visuell unterschiedliche Menge bilden.

1
Omega Centauri

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

Ich sage, wie stark sie zusammenstoßen, weil ich mit dem Farbkontrast in Bezug auf "analoge" Kunst vertraut bin und überrascht war, wie stark die von mir gewählten Farben in der digitalen Kunst miteinander kollidieren. (Natürlich bin ich kein Designer)

0
frogstarr78

In der Vergangenheit habe ich dies getan, indem ich nur ungefähr 20 Farben von Hand ausgewählt habe, anstatt zu versuchen, sie zu generieren. Wenn Ihre Grafiken nicht sehr komplex sind, benötigen Sie normalerweise nicht mehr. Dieser Ansatz ist zwar einfach, ermöglicht es Ihnen jedoch auch, denselben Faktoren in Ihrem Diagramm dieselbe Farbe zuzuweisen (z. B. können Sie "Verkäufe" immer mit derselben Farbe versehen, wodurch die Diagramme leichter zu interpretieren sind).

0
GrandmasterB

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

0
Les