Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 3. Mai 2019

So erstellst du intelligente Farbpaletten mit Colormind

Es ist sicher­lich nicht der ers­te Anwendungsfall, der einem ein­fällt, wenn man dar­über nach­denkt. Dennoch ergibt das auto­ma­ti­sier­te Erstellen von Farbpaletten mit­tels „Deep Learning” durch­aus einen Sinn.

Colormind: AI-Experiment mit praktischem Nutzen

Jack Qiao aus Vancouver in Kanada bezeich­net sich weder als Designer, noch als Ingenieur, obwohl er in bei­den Bereichen tätig ist. Jack lässt sich nicht ger­ne fest­le­gen und ver­sucht, stets an Dingen zu arbei­ten, die ihn per­sön­lich inter­es­sie­ren. In der Entwickler-Community erlang­te er bereits eine gewis­se Bekanntheit mit sei­nem JavaScript-Tool SVGnest.

Sein neu­es­tes Projekt Colormind.io beschäf­tigt sich mit der Fragestellung, wie man künst­li­che Intelligenz für die Erstellung har­mo­ni­scher Farbpaletten nut­zen könn­te. Jacks Grundgedanke war, dass selbst eini­ger­ma­ßen erfah­re­ne und der Farbtheorie mäch­ti­ge Designer Farbpaletten letz­ten Endes doch weit­ge­hend nach dem eige­nen Geschmack anle­gen. Er such­te nach einer wis­sen­schaft­li­che­ren Methode, um den Faktor Mensch stär­ker zu redu­zie­ren und die Ergebnisse objek­ti­vier­ba­rer zu gestal­ten.

Also nutz­te er die Technik des „Deep Learning”, die im Grunde heut­zu­ta­ge fast immer gemeint ist, wenn von künst­li­cher Intelligenz die Rede ist. Wenn du dich für eine dif­fe­ren­zier­te­re Definition inter­es­sierst, soll­test du mei­nen Artikel bei t3n lesen, der die Unterschiede genau­er erklärt.

Deep Learning” bezeich­net eine Methode maschi­nel­len Lernens, die der Arbeitsweise des mensch­li­chen Gehirns sehr ähn­lich ist. Unter Verwendung neu­ro­na­ler Netze ver­setzt sich die Maschine selbst in die Lage, Strukturen zu erken­nen, die­se Erkennung zu eva­lu­ie­ren und sich in meh­re­ren vor­wärts wie rück­wärts gerich­te­ten Durchläufen selb­stän­dig zu ver­bes­sern. Dadurch ver­bes­sert sie ihre Ergebnisse selb­stän­dig, lernt also ste­tig dazu.

Für den ver­gleichs­wei­se ein­fa­chen Anwendungsfall der Generierung von Farbpaletten füt­ter­te Jack sei­ne AI (arti­fi­ci­al Intelligence = künst­li­che Intelligenz) mit Paletten aus Adobe Color, sowie Best Practices aus Dribbble. Die erziel­ten Ergebnisse bedür­fen wei­ter­hin der mensch­li­chen Beurteilung, stel­len aber eine weit­ge­hend objek­ti­vier­te Grundlage für wei­te­re Arbeiten dar.

Colormind: So generierst du Farbpaletten mit dem AI-Tool

Das Erstellen har­mo­ni­scher Farbpaletten mit Colormind ist ein­fach. Auf der Landing Page des Projekts siehst du eine groß dar­ge­stell­te Farbpalette direkt unter­halb der Hauptnavigation. Colormind star­tet stets mit einem Vorschlag. Einen neu­en Vorschlag gene­rierst du über den Button „Generate” links unter­halb der Palette.

Allerdings wird die­se Vorgehensweise nur mäßig ziel­füh­rend sein. Besser ist es, du wählst eine Startfarbe aus, indem du unter­halb des ers­ten Palettenfeldes auf den Button mit den Schiebereglern klickst. Es öff­net sich ein Colorpicker, mit des­sen Hilfe du ent­we­der visu­ell einen Farbwert wählst, oder die gewünsch­te Farbe als Hex-Wert ein­trägst.

Nach der Auswahl wird die­se Farbe im ers­ten Palettenfeld ange­zeigt. Handelt es sich um eine Farbe, die auf jeden Fall in dei­ner Palette vor­kom­men muss, setzt du sie jetzt mit einem Klick auf das Schlosssymbol als unab­än­der­lich fest. Nun klickst du erneut auf den Button „Generate” und Colormind passt die übri­gen Farbwerte dei­ner initia­len Selektion an.

Die Benutzersteuerung fin­det sich unter den ein­zel­nen Feldern der Farbpaletten. (Screenshot: Dr. Web)

Die Position der Farbe in der Palette macht einen Unterschied. Soll die von dir gewähl­te Farbe zwar Teil der Palette, aber nicht deren Ausgangspunkt sein, schiebst du sie mit den Pfeil-Icons unter­halb eines jeden Feldes ein­fach an eine ande­re Position und lässt die Palette neu gene­rie­ren.

Colormind ist eben­so in der Lage, Farbpaletten aus Bildern zu gene­rie­ren. Dazu lädst du dein gewünsch­tes Bild über den Button „Upload” hoch und klickst auf „Generate”. Hier arbei­tet Colormind fle­xi­bel. Wenn du mehr­fach „Generate” klickst, erhältst du in Maßen unter­schied­li­che Ergebnisse. Dabei ach­tet der Generator dar­auf, dass die Ergebnisse stets gut als Palette funk­tio­nie­ren.

Bilder mit extra­hier­ten Farbpaletten. (Screenshot: Dr. Web)

Wenn du dich inten­siv für die Funktionsweisen hin­ter Jacks AI-Einsatz inter­es­sierst, dann soll­test du sei­ne bei­den Blogbeiträge lesen, die zum einen den Algorithmus all­ge­mein und zum ande­ren die Herangehensweisen bei Bildern erklä­ren.

(Der Beitrag erschien erst­mals im März 2017 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update erfolg­te im Mai 2019.)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.