Ratgeber

32 Tools, auf die Webdesigner für gute Farbkombinationen und Farbverläufe schwören

32 Farb-Tools für Designer. (Foto: Shutterstock)

Hinweis: Wir haben in diesem Artikel Provisions-Links verwendet und sie durch "*" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält t3n.de eine Provision.

Farbverläufe, Farbkombinationen, passende Schemata und Paletten: In diesem Beitrag haben wir 32 Tools für Web- und andere Designer gesammelt.

Farbpaletten sind die Grundlage eines jeden Designs. Sie geben Linien vor, denen die gesamte Gestaltung folgen muss. Deshalb ist es wichtig, sie so anzulegen, dass sie dieser Verantwortung auch gerecht werden können. Bewährt hat sich die Nutzung eines spezialisierten Werkzeugs für diese Aufgabe. So ist sichergestellt, dass nicht etwa wichtige Aspekte unberücksichtigt bleiben. Zudem kann ein gerüttelt Maß an Inspiration nie schaden.

Nix mehr verpassen: Die t3n Newsletter zu deinen Lieblingsthemen! Jetzt anmelden

Dabei gibt es unterschiedliche Ansätze. In der einfachsten Form orientieren sich die Tools an Grundsätzen von Farbtheorien oder – seltener – Farbpsychologie. Das hilft indes nicht in allen Fällen optimal weiter.

Entwickler und Designer, die bestehende Kunden und deren Corporate Design bedienen müssen, sehen sich nämlich zumeist in ihrer kreativen Freiheit reichlich eingeschränkt. Aber auch in diesen Fällen können frische Farbpaletten helfen. Nur solltet ihr die nicht frei definieren, sondern aus dem dominierenden Bildmaterial des jeweiligen Kunden generieren.

Die folgenden Dienste und Tools erzeugen Farbpaletten, Verläufe oder Duotone-Effekte und sind allesamt kostenlos nutzbar. Die Vorgehensweisen unterscheiden sich teils deutlich.

Adobe Color

Adobe Color: Generator mit Farbregeln. (Screenshot: t3n)

Der bekannteste und mächtigste Dienst rund um das Farbenspektrum und seine Nutzung im Design kommt aus dem Hause Adobe und hört auf den simplen Namen Color*. Color integriert die verschiedenen Farbregeln direkt im Generator. So ist es das Erstellen farbtheoretisch unpassender Paletten generell unmöglich, es sei denn, wir würden die Farbregel „Benutzerdefiniert“ wählen. Color unterstützt ebenso optimal bei der Erstellung von Farbverläufen.

Zusätzlich zu den bis in die kleinsten Details durchkonfigurierbaren Paletten bietet Color Zugriff auf eine Unmenge bereits angelegter und gespeicherter Farbpaletten aus fremder Feder. Color lieferte auch die Trainingsdaten für den KI-Palettenersteller Colormind.

Trotz seiner Zugehörigkeit zur Creative Cloud kann der Generator von Color kostenlos und ohne Anmeldung genutzt werden*. Erst, wenn das Speichern von Paletten gewünscht wird, ist eine Adobe-ID erforderlich. Kostenlos bleibt der Dienst auch dann.

Coolors

Coolors. (Screenshot: t3n)

Coolors gehört zu den Farbpaletten-Lösungen mit dem breitesten Funktionsumfang. Das Tool orientiert sich funktional und optisch an Adobe Color CC, bietet aber einige frische Ideen, die der Marktführer nicht im Portfolio hat. Das Tool kann per Web-App genutzt werden, steht aber auch als App für iOS und als Extension für Adobes Creative Cloud Exchange bereit. So könnt ihr das Tool direkt in Photoshop und Illustrator verwenden.

Coolors kann weit mehr als „nur“ Farbpaletten aus Bildern generieren. Als einer der wenigen Generatoren lässt dir Coolors die Möglichkeit, selbst zu definieren, welche Farbe als dominant gesetzt werden soll. Der weitere Umgang mit den Paletten ist sehr einfach. Zufallsgeneriert wird per Druck auf die Leertaste. Innerhalb der einzelnen Farbfelder finden sich dann Icons zum Verschieben, Editieren und Festsetzen des Wertes. So könnt ihr etwa ganze Paletten dadurch beeinflussen, dass ihr die Schattierung einer Farbe ändert. Coolors berechnet dann die Palette neu. Flexibler geht es kaum.

