Zum Inhalt springen
Color Tools

Farbpalette harmonisieren

Bring die Farben, die du hast, in ein gemeinsames Schema – gleiche Familie, Nachbarn, Gegenüber, Dreiklang oder geteilt – rund um die, die du behältst. Sieh sie nebeneinander, ineinander, im 60/30/10-Verhältnis oder in deinem eigenen Layout, vorher und nachher. Kostenlos, ohne Konto, 100 % im Browser.

Deine Farben

Füge die Farben ein, die du hast – oder lade das Beispiel, um zu sehen, wie es funktioniert. Nichts verlässt deinen Browser.

Angleichen an:
Füge mindestens zwei Farben hinzu.

Canvases:

Fünf Wege, Farben anzugleichen – und wann welcher passt

„Harmonisieren“ ist ein vages Wort, solange du nicht sagst, worin die Farben übereinstimmen sollen. Dieses Tool bietet fünf Antworten. Farbtonschema – die Chip-Reihe über der Schaltfläche – dreht jede freie Farbe auf den nächstgelegenen Farbton, den ein klassisches Schema rund um die Ausgangsfarbe erlaubt: Gleiche Familie (ein Farbton, variiert in der Helligkeit), Nachbarn (innerhalb von etwa 30°, die ruhige, analoge Wirkung), Gegenüber (die Komplementärfarbe, maximale Spannung), Dreiklang (drei Farbtöne im Abstand von 120°) und Geteilt (die beiden Nachbarn der Komplementärfarbe). Kleinste Änderung, vorausgewählt, nimmt für jede Farbe das nächstgelegene dieser Ziele, sodass nichts weiter wandert als nötig. Helligkeitsleiter zieht Farben, die sich berühren, auseinander, damit keine zwei fast, aber nicht ganz gleich hell sind. Buntheit holt alle Farben in ein Buntheitsband rund um die Ausgangsfarbe – das Mittel gegen „eine ist schlammig, eine ist Neon“. Temperatur, standardmäßig aus und unter „Mehr Optionen“ zu finden, macht die Palette per Mehrheitsentscheid warm oder kühl. Der fünfte Weg, unter den anderen vier immer aktiv, ist minimale Bewegung: Was auch immer du verlangst, jede Farbe nimmt den kürzesten wahrnehmbaren Pfad dorthin, sodass eine harmonisierte Farbpalette immer noch wie deine Palette aussieht. Wähle ein benanntes Schema, wenn die Beziehung die Vorgabe ist („wir wollen einen Dreiklang“); lass Kleinste Änderung stehen, wenn du einfach willst, dass die Farben aufhören zu streiten.

Die Ausgangsfarbe: wer führt, wer folgt

Jedes Angleichen braucht eine Referenz, und das Tool rät nie im Stillen. Die Ausgangsfarbe ist die erste Farbe, die du behältst; behältst du keine, ist es die bunteste Farbe – und das Ergebnis sagt es dir. Das entspricht dem, wie Paletten entstehen: Die gesättigtste Farbe ist die, an die man sich erinnert. Eine Farbe zu behalten bewirkt zweierlei zugleich – sie bleibt exakt, wie sie ist, und die Ziele des Schemas werden von ihrem Farbton aus gemessen. Behältst du zwei Farben, sind die Ziele die Vereinigung beider Mengen: Eine freie Farbe darf sich neben dem einen oder dem anderen Anker einfinden, je nachdem, welcher näher liegt. Das ist die ehrliche Antwort auf „Welche dritte Farbe passt zu diesen beiden?“ – es gibt selten eine, es gibt eine kurze Liste, und Sanft, Ausgewogen und Kräftig wandern sie entlang. Liegen deine beiden behaltenen Farben im Farbton weit auseinander, schließen sich die freien einer von ihnen an, statt einen diplomatischen Mittelwert zu bilden: Farben, die zu zwei Farben passen, findet man, indem man sich für eine Seite entscheidet – nicht, indem man die Differenz teilt.

Farben im Kontext: nebeneinander, ineinander, 60/30/10 (Albers)

