Zum Inhalt springen
100% lokal

Farbpaletten-Generator

Verwandeln Sie eine Basisfarbe in eine vollständige Palette mit Farbharmonieregeln.

Eingabe
0
0
Ausgabe

Farbpaletten-Generator

Fügen Sie eine Basisfarbe als Hex-Code, rgb() oder hsl()-Wert ein und dieses Werkzeug erstellt eine vollständige Palette nach Farbharmonieregeln, nicht einfach durch Aufhellung desselben Farbtons. Wählen Sie Komplementär für eine einzelne Gegenfarbe, Geteilte Komplementär oder Triadisch für ausgeglichenen Kontrast, Tetradic für ein Vier-Farben-Rechteck, Analog für benachbarte Farbtöne, die natürlich zusammenpassen, oder Monochrom für Töne und Schattierungen eines Farbtons.

Die Harmonie-Option bestimmt, wie viele Farben entstehen — Komplementär gibt immer zwei, Triadisch und Geteilte Komplementär geben drei, Tetradic gibt vier — während die Farbanzahl und der Farbton-Schrittwinkel nur auf Analog und Monochrom angewendet werden, wo Sie entscheiden, wie viele Farben und wie weit auseinander. Berechnen Sie in HSL für klassische Farbrad-Mathematik oder wechseln Sie zu OKLCH, das die gleiche wahrgenommene Helligkeit über jeden Farbton hinweg beibehält, sodass eine Palette nicht versehentlich mit einer dunkler oder ausgewaschener aussehenden Farbfeld neben dem Rest herauskommt. Sättigungs- und Helligkeitsregler passen die gesamte Palette fein ab, nachdem die Harmonie erstellt wurde, und die Farbformat-Option gibt jedes Ergebnis als Hex, rgb(), hsl() oder oklch() aus.

Jede Farbfelder wird gegen WCAG AA (4.5:1) als Text auf Weiß und Schwarz überprüft, markiert mit einem Häkchen oder Kreuz neben jedem Verhältnis — nützlich, um zu wählen, welche Farben in einer generierten Palette für Fließtext sicher sind und welche nur für Dekoration. Exportieren Sie das Ergebnis als einfache Liste, einen CSS-Custom-Properties-Block zum Einfügen in ein Stylesheet oder ein Tailwind-Farbobjekt.

Alles läuft lokal in Ihrem Browser — die Farbe, die Sie eingeben, wird niemals irgendwo hochgeladen. Kopieren Sie die Ausgabe, laden Sie sie als .txt-Datei herunter oder senden Sie sie an die Eingabe eines anderen Werkzeugs, um damit weiterzuarbeiten.

Häufige Fragen

Welche Eingabeformate akzeptiert es für die Basisfarbe?
Hex-Codes (#3b82f6, #38f, mit oder ohne das #), rgb()/rgba() und hsl()/hsla(). Fügen Sie einen davon ein und die Palette wird sofort aktualisiert.
Was ist der Unterschied zwischen HSL und OKLCH für die Berechnung?
HSL ist die klassische Farbrad-Mathematik und ist schnell und vorhersehbar. OKLCH ist ein wahrnehmungsmäßig einheitlicher Raum, daher behält eine in ihm erstellte Palette eine gleichmäßigere wahrgenommene Helligkeit über Farbtöne hinweg, anstatt dass einige Farben versehentlich dunkler oder heller aussehen als andere.
Warum betrifft das Ändern von "Farben in Palette" nur einige Harmonien?
Komplementär, Geteilte Komplementär, Triadisch und Tetradic sind definitionsmäßig festgelegt — zwei, drei, drei und vier Farben. Der Zähler kontrolliert nur Analog und Monochrom, die vernünftigerweise eine beliebige Anzahl von Farben haben können.
Was bedeutet das AA-Häkchen/Kreuz neben jeder Farbe?
Es ist das WCAG-Kontrastverhältnis dieser Farbe, die als Text auf weißem und schwarzem Hintergrund verwendet wird, mit einem Häkchen, wenn es die AA-Schwelle von 4.5:1 überschreitet, und einem Kreuz, wenn nicht.
Wird meine Farbe irgendwo hochgeladen?
Nein. Die Palette wird vollständig in Ihrem Browser generiert — nichts, was Sie eingeben, wird an einen Server gesendet.