Algorithmus zur Erzeugung von Farbpaletten

Suchen Sie eine schöne Farbpalette für die Website? Kürzlich zu Hause installierte RGB-Hintergrundbeleuchtung oder möchten Sie den Raum in neuen Farben streichen? Oder haben Sie eine Tastatur mit farbiger Hintergrundbeleuchtung gekauft und möchten diese optimal nutzen? Unabhängig davon, in welcher Situation Sie sich befinden, können Sie die Farbschemata ständig anpassen.

Als Programmierer habe ich schnell ein paar Codezeilen geschrieben, um zufällige Farbpaletten zu generieren. Als ich sofort merkte, dass ein solcher Ansatz möglicherweise nicht die besten Ergebnisse liefert, implementierte ich in wenigen Minuten die Schaltfläche „Neu laden“ der Palette. Es schien mir, dass man nur ein wenig Glück und Geduld braucht, um ein großartiges Programm zu erhalten.

Ich habe mich geirrt Zufällige Farbpalettengenerierung ist zum Kotzen. Von Zeit zu Zeit existiert eine schöne Farbe neben einem hässlichen, schmutzigen Braun- oder Gelbton. Farbkollektionen sind immer entweder zu dunkel oder zu hell und kontrastarm, oder die Sets bestehen aus sehr ähnlichen Farben. Es war notwendig, eine andere Lösung zu finden.

Farbräume

Beginnen wir mit der Theorie. Heutzutage werden Farbräume häufig zur Klassifizierung von Farben verwendet:

sRGB

RGB steht für Red Green Blue . So funktionieren Displays: Sie emittieren Licht in drei Farbkanälen, die in unterschiedlichen Anteilen gemischt werden, um alle Arten von Farben zu erzeugen. Der Wert in jedem Kanal variiert von 0 bis 255. R:0, G:0, B:0 (oder # 000000 im hexadezimalen Ausdruck) ist schwarz und R:255, G:255, B:255 (oder #ffffff ) - weiß.

Cie Labor

Der CIE Lab- Farbraum ist breiter als sRGB und umfasst alle vom Menschen wahrgenommenen Farben. Es wurde mit der Erwartung der Universalität der Wahrnehmung geschaffen. Mit anderen Worten, der Abstand zwischen den Farben entspricht dem subjektiven Unterschied: Wenn die Werte der beiden Farben nahe beieinander liegen, sehen sie ähnlich aus. Andererseits werden auch zwei weit voneinander entfernte Farben als völlig unterschiedlich empfunden. In CIE Lab wird mehr Platz für gesättigte Farben als für Dunkel und Hell zugewiesen. Für das menschliche Auge ist sehr dunkles Grün übrigens kaum von Schwarz zu unterscheiden. Außerdem ist dieser Farbraum dreidimensional: L bedeutet Helligkeit (von 0,0 bis 1,0), a und b (von etwa -1,0 bis 1,0) sind Farbkanäle.

HCL

Wenn RGB beschreibt, wie das Display Farben anzeigt, und das CIE Lab, wie wir sie wahrnehmen, ist HCL der Farbraum, der am genauesten beschreibt, wie wir über Farben denken. Es ist auch dreidimensional, H steht für Farbton (0 bis 360 Grad), steht für Chroma und L steht für Luminanz (beide Parameter werden von 0,0 bis 1,0 gemessen).

Ich empfehle, CIE Lab für Berechnungen und HCL für die Darstellung von Paletten für den Benutzer zu verwenden. Bei Bedarf können Sie die Werte aus diesen Leerzeichen in RGB konvertieren.

Farbraumzerlegung

Da ich eine Reihe einzigartiger, individueller Farben benötigen würde, verwerfen wir zuerst diejenigen, die sehr ähnlich aussehen. Der Farbraum ist dreidimensional, und der k-Mittelwert-Clustering- Algorithmus ist perfekt zum Trennen solcher niedrigdimensionaler Datensätze. Er versucht, die Daten (in unserem Fall den Farbraum) in k separate Bereiche zu zerlegen. Und dann wird die Palette aus den zentralen Punkten der Cluster in diesen Bereichen zusammengestellt. Das GIF zeigt eine zweidimensionale Darstellung des Algorithmus im dreidimensionalen Raum des CIE Lab.

Einen Code schreiben

Mit der auf Go implementierten k-means-Methode wird das Problem in nur wenigen Codezeilen gelöst. Bereiten Sie zunächst die Farbwerte im CIE Lab-Bereich vor:

 var d clusters.Observations for l := 0.2; l <= 0.8; l += 0.05 { for a := -1.0; a < 1.0; a += 0.1 { for b := -1.0; b < 1.0; b += 0.1 { d = append(d, clusters.Coordinates{l, a, b}) } } } 

Ich habe bereits einige Parameter aufgegriffen und den generierten Farben bestimmte Einschränkungen auferlegt. In diesem Beispiel werden die Farben zu dunkel (Helligkeit <0,2) und zu hell (Helligkeit> 0,8) ausgegeben.

Erweitern Sie den neu erstellten Farbraum:

 km := kmeans.New() clusters, _ := km.Partition(d, 8) 

Die Partition gibt Slices von acht Clustern zurück. Jeder Cluster hat einen Center , der in einem bestimmten Raum eine separate Farbe hat. Seine Koordinaten können leicht in einen hexadezimalen RGB-Wert umgewandelt werden:

 col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2]) col.Clamped().Hex() 