Josef Albers hat ein ganzes Berufsleben lang gezeigt, dass eine Farbe kein festes Aussehen hat: Dasselbe Farbfeld wirkt auf dunklem Grund heller, auf kühlem Grund wärmer und verschwindet auf einem Grund ähnlicher Helligkeit. Ein Streifen aus Farbfeldern – das, was jedes andere Harmonisierungs-Tool zeigt – verbirgt all das, weil jedes Farbfeld dieselben Nachbarn bekommt. Die Bühne hier hat drei Vorlagen, die die Farben in die Konstellation bringen, die sie tatsächlich einnehmen werden. Nebeneinander (die Vorlage „Angrenzend“) ist der Streifen ohne Lücke: der strengste Test für Kanten, und dort zeigt sich nahezu gleiche Helligkeit zuerst. Ineinander setzt eine Farbe in eine andere – den Akzent in die Wand, den Button in die Karte – und wendet eine strengere Regel an, weil eine innere Farbe mehr Helligkeitsabstand zu ihrer Fläche braucht als ein Nachbar, sonst verschwindet sie. 60/30/10 stellt die klassische Proportion dar – dominant, sekundär, Akzent – und zeigt, ob eine Farbe, die als gleich breiter Streifen gut aussah, sechzig Prozent einer Fläche tragen kann. Das Tool liest die Komposition: Paare, die sich berühren, bekommen die Helligkeitsleiter, Paare, die ineinanderliegen, die strengere Regel, und „Was falsch war“ wird anhand des Layouts beurteilt, das du gewählt hast – nicht anhand einer abstrakten Liste.

Eigene Komposition anordnen – und sie vorher und nachher umfärben

Passt keine Vorlage, öffnet „Frei anordnen“ den Kompositionsmodus: Rechtecke, Kreise und Dreiecke, die du auf der Bühne platzierst, skalierst und drehst, jedes per Chip einer deiner Farben zugewiesen. Lege einen Kreis auf ein Rechteck, und er liegt darin; schiebe zwei Formen zusammen, und ihre Kanten rasten ein, sodass sie sich ohne Lücke berühren – der Fall, der Albers am meisten interessierte. Es funktioniert mit Maus, Touch und Stift, mit Griffen, die groß genug für einen Daumen sind; die Pfeiltasten verschieben eine ausgewählte Form, und für Skalieren, Drehen, Reihenfolge, Duplizieren und Löschen gibt es zusätzlich Buttons in der Formenliste unter dem Canvas. Dann kommt der Moment, für den das Tool gebaut ist: Drücke „Farben angleichen“, und die Anordnung bleibt, während die Palette darunter wechselt. Schalte Vorher | Nachher um (Taste B), und du vergleichst die beiden Paletten in deiner Komposition – nicht in der von jemand anderem. Exportiere die Komposition als PNG für den Kunden, oder lass den Teilen-Link Palette, behaltene Farben, Schema und Formen mitnehmen, sodass ein Kollege genau das öffnet, was du siehst.

Schritt für Schritt: ein Raum um ein Sofa, eine App um ein Markenblau, ein Outfit um ein Kleidungsstück

Ein Raum um ein Sofa. Gib das Sofa, den Boden, einen Wandkandidaten und einen Vorhangkandidaten ein. Behalte Sofa und Boden. Wähle Nachbarn, wenn du einen ruhigen Raum willst, Gegenüber, wenn die Vorhänge das Ereignis sein sollen. Stelle die Bühne auf 60/30/10 – Wand dominant, Boden sekundär, Sofa als Akzent – oder setze das Sofa in die Wand. Angleichen. Die Wand rückt typischerweise ein wenig in Richtung der Sofa-Familie, und der Vorhang landet im Schema; unter „Mehr Optionen“ reicht „An einer Wand testen“ die Palette an die Wand-Szene des Farbtesters weiter – für einen Check bei Tageslicht.

