BrowserTools
Werbung
Startseite / Generatoren / Farbpaletten-Generator

Farbpaletten-Generator

Erzeuge komplementäre, analoge, triadische, tetradische, monochromatische sowie Schatten-/Tönungspaletten aus jeder beliebigen Basisfarbe.

Farbpaletten-Generator wird geladen… Wenn nichts passiert, aktiviere JavaScript.

Die Farbtheorie ist der strukturierte Rahmen, der erklärt, welche Farbkombinationen harmonisch, energisch, ruhig oder professionell wirken und warum. Im Kern arbeitet sie mit dem Farbkreis, einer kreisförmigen Anordnung von Farbtönen, bei der die Beziehungen zwischen Farben vorhersagen, wie sie visuell zusammenwirken. Der Farbkreis wurde von Johann Wolfgang von Goethe in seinem Werk "Zur Farbenlehre" von 1810 formalisiert und später durch Albert Munsells dreidimensionales Farbsystem verfeinert. Das moderne digitale Design bildet diese Beziehungen auf den HSL-Farbraum (Farbton, Sättigung, Helligkeit) ab, in dem die Drehung des Farbtons auf einem 360-Grad-Kreis direkt den Positionen auf einem traditionellen Farbkreis entspricht.

Häufig gestellte Fragen