Denken Sie daran, dass ein CIE Lab breiter als RGB ist. Dies bedeutet, dass einige Lab-Werte nicht in RGB konvertiert werden können. Diese Werte können mit Clamped auf die nächstgelegenen Farben im RGB-Bereich konvertiert werden.

Vollständiger Code

 package main import ( "github.com/muesli/kmeans" "github.com/muesli/clusters" colorful "github.com/lucasb-eyer/go-colorful" ) func main() { // Create data points in the CIE L*a*b* color space // l for lightness, a & b for color channels var d clusters.Observations for l := 0.2; l <= 0.8; l += 0.05 { for a := -1.0; a <= 1.0; a += 0.1 { for b := -1.0; b <= 1.0; b += 0.1 { d = append(d, clusters.Coordinates{l, a, b}) } } } // Partition the color space into 8 clusters km := kmeans.New() clusters, _ := km.Partition(d, 8) for _, c := range clusters { col := colorful.Lab(c.Center[0], c.Center[1], c.Center[2]) fmt.Println("Color as Hex:", col.Clamped().Hex()) } } 

Ein Satz von acht (nicht so) zufälligen Farben, die von diesem Code generiert werden:

Definieren Sie Ihren eigenen Farbraum

Fügen Sie mehr Kontrolle über die Farberzeugung hinzu. Wir können die für weitere Berechnungen verwendeten Daten einfach verwalten und so den Farbraum auswählen, der unseren Anforderungen entspricht. Erstellen Sie eine Pastellpalette:

 func pastel(c colorful.Color) bool { _, s, v := col.Hsv() return 0.2 <= s && s <= 0.4 && 0.7 <= v && v <= 1.0 } for l := 0.0; l <= 1.0; l += 0.05 { for a := -1.0; a <= 1.0; a += 0.1 { for b := -1.0; b <= 1.0; b += 0.1 { col := colorful.Lab(l, a, b) if col.IsValid() && pastel(col) { d = append(d, clusters.Coordinates{l, a, b}) } } } } 

Ein weiterer Farbraum ist HSV . Die Buchstaben im Namen bedeuten Farbton, Sättigung und Helligkeit. In diesem Raum haben Pastellfarben normalerweise eine hohe Helligkeit und eine niedrige Sättigung.

Folgendes ist passiert:



Sie können Farben auch nach Sättigung (Chroma) und Helligkeit filtern, um eine Reihe von „warmen“ Tönen zu erhalten:

 func warm(col colorful.Color) bool { _, c, l := col.Hcl() return 0.1 <= c && c <= 0.4 && 0.2 <= l && l <= 0.5 } 

Ergebnis:

Gamut-Paket

Ich arbeite an einer Bibliothek namens Gamut , in der alle hier beschriebenen Teile in einem praktischen Paket für unterwegs zusammengefasst sind, mit dem Sie Farbpaletten und Themen erstellen und verwalten können. Sie können es bereits versuchen, aber es ist noch in Arbeit.