Eine App um ein Markenblau. Behalte die Primärfarbe. Gib die Hintergrund-, Flächen- und Textfarben ein, die du geerbt hast, und schalte unter Mehr Optionen das Kontrastpaar ein – mit den Chips für Text und Hintergrund und einem Ziel von 4.5. Gleiche Familie liefert dir ein System getönter Neutraltöne, in dem alles mit dem Blau verwandt ist; Kleinste Änderung lässt die Fläche, wo sie ist, und passt nur an, was durchfällt. Die Kontrastregel verschiebt die freie Seite des Paares, bis das Ziel erreicht ist, und der Chip sagt, welche sich bewegt hat und wie weit.

Ein Outfit um ein Kleidungsstück. Der Mantel ist da; Schal, Hose und Tasche sind Kandidaten. Behalte den Mantel, wähle Geteilt für eine lebhafte Kombination oder Nachbarn für eine tonale, und nutze Ineinander, um den kleinen Akzent gegen das große Kleidungsstück zu prüfen. Kräftig ist hier erlaubt – Kleidung verzeiht einen stärkeren Eingriff als eine Wand – und jedes Ergebnis ist eine kurze Liste zum Anprobieren, kein Urteil.

Canvases speichern, Links teilen, Daten exportieren

Jede Anordnung ist ein Canvas: die Farben, was behalten wird, Schema und Stärke, die Komposition. Canvases werden in diesem Browser automatisch gespeichert (bis zu zwanzig; benenne sie direkt an Ort und Stelle, lösche sie mit Rückgängig-Option), und das Öffnen eines Teilen-Links, der von deinem Stand abweicht, legt einen neuen Canvas namens „Geteilt“ an, statt deine Arbeit zu überschreiben. Paletten gehen als Kategorie in „Meine Farben“, als CSS-Variablen in die Zwischenablage oder über Mehr Formate als SCSS, Tailwind und JSON. Weil alles in deinem Browser lebt und nichts hochgeladen wird, hat das Dock Daten exportieren – eine JSON-Datei mit deinen gespeicherten Farben, Canvases und Einstellungen – und Daten importieren, um alles auf einem anderen Rechner zurückzuholen. Ist dein Problem weniger „Farben an ein Schema angleichen“ und eher „irgendetwas stimmt hier nicht, und ich weiß nicht, was“, dann fang mit Farbpalette korrigieren an: gleicher Motor, Diagnose zuerst.

Häufige Fragen

Welche Farbe sollte die Ausgangsfarbe sein?

Die, die sich nicht ändern darf. Behalte sie, und sie wird automatisch zur Ausgangsfarbe. Wird nichts behalten, nimmt das Tool die bunteste Farbe, weil man sich an die erinnert – und das Ergebnis sagt dir, welche Farbe geführt hat.

Welche Angleichung sollte ich wählen?

Lass Kleinste Änderung stehen, wenn die Palette einfach aufhören soll zu streiten: Jede Farbe rückt zum nächstgelegenen Ziel des Schemas. Wähle ein benanntes Schema, wenn die Beziehung die Vorgabe ist – Nachbarn für Ruhe, Gleiche Familie für einen tonalen Look, Gegenüber oder Geteilt für Spannung, Dreiklang für ein ausgewogenes Dreier-Set.

Kann ich an zwei behaltene Farben angleichen?

Ja. Behalte beide; die freien Farben dürfen im Schema des einen oder des anderen Ankers landen, je nachdem, welcher näher liegt. Zwei behaltene Farben, die im Farbton weit auseinanderliegen, werden nicht gemittelt – jede freie Farbe schließt sich einer von ihnen an.

Funktioniert es auf dem Handy?

Ja. Chips brechen um, die Bühne füllt die Breite, und der Kompositionsmodus funktioniert per Touch mit großen Griffen – kein langes Drücken, nichts hinter Hover versteckt. Nur das Polygon-Werkzeug wartet auf Maus oder Stift und einen breiten Bildschirm.

Kann ich meine Canvases und Daten exportieren?

Ja. Daten exportieren im Dock „Meine Farben“ schreibt eine JSON-Datei mit deinen gespeicherten Farben, Canvases und Einstellungen; Daten importieren führt sie wieder zusammen und löscht nie etwas. Paletten lassen sich außerdem als CSS, SCSS, Tailwind und JSON exportieren, jede Komposition als PNG.