Werden Farbdaten an einen Server gesendet?
Nein. Alle Palettenberechnungen werden in deinem Browser mit HSL-Arithmetik durchgeführt. Die Farbe, die du eingibst, und die erzeugten Paletten existieren nur in deinem Browser-Tab. Der Erzeugungsaktion ist kein Analyse-Ereignis zugeordnet, und es werden keine Daten über das Netzwerk übertragen.
Wie werden die Palettenbeziehungen mathematisch berechnet?
Das Werkzeug wandelt deine Eingabefarbe in HSL um und dreht dann den Farbtonwert um festgelegte Versätze für jedes Schema: 180° für komplementär, ±30° für analog, ±120° für triadisch, ±90° und ±180° für tetradisch. Tönungen erhöhen die Helligkeit in gleichen Schritten in Richtung 100 %; Schatten verringern sie in Richtung 0 %. Sättigung und Helligkeit der Basisfarbe bleiben in den Farbton-Drehschemata erhalten, was die Palette stimmig hält.
Was ist der Unterschied zwischen komplementär und geteilt-komplementär?
Eine Komplementärpalette paart deine Basisfarbe mit dem einzelnen, direkt gegenüberliegenden Farbton auf dem Farbkreis: hoher Kontrast, kräftig und intensiv. Eine geteilt-komplementäre Palette verwendet die beiden dem Komplement benachbarten Farbtöne (typischerweise 30° zu jeder Seite), was einen ähnlichen visuellen Kontrast bietet, sich aber weicher und weniger schroff anfühlt und somit in Designs mit mehreren Elementen nachsichtiger zu handhaben ist.
Welche Palettenart sollte ich für eine professionelle Marke verwenden?
Analoge Paletten (benachbarte Farbtöne) wirken stimmig und anspruchsvoll und sind bei Technologie- und Finanzmarken beliebt. Komplementärpaletten sind kräftig und aufmerksamkeitsstark und bei Verbraucher- und Sportmarken verbreitet. Monochromatische Paletten vermitteln Eleganz und Zurückhaltung. Es gibt keine einzige richtige Antwort; die Wahl hängt von der Persönlichkeit der Marke ab. Beginne mit analog für Zugänglichkeit oder mit komplementär für Energie.
Was ist die 60-30-10-Regel?
Die 60-30-10-Regel ist eine klassische Designproportions-Richtlinie: Verwende deine dominante Farbe für 60 % der Komposition, eine Sekundärfarbe für 30 % und eine Akzentfarbe für die restlichen 10 %. Das Verhältnis sorgt dafür, dass eine Farbe klar führt, eine zweite sie unterstützt, ohne mit ihr zu konkurrieren, und der Akzent Blickpunkte setzt, ohne zu überfrachten. Sie stammt aus der Innenarchitektur, lässt sich aber direkt auf Web- und UI-Design übertragen.
Sind die erzeugten Farben barrierefrei?
Die Palettenerzeugung sichert visuelle Harmonie, garantiert aber keine WCAG-Barrierefreiheitskonformität. Zwei Farben können ein schönes analoges Paar bilden und zugleich ein Kontrastverhältnis unter 3:1 aufweisen, was die WCAG 2.1 für jede Textverwendung nicht erfüllen würde. Überprüfe Kontrastverhältnisse stets unabhängig mit einem speziellen Prüfer, bevor du erzeugte Farben für Vordergrund-/Hintergrund-Textkombinationen verwendest.
Kann ich die Palette als CSS-Custom-Properties exportieren?
Ja. Die Schaltfläche CSS kopieren exportiert alle Farbfelder einer Palette als CSS-Custom-Properties (CSS-Variablen) im Format `--color-name: #rrggbb;`. Füge diese in den `:root`-Block deines Stylesheets ein, um sie in deinem gesamten CSS verfügbar zu machen. Dieses Format ist direkt mit Designsystemen kompatibel, die auf CSS-Custom-Properties aufbauen, einschließlich solcher, die die Custom-Theme-Erweiterungen von Tailwind CSS verwenden.
Welches Farbformat verwendet das Werkzeug für die Ausgabe?
Die Ausgabe erfolgt standardmäßig im hexadezimalen Format (HEX), dem am weitesten unterstützten Format in Designwerkzeugen, CSS und bei der Übergabe an Entwickler. Die zugrundeliegenden Berechnungen verwenden HSL wegen seiner intuitiven Beziehung zum Farbkreis. Wenn du RGB, HSL oder andere Formate benötigst, verwende das Werkzeug Farbkonverter, um jeden HEX-Wert umzuwandeln.
Wie wähle ich zwischen Schatten und Tönungen?
Schatten entstehen durch Mischen der Basisfarbe mit Schwarz (Verringern der Helligkeit) und ergeben dunklere, ernstere Varianten. Tönungen entstehen durch Mischen mit Weiß (Erhöhen der Helligkeit) und ergeben hellere, luftigere Varianten. Für Oberflächen eignen sich Schatten gut für Hover- und Aktiv-Zustände, Rahmen und Text. Tönungen eignen sich gut für Hintergründe, deaktivierte Zustände und dezente Füllungen. Die meisten Designsysteme verwenden beides: dunkle Schatten zur Hervorhebung, helle Tönungen für Flächen.
Kann ich eine Palette für farbenblinde Nutzer erzeugen?
Dieses Werkzeug erzeugt Paletten auf Grundlage der Standard-Farbtheorie, die sich auf die Unterscheidung von Farbtönen stützt, die Nutzern mit Farbsehschwächen nicht vollständig zur Verfügung steht. Für ein barrierefreies Palettendesign ergänze dieses Werkzeug mit einem Farbenblindheitssimulator, um zu prüfen, ob deine gewählten Farben unter Deuteranopie (der häufigsten Form) und Protanopie unterscheidbar bleiben. Erwäge, neben der Farbe Muster oder Formen einzusetzen, um in Datenvisualisierungen Bedeutung zu vermitteln.

Über Farbpaletten-Generator

Designer, UI-Ingenieure, Markenteams und Marketingfachleute benötigen allesamt strukturierte Farbpaletten. Ein Start-up, das eine Markenidentität aufbaut, braucht eine Primärfarbe, einen komplementären Akzent und eine Reihe neutraler Tönungen, die über Logo, Website, App und Druckmaterialien hinweg zusammenwirken. Ein Frontend-Entwickler, der ein Designsystem aufbaut, braucht semantische Farb-Tokens (primär, sekundär, Erfolg, Warnung, Fehler), die sich konsistent aus einer einzigen Markenfarbe ableiten. Ein Illustrator muss wissen, welche Farbtöne visuelle Spannung erzeugen und welche beruhigend wirken. Die 60-30-10-Regel (60 % dominante Farbe, 30 % Sekundärfarbe, 10 % Akzent) ist der praktische Rahmen, den die meisten Innenarchitekten und Grafikdesigner anwenden, damit sich eine Palette ausgewogen statt chaotisch anfühlt.

Dieses Werkzeug berechnet acht Palettenarten aus einer einzigen Basisfarbe, alle mathematisch im HSL-Farbraum abgeleitet. Die Komplementärpalette paart die Basis mit dem genau 180 Grad gegenüberliegenden Farbton. Die analoge Palette verwendet die drei Farbtöne innerhalb von 30 Grad zu jeder Seite. Die triadische Palette teilt den Kreis in drei gleiche 120-Grad-Segmente. Die tetradische (quadratische) Palette verwendet vier Farbtöne in 90-Grad-Abständen. Die geteilt-komplementäre Palette mildert den Kontrast eines Komplementärpaars, indem sie die beiden dem Komplement benachbarten Farbtöne verwendet. Monochromatische Schatten und Tönungen verändern nur die Helligkeit bei gleichbleibendem Farbton und gleicher Sättigung. Alles läuft in deinem Browser: kein Server, kein Hochladen, kein Konto.

Ein entscheidender praktischer Hinweis: Mathematisch harmonische Farben sind nicht automatisch barrierefrei. Das Kontrastverhältnis zwischen Vordergrundtext und Hintergrundfarbe muss die Richtlinien WCAG 2.1 erfüllen, mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Zwei Farben, die visuell ausgewogen aussehen, können die Kontrastanforderungen dennoch nicht erfüllen, besonders analoge Paare, bei denen die Farbtöne ähnlich sind. Lass deine gewählten Vordergrund-/Hintergrundkombinationen stets durch einen Kontrastprüfer laufen, bevor du eine Palette für den Produktiveinsatz festlegst. Denke außerdem daran, dass etwa 8 % der Männer und 0,5 % der Frauen eine Form der Farbsehschwäche haben; simuliere die Ansichten in Deuteranopie und Protanopie für deine Palette, um zu prüfen, ob die wesentlichen Unterschiede erhalten bleiben.

Von Isaac Newtons Prisma zu Pantones Druckimperium: Die überraschende Geschichte der Farbsysteme

Die Vorstellung, dass Farben einen Kreis bilden, ein kontinuierliches kreisförmiges Spektrum statt einer linearen Skala, geht auf Isaac Newton zurück, der 1666 einen Sonnenlichtstrahl durch ein Prisma brach und das entstehende Spektrum in seinem "Opticks" von 1704 zu einem Kreis ordnete, der Rot und Violett an den Enden verband. Newton war der Erste, der vorschlug, dass das Mischen von Farben an entgegengesetzten Enden des Spektrums eine Art visueller Neutralität erzeugt. Dieser Kreis wurde zur begrifflichen Grundlage aller nachfolgenden Farbtheorie, auch wenn Wissenschaftler später entdeckten, dass die menschliche Farbwahrnehmung weitaus komplexer ist, als ein einfaches Kreismodell nahelegt.

Johann Wolfgang von Goethe stellte Newtons rein physikalischen Ansatz in seiner "Zur Farbenlehre" von 1810 infrage und argumentierte, dass die Farbwahrnehmung ebenso psychologisch wie physikalisch sei. Obwohl als Physik weitgehend unzutreffend, beeinflussten Goethes Beobachtungen darüber, wie Farben Emotionen wecken (warme Farben wirken aktiv, kühle passiv), unmittelbar die heute in Markenbildung und Marketing genutzte Farbpsychologie. Die Bauhaus-Schule nahm diese Ideen in den 1920er-Jahren auf, wobei Johannes Itten und Josef Albers die Farbübungen entwickelten, die bis heute an Designschulen weltweit gelehrt werden.

Das moderne kommerzielle Farbsystem, mit dem die meisten Designer täglich umgehen, ist Pantone, gegründet 1963, als Lawrence Herbert eine kleine Druckerei kaufte und ein grundlegendes Problem löste: Zwei Druckereien in verschiedenen Städten konnten dieselbe Farbe nicht zuverlässig anhand einer Beschreibung treffen. Herbert schuf ein standardisiertes Tintenmischsystem mit nummerierten Farbfeldern, und das Pantone Matching System wurde zum globalen Standard für die Spezifikation von Markenfarben. Die jährliche Pantone-Farbe des Jahres, 2000 ins Leben gerufen, ist zu einem kulturellen Ereignis geworden, das Produktdesign, Mode und Innenarchitektur weltweit beeinflusst, eine bemerkenswerte Reichweite für etwas, das als praktische Lösung für ein Problem der Druckkoordination begann.

Werbung
Werbung
Werbung