Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 19. Oktober 2018

Farben finden: 5 Tools für gute Farbkombinationen

Farben spie­len im Design natür­lich eine gro­ße Rolle. Doch stim­mi­ge und pas­sen­de Farbkonzepte zu erstel­len, ist nicht jeder­manns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir hel­fen, gute Farbkombinationen zu fin­den. Monochromatische Farben las­sen sich eben­so zusam­men­stel­len wie Komplementärfarben. Dabei unter­schei­den sich die Tools teils bereits im Ansatz.

Adobe Color CC

adobe-color-cc

Das bekann­tes­te Farbtool ist sicher Adobe Color CC, wel­ches jeder kos­ten­frei nut­zen kann – auch ohne Anmeldung per Adobe ID. Zunächst ent­schei­dest du dich für eine Farbregel. Damit legst du fest, ob du bei­spiels­wei­se mono­chro­ma­ti­sche oder kom­ple­men­tä­re Farben nut­zen möch­test. Insgesamt gibt es sie­ben Regeln, die Farben nach unter­schied­li­chen Ansätzen mit­ein­an­der kom­bi­nie­ren.

Je nach Farbregel erschei­nen ver­schie­den vie­le beweg­ba­re Punkte auf einem Farbkreis. Diese Punkte las­sen sich nur abhän­gig von­ein­an­der bewe­gen. Bei einer Triade sind die Punkte bei­spiels­wei­se so ange­ord­net, dass der Winkel zwi­schen den Punkten immer gleich ist. Bei Komplementärfarben ste­hen sich die Punkte immer gegen­über.

Jede Farbe lässt such auch über Schieberegler oder die Eingabe von RGB- oder Hexadezimalwerten fest­le­gen. Die ande­ren Farben wer­den dann ent­spre­chend der Farbregel ange­passt. Als ange­mel­de­ter Nutzer spei­cherst du Farbthemen auch ab und hast somit immer Zugriff auf ein­mal defi­nier­te Kombinationen.

Paletton

paletton

Ganz ähn­lich funk­tio­niert die Webanwendung Paletton. Auch hier wählst du zunächst eine Regel aus. Neben mono­chro­ma­ti­schen Farben wählst du zwi­schen benach­bar­ten Farben und einer Triade – in bei­den Fällen bestimmst du jeweils drei Grundfarben – sowie einer Tetrade, bei der du vier Grundfarben vor­gibst.

Der Farbkreis ist bei Paletton zwei­ge­teilt. Auf dem äuße­ren Ring defi­nierst du die Grundfarben und im Inneren defi­nierst du die Helligkeit der Grundfarben sowie den Kontrast der Sekundärfarben zu den Grundfarben. Ausgegeben wird dir ein Farbkonzept mit den jewei­li­gen Grundfarben und jeweils pas­sen­den zusätz­li­chen Sekundärfarben.

Für jedes Farbthema wird eine indi­vi­du­el­le URL erstellt, sodass du dei­ne zusam­men­ge­stell­ten Farben jeder­zeit wie­der auf­ru­fen und auch bear­bei­ten kannst.

Colorcode

colourco

Wer lie­ber ohne Farbkreis arbei­tet, soll­te einen Blick auf Colorcode wer­fen. Bei die­sem Dienst defi­nierst du belie­big vie­le Farben, indem du die Maus inner­halb eines Feldes bewegst. Je nach Bewegung vari­iert der Farbwert. Hast du eine Farbe gefun­den, die dir gefällt, spei­cherst du die­se per Klick. Auf die­se Weise stellst du dir alle Farben für dein Konzept zusam­men.

Auch hier­bei kannst du mono­chro­ma­ti­sche Farben zusam­men­stel­len oder Komplementärfarben fin­den. Dabei wird jeweils eine Grundfarbe defi­niert. Alle wei­te­ren Farben – es kön­nen belie­big vie­le sein – wer­den auf­grund der aus­ge­wähl­ten Farbregel fest­ge­legt.

Das Farbkonzept lädst du dir bequem für Sass oder Less oder als PNG-Datei her­un­ter.

Coolors

coolors

Auch Coolors kommt ohne Farbkreis aus. Stattdessen wer­den Farben per Schieberegler fest­ge­legt. Es wer­den dir dabei fünf Farben dar­ge­stellt, die du indi­vi­du­ell anpas­sen kannst. Anschließend hast du die Möglichkeit, den Farbton, Sättigung, Helligkeit und Temperatur aller fünf Farben zu ver­än­dern.

Außerdem besteht die Möglichkeit, ein­zel­ne Farben vor Veränderung zu schüt­zen. Diese blei­ben dann unver­än­dert, wäh­rend du bei­spiels­wei­se die Sättigung der ande­ren Farben ver­än­derst.

Während die ande­ren Tools kom­plet­te Farbthemen vor­schla­gen, musst du bei Coolors selbst eige­ne Farben defi­nie­ren. Allerdings ist es mit Coolors ein­fach, die­se zu ver­än­dern und das Thema zum Beispiel ins­ge­samt hel­ler oder dunk­ler dar­zu­stel­len.

Dein Farbthema expor­tierst du als SVG-, PNG, PDF- oder SCSS-Datei. Auch das Speichern als URL ist mög­lich.

Multicolr Search Lab

multicolr-earch-ab

Einen gänz­lich ande­ren Ansatz ver­folgt Multicolr Search Lab. Hierbei defi­nierst du bis zu fünf Farben und das Tools sucht dir aus 20 Millionen Creative-Commons-Bildern jene aus, die zu den vor­ge­ge­be­nen Farben pas­sen.

Das Tool stellt eine inter­es­san­te Ergänzung zu den ande­ren Anwendungen dar. So fin­dest du zu dei­nem Farbthema näm­lich auch gleich die pas­sen­den Fotos – bei­spiels­wei­se für einen Seitenhintergrund.

(Artikelbild: Depositphotos)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

2 Kommentare

  1. Hallo,

    die hier genann­ten Tools machen zwei­fels­frei einen guten Eindruck.

    Mit Adobe Color habe ich vor der CC Generation auch gear­bei­tet.

    Seit mind. 2 Jahren erstel­le und ver­wal­te ich mei­ne Farbpaletten sehr bequem, kom­for­ta­bel und unab­hän­gig irgend­ei­ner App mit der Mac App “Sprectrum” (http://www.eigenlogik.com/spectrum/mac). Für mich bie­tet die­se App alles, was man zum Bearbeiten eines Farbspektrums benö­tigt. Vielleicht ist mein Link ja eine sinn­vol­le Ergänzung zu den oben genann­ten Anbietern.

    Bei dem Besuch der Website zur App sah ich eben, dass es auch eine IOS-App von Spectrum gibt. Diese ken­ne ich (noch) nicht. Aber da ich eini­ge Arbeiten auch auf einem iPad Pro durch­füh­re, soll­te ich mir die Version wohl mal näher anse­hen ;)

    Gruss aus dem win­di­gen Ostholstein

  2. Für Offline-Farbbearbeitung ist die kos­ten­lo­se App “ColorSchemer Studio”, im AppStore erhält­lich, auch sehr hilf­reich!

Schreibe einen Kommentar

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