Farbpalette aus Einer Farbe Erstellen
Erstellen Sie eine vollständige Palette aus einer Basisfarbe — Abstufungen, Komplementär- und Analogfarben — und kopieren Sie jeden HEX-Code.
Klicken Sie auf ein Feld, um dessen HEX zu kopieren.
Lokal erzeugt
Sicher für unangekündigte Marken
Kein Konto
Sichere Verbindung
So funktioniert es
- 1
Grundfarbe wählen
Fügen Sie einen HEX-Code ein — meist die Markenfarbe, auf die Sie ohnehin festgelegt sind.
- 2
Harmonieregel wählen
Komplementär für Kontrast, analog für Ruhe, triadisch oder tetradisch für Vielfalt, Abstufungen für eine einfarbige Skala.
- 3
Palette kopieren
Übernehmen Sie die HEX-Werte direkt in Ihr Stylesheet, Ihren Theme-Editor oder Ihr Designwerkzeug.
Warum dieses Tool
Fünf Harmonieregeln
Komplementär, analog, triadisch, tetradisch und Abstufungen — jede eine definierte Beziehung auf dem Farbkreis, keine Stimmung.
Eine Eingabe, ein ganzer Satz
Geben Sie die Markenfarbe an, die Sie ohnehin haben; der Rest wird daraus abgeleitet, sodass die Palette verankert und nicht zusammengesetzt ist.
Kopierbare HEX-Werte
Jedes Farbfeld bringt seinen Code mit, bereit für ein Stylesheet oder eine Designdatei.
Die Beziehung sehen
Die erzeugten Farben werden gemeinsam gezeigt — nur so lässt sich beurteilen, ob eine Kombination trägt.
Nichts wird hochgeladen
Die Farbkreis-Arithmetik läuft in Ihrem Browser — kein Farbwert wird irgendwohin gesendet.
Kostenlos, ohne Konto
Keine Anmeldung, keine Begrenzung der Paletten, kein Wasserzeichen.
Was eine Harmonieregel tatsächlich ist
Die Regeln sind Positionen auf einem Farbtonkreis, keine ästhetischen Meinungen. Nehmen Sie den Farbtonwinkel der Grundfarbe, und die Regel sagt Ihnen, wo die übrigen liegen: komplementär bei +180°, analog bei etwa ±30°, triadisch bei +120° und +240°, tetradisch als zwei komplementäre Paare. Das ist der gesamte Mechanismus. Ihr Nutzen liegt nicht darin, dass diese Kombinationen objektiv schön wären — sondern darin, dass sie **vorhersagbar** sind. Eine nach Regel gebaute Palette scheitert auf eine Weise, über die Sie nachdenken können; eine Palette, die durch Auswahl einzeln gefälliger Farbfelder entstand, scheitert meist so, dass niemand die Ursache benennen kann, weil es keine Beziehung zu prüfen gibt.
Zwischen den Regeln wählen
Jede Regel löst ein anderes Problem. Analoge Farbtöne liegen nebeneinander und teilen eine Familienähnlichkeit, was sie sicher und leise macht — gut für einen Hintergrund oder eine Illustration, schwach, wenn etwas hervorstechen soll. Komplementär maximiert die Trennung, und genau das braucht ein Akzent: eine dominante Farbe und ein gegenüberliegender Farbton, sparsam eingesetzt für die Aktion, die geklickt werden soll. Triadisch liefert drei deutlich unterschiedene Farbtöne, die im Gleichgewicht bleiben — allerdings nur, wenn einer klar dominiert und die anderen beiden stützen. Tetradisch bietet vier und ist wirklich schwierig; die meisten tetradischen Paletten, die in der Praxis funktionieren, verwenden zwei der Farben auf einem Bruchteil der Fläche der beiden anderen.
Warum ein Interface Abstufungen nötiger hat als Farbtöne
Die obigen Regeln beantworten die Frage „welche Farben passen zusammen“, doch ein reales Produkt braucht etwas anderes: viele Stufen derselben Farbe. Seitenhintergrund, Kartenfläche, haarfeiner Rahmen, deaktivierte Beschriftung und Fließtext sind meist derselbe Farbton in unterschiedlicher Helligkeit, und ob diese Stufen gleichmäßig verteilt sind, prägt das fertige Bild stärker als die Wahl zwischen triadisch und tetradisch. Genau das erzeugt der Abstufungsmodus — ein einzelner Farbton über die Helligkeit gestaffelt, also die Bauweise einer Farbskala in einem Designsystem. Die meisten Projekte brauchen einen Akzentfarbton und eine gut gebaute neutrale Skala weit dringender als fünf verschiedene Farbtöne.
Eine erzeugte Palette ist ein Ausgangspunkt, kein Designsystem
Was der Farbkreis liefert, sind Farbtonbeziehungen. Was er nicht liefern kann, sind Rollen. Eine funktionierende Palette weist jeder Farbe eine Aufgabe zu — das ist die Fläche, das die primäre Aktion, das die destruktive Aktion, das der Rahmen — und diese Zuweisungen hängen von Ihrem Interface ab, nicht von Geometrie. Der Farbkreis weiß außerdem nichts über Lesbarkeit: Ein triadisches Schema kann perfekt ausgewogen sein und Text dennoch bei 2,5:1 auf einen Hintergrund setzen. Erzeugen Sie hier die Beziehungen, vergeben Sie die Rollen selbst und schicken Sie jedes Text-auf-Hintergrund-Paar durch die Kontrastprüfung, bevor irgendetwas davon in eine Komponentenbibliothek gelangt.
Das Verhältnis 60-30-10
Ein verbreiteter Fehlschluss ist, eine Fünf-Farben-Palette als Erlaubnis zu lesen, fünf Farben gleichrangig einzusetzen — das ergibt ein unruhiges Interface ohne Blickpunkt. Die Konvention, die den Kontakt mit echten Layouts übersteht, liegt bei etwa 60 % dominantem Neutralton, 30 % Sekundärfarbe und 10 % Akzent. Unter diesem Verhältnis sind zwei Komplementärfarben keine Konkurrenten, sondern eine große ruhige Fläche und eine kleine, bewusste Unterbrechung. Deshalb wirken Paletten im Entwurf auch besser als in der Produktion: Der Entwurf zeigt die Farbfelder gleich groß, das Interface wird das nicht tun.
Eine Palette umrechnen und erweitern
Steht der Satz, besteht die eigentliche Arbeit darin, ihn in etwas zu überführen, das ein Stylesheet nutzen kann. Die Farbtonwerte kommen aus dem Kreis als HEX; wenn Sie Varianten für Hover, Aktiv und Deaktiviert ableiten wollen, rechnen Sie sie zuerst mit dem Farbkonverter nach HSL um und staffeln die Helligkeit — so bleibt jede Variante in derselben Farbtonfamilie, statt abzudriften. Behalten Sie die Grundfarben als einzige Quelle der Wahrheit und erzeugen Sie die Varianten daraus, anstatt Dutzende beinahe identischer Hex-Codes zu lagern: Eine von Hand wachsende Palette wird binnen weniger Monate inkonsistent.
Häufige Fehler, die Sie vermeiden sollten
- Jede Farbe der Palette gleich stark einsetzen. Fünf Farben auf gleicher Fläche ergeben ein Interface ohne Blickpunkt; halten Sie etwa 60 % Dominante, 30 % Sekundärfarbe und 10 % Akzent, damit der Akzent auch als solcher gelesen wird.
- Das Schema wählen, bevor klar ist, was hervorstechen soll. Analog ist ruhig und schwach in der Betonung; komplementär existiert, um ein Element unübersehbar zu machen. Wählen Sie die Regel nach der Aufgabe, nicht nach dem Aussehen der Farbfelder.
- Annehmen, eine ausgewogene Palette sei lesbar. Der Farbkreis weiß nichts über Kontrastverhältnisse — ein harmonisches Paar kann Text dennoch bei 2,5:1 auf seinem Hintergrund lassen.
- Ein Interface allein aus Farbtönen bauen. Flächen, Rahmen, deaktivierte Zustände und Fließtext sind überwiegend ein Farbton in verschiedenen Helligkeiten; eine gute Abstufungsskala hilft im Alltag mehr als eine vierte Akzentfarbe.
- Hover- und Aktiv-Varianten von Hand als neue Hex-Codes wählen. Leiten Sie sie ab, indem Sie in HSL die Helligkeit von der Grundfarbe aus staffeln, sonst driftet die Familie im Farbton, während die Palette wächst.
Im Vergleich
| KeroTools | Paletten-Galerien | Designsoftware | |
|---|---|---|---|
| Startet von Ihrer Markenfarbe | Ja | Meist zufällig | Ja |
| Benannte Harmonieregeln | Fünf | Selten angegeben | Ja |
| Werte gehen an einen Server | Nie | Häufig | Nein |
| Konto erforderlich | Nein | Oft zum Speichern | Lizenz erforderlich |
| Funktioniert offline | Nach dem ersten Laden | Nein | Ja |
| Kosten | Kostenlos | Kostenlos / kostenpflichtig | Kostenpflichtig |
Funktionen
Komplementär
Der genau gegenüberliegende Farbton, 180° entfernt — maximale Trennung, für einen einzelnen Akzent vor einer dominanten Farbe.
Analog
Benachbarte Farbtöne mit etwa 30° Abstand, die Familienähnlichkeit teilen und ruhig und stimmig wirken.
Triadisch
Drei Farbtöne im gleichmäßigen Abstand von 120° — kräftig und ausgewogen, verlangt aber eine klare Dominante.
Tetradisch
Vier Farbtöne in zwei komplementären Paaren; das reichste Schema und das am schwersten auszubalancierende.
Abstufungen
Ein Farbton, über die Helligkeit gestaffelt — genau die Skala, die Oberflächen, Rahmen und Text in Interfaces wirklich brauchen.
HEX für jedes Farbfeld
Jede erzeugte Farbe trägt ihren Code, bereit zum Kopieren.
Keine Installation
Nichts herunterzuladen oder zu installieren — es läuft auf der Webseite.
Arabisch- und RTL-tauglich
Vollständige Oberfläche in acht Sprachen, einschließlich Arabisch von rechts nach links.
Standardmäßig sicher
Über HTTPS ausgeliefert, ohne Datei-Tracking und ohne Upload an Dritte.
Wer es nutzt
Gestaltende
Aus einer vorhandenen Markenfarbe einen stimmigen Satz ableiten, statt Farbfelder nach Augenmaß zusammenzustellen.
Frontend-Entwickelnde
Eine Abstufungsskala für Flächen und Rahmen bekommen, ohne ein Dutzend Grautöne von Hand auszuwählen.
Kleinunternehmen
Die eine Logofarbe zu etwas erweitern, das auf einer Website und in Druckmaterial trägt.
Alle, die ein Template anpassen
Die Felder für Sekundärfarbe und Akzent im Theme-Editor aus der einen vorhandenen Farbe füllen.
Häufig Gestellte Fragen
Nein. Alles läuft lokal im Browser — nichts wird hochgeladen, gespeichert oder geteilt.
Ja — komplett kostenlos, ohne Konto und ohne Limits.