Farbschema-Generator

Grundfarbe wählen und eine vollständige Palette erhalten, komplementär, analog, triadisch, tetradisch oder monochrom. Jede Farbe als HEX, RGB oder HSL kopieren. Nichts verlässt Ihren Browser.

So funktioniert Farbschema-Generator

Color Scheme Generator erstellt vollständige Farbpaletten aus einer einzelnen Basisfarbe, die Sie auswählen: komplementär (gegenüber auf dem Farbrad), analog (benachbarte Farbtöne), triadisch (drei gleichmäßig verteilte), tetradisch (vier Farbtöne in zwei komplementären Paaren) und monochromatisch (unterschiedliche Helligkeit und Sättigung desselben Farbtons). Die gesamte Palettenlogik läuft im Browser; nichts, was Sie eingeben, verlässt Ihr Gerät.

Jede generierte Palette zeigt Farbfelder mit ihren HEX- und RGB-Werten zum Kopieren an. Dies gibt Designerinnen und Designern einen in der Farbtheorie verankerten Ausgangspunkt statt Raterei. Da der Generator nach dem ersten Laden offline-fähig ist, können Sie während eines Kundengesprächs frei mit Markenfarben experimentieren, ohne eine Netzwerkverbindung zu benötigen. Geben Sie Ihre Basisfarbe in der Notation ein, die Ihnen vorliegt, HEX, RGB oder HSL, und jedes generierte Farbfeld wird in allen drei zurückgegeben, sodass Sie diejenige kopieren können, die Ihr Design-Werkzeug erwartet.

Verfasst von Bastien Sulyan

So wird Farbschema-Generator verwendet, Schritt für Schritt

Wählen Sie eine Basisfarbe mit dem Farbwähler oder durch Eingabe eines HEX-Werts.
Wählen Sie einen Harmonie-Typ aus den Tabs: komplementär, analog, triadisch, tetradisch oder monochromatisch.
Die Palettenfelder erscheinen sofort mit ihren HEX- und RGB-Werten.
Klicken Sie auf ein beliebiges Feld, um seinen HEX-Wert in die Zwischenablage zu kopieren.
Passen Sie die Basisfarbe an, um Variationen zu erkunden, und beobachten Sie, wie sich die gesamte Palette aktualisiert.

Häufige Anwendungsfälle

Eine Designerin, die eine neue Markenidentität startet, wählt ihre Primärfarbe und generiert eine triadische Palette, um drei Farbkombinationen einem Kunden vorzuschlagen.
Ein Entwickler, der ein Dark-Mode-Theme erstellt, verwendet die monochromatische Palette, um eine Reihe von Tönen und Schattierungen aus einer einzigen Markenfarbe zu generieren.
Ein Content-Creator wählt eine analoge Palette, um Akzentfarben für eine Präsentation auszuwählen, die kohäsiv wirken ohne harten Kontrast.
Eine UI-Designerin verwendet die komplementäre Palette, um eine kontraststarke Akzentfarbe zu identifizieren, die sich von der primären Markenfarbe abhebt.

Häufig gestellte Fragen

Wie funktioniert die komplementäre Palette?

Eine komplementäre Farbe ist der Farbton, der der Basisfarbe auf dem HSL-Farbrad direkt gegenüberliegt, 180 Grad entfernt. Komplementäre Farben nebeneinander zu platzieren erzeugt maximalen Kontrast. Das Tool zeigt die Basisfarbe und ihr Komplement sowie hellere und dunklere Varianten jeder Farbe.

Was ist der Unterschied zwischen triadischen und tetradischen Paletten?

Eine triadische Palette verwendet drei Farbtöne, die auf dem Farbrad gleichmäßig in 120-Grad-Abständen verteilt sind. Eine tetradische Palette verwendet vier Farbtöne in 90-Grad-Abständen und bildet zwei komplementäre Paare (auch Doppelkomplementär- oder Quadratpalette genannt). Tetradische Paletten sind komplexer und erfordern eine sorgfältige Ausgewogenheit der Proportionen, um visuelles Rauschen zu vermeiden.

Werden die gewählten Farben gespeichert oder gesendet?

Nein. Die Palettengenerierung ist Arithmetik auf der HSL-Darstellung der Basisfarbe: Rotation des Farbtonwinkels um feste Beträge, Verschiebung von Helligkeit und Sättigung. Jede Berechnung läuft lokal im Browser; nichts wird an einen Server gesendet.

Kann ich die Palette als CSS-Datei oder Design-Token-Datei exportieren?

Das Tool zeigt derzeit Felder mit kopierbaren HEX- und RGB-Werten. Für einen vollständigen Export als CSS-Custom-Properties oder Design-Token-JSON kopieren Sie die Werte manuell in die Token-Datei oder das CSS Ihres Projekts. Eine dedizierte Exportschaltfläche kann in einem zukünftigen Update hinzugefügt werden.

Folgt dieser Generator einem formalen Farbtheorie-Standard?

Die Palettenberechnungen verwenden standardmäßige Farbrotationsformeln im HSL-Farbraum, was die Konvention in den meisten Web-Design-Tools ist. Die genaue Wahrnehmungsgleichmäßigkeit von HSL hat Einschränkungen im Vergleich zu LAB oder OKLCH, aber HSL-Rotationen erzeugen Paletten, die den Farbradkonventionen entsprechen, die Designerinnen und Designer typischerweise erwarten.