Farbpalette-Generator
Geben Sie eine Grundfarbe ein, wählen Sie ein Harmonieschema, und die Farbfelder erscheinen sofort. Kopieren Sie einen einzelnen HEX-Code oder die ganze Palette als CSS Custom Properties.
Läuft in Ihrem Browser: Nichts von dem, was Sie eingeben, wird gesendet.
So funktioniert’s
- Geben Sie einen HEX-Code ein oder wählen Sie eine Farbe mit der Farbauswahl.
- Wählen Sie ein Harmonieschema aus der Liste.
- Klicken Sie neben einem Farbfeld auf Kopieren für einen einzelnen Code, oder kopieren Sie den Block mit CSS-Variablen für die ganze Palette.
Wie es funktioniert
Das Tool rechnet die Grundfarbe von RGB in HSL (Farbton, Sättigung, Helligkeit) um und dreht den Farbton. #3366cc ist zum Beispiel hsl(220, 60%, 50%). Die Komplementärfarbe liegt 180° entfernt: hsl(40, 60%, 50%), also #cc9933. Die gedrehten Farben werden auf den nächsten ganzzahligen RGB-Wert gerundet.
Beispiel
Standardmäßig startet das Tool mit #3366cc und der Triade: Es entstehen #3366cc, #cc3366 und #66cc33, und der CSS-Block lautet --color-1: #3366cc;, --color-2: #cc3366;, --color-3: #66cc33;. Reines Rot #ff0000 ergibt geteilt komplementär das Rot plus #00ff80 und #0080ff, die beiden Töne links und rechts von Cyan.
Tipps
- Nutzen Sie eine Farbe des Schemas als Hauptfarbe und die anderen als Akzente; gleichmäßig verteilt wirkt es schnell überladen.
- Analoge Paletten wirken ruhig, komplementäre energiegeladen.
- Benennen Sie die Variablen nach dem Einfügen nach ihrer Funktion um (
--brand, --accent).
Häufige Fragen
Wie werden die Farben berechnet?
Die Grundfarbe wird in HSL umgerechnet. Die Harmonieschemata drehen den Farbton um feste Winkel auf dem Farbkreis und behalten Sättigung und Helligkeit bei, alle Farben sind also so kräftig wie die Grundfarbe. Das erste Farbfeld jedes Schemas ist Ihre Grundfarbe selbst.
Was ist der Unterschied zwischen Triade und Tetrade?
Die Triade nutzt drei Farbtöne im Abstand von 120°, ausgewogen, aber lebhaft. Die Tetrade nutzt hier vier Farbtöne bei 0°, 60°, 180° und 240°, ein Rechteck auf dem Farbkreis: Sie enthält zwei Komplementärpaare und ist schwerer ausgewogen zu halten.
Wie funktioniert das monochrome Schema?
Es behält Farbton und Sättigung der Grundfarbe und setzt die HSL-Helligkeit auf 20, 35, 50, 65 und 80 %. Die Grundfarbe erscheint nur, wenn ihre Helligkeit einem dieser Werte entspricht.
Garantieren die Paletten ausreichenden Kontrast?
Nein. Harmonie beschreibt Beziehungen zwischen Farbtönen, nicht Lesbarkeit. Prüfen Sie jedes Paar aus Text und Hintergrund mit dem Kontrastprüfer, bevor Sie es verwenden.