Wie Color CC bietet auch Coolors eine breite Vielfalt fertiger Paletten, nur eben aus der Coolors-Community. Coolors ist damit zu nahezu allen Zwecken rund um die Erstellung schlagkräftiger Farbpaletten zu verwenden.

Pigment

Pigment. (Screenshot: t3n)

Pigment von Shapefactory arbeitet auf der Basis der Fotobibliothek von Unsplash, die bequem innerhalb der Web-App durchsucht werden kann, um zum eigenen Projekt passende Bilder zu entdecken. Sind die Bilder gefunden, zeigt Pigment die dominierenden Farben des jeweiligen Bildes an. Paletten können in verschiedenen Formaten heruntergeladen werden. Farbverläufe und Duotone-Effekte können ebenso unproblematisch getestet und gesichert werden.

An den entdeckten Fotos können Helligkeit und Sättigung angepasst werden, um so zu sehen, wie sich die Farbpalette ändert. Anstatt über Bilder Farbpaletten zu entdecken, könnt ihr mit Pigment ebenso Bilder über Farbpaletten entdecken. In dem Fall wählt ihr erst die gewünschte dominante Farbe aus und sucht danach im Unsplash-Katalog. Dieser Weg erlaubt es euch, zu sehen, wie sich eine geplante Farbpalette auf Bilder auswirken würde.

Pigment eignet sich damit ganz hervorragend, wenn die Inspiration einen gewaltigen Tritt braucht.

Colourlovers

Photocopa von Colourlovers. (Screenshot: t3n)

Die Tools der Colourlovers gehören zu den voluminöseren Funktionspaketen dieser Übersicht. Mit dem Photocopa gelingt die Extraktion von Farben aus einem Bild. Die Analyse der Bilder, die man als registrierter User auch hochladen kann, ist reichlich detailliert. Es werden alternative Farbpaletten vorgeschlagen, die Farbwerte werden in Hex, RGB und HSV angegeben.

Neben der Analyse hochgeladener Bilder bietet Colourlovers etliche Palettenbeispiele als Ausgangspunkt für die eigene Arbeit sowie einen Palettengenerator, der sehr detaillierte Einstellungen für die eigene Farbpalette ermöglicht. Anspruchsvollere Zeitgenossen greifen direkt zum professionelleren Copaso-Tool. Dazu ist es erforderlich, einen kostenfreien Account bei den Colourlovers anzulegen.

Muzli Colors

Muzli Colors. (Screenshot: t3n)

Der inzwischen von Invision übernommene Dienst Muzli bietet mit Muzli Colors ebenfalls einen Paletten-Generator. Auch der funktioniert sehr einfach. Ihr wählt per Klick auf eine Farbe auf dem Homescreen den Ausgangspunkt eurer Palette aus. Muzli Colors generiert den Rest.

Muzli Colors mit UI-Vorschau. (Screenshot: t3n)

Das Besondere an dem Generator ist seine UI-Vorschau. Neben den vier zunächst generierten Paletten zeigt Colors eine Live-Vorschau eines Teils einer fiktiven UI an. So könnt ihr eindrucksvoll sehen, wie sich die gewählte Palette auf Schalter, Buttons und Co. auswirken könnte.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Carsten-Andres Werner

Eine schöne und umfangreiche Übersicht.

Ich bin selber schon seit einer Weile auf der Suche nach einem Werkzeug, in dem ich Farben und ihre Angaben kundenspezifisch oder nach Projekten sortiert sammeln kann.

Idealerweise nicht nur für RGB, HEX oder andere Bildschirm-Farben, sondern auch für HKS, CMYK, Pantone, RAL … etc. Zur Zeit verwende ich ColorDrops.

Hat jemand eine Idee?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung