Anleitung
- Geben Sie eine Basisfarbe ein oder wählen Sie eine aus. Mit „Neue zufällige Basisfarbe“ wird eine Farbe für Sie ausgewählt.
- Wählen Sie eine Farbharmonie. „Abstufungen und Tönungen“ erstellt eine Skala mit 11 Schritten von sehr hell bis sehr dunkel.
- Sperren Sie die Farben, die Sie beibehalten möchten, und probieren Sie weitere Basisfarben aus.
- Wählen Sie HEX, CSS-benutzerdefinierte Eigenschaften oder JSON, legen Sie einen Namen fest und kopieren Sie den Code.
So funktioniert es
Farbharmonien entstehen durch Drehung des Farbtons auf dem Farbkreis: Komplementärfarben liegen sich gegenüber (180°), analoge Farben haben auf jeder Seite einen Abstand von 30° und 60°, das Triadenschema verwendet drei Farbtöne im Abstand von 120°, das Tetradenschema vier Farbtöne im Abstand von 90° und das geteilt-komplementäre Schema die beiden Farbtöne neben der Komplementärfarbe (150° und 210°).
Die Drehung erfolgt in OKLCH statt in HSL. In OKLCH bleibt die wahrgenommene Helligkeit gleichmäßig, sodass Gelb und Blau in derselben Palette ähnlich hell wirken und Gelb nicht blendet. Liegt eine gedrehte Farbe außerhalb des sRGB-Farbraums, wird ihre Chroma verringert, bis sie in den Farbraum passt. Helligkeit und Farbton bleiben dabei erhalten.
Die Skala für Abstufungen und Tönungen verwendet feste Helligkeitsschritte in OKLCH von 50 bis 950, ähnlich der Benennung in Tailwind CSS. Nahe Weiß und Schwarz wird die Chroma verringert, damit die hellsten Tönungen nicht neonfarben wirken. Farbharmonien sind ein Ausgangspunkt: Prüfen Sie Text- und Hintergrundkombinationen vor der Verwendung mit einem Kontrastprüfer.
Beispiele
Akzentfarbe für eine Markenfarbe
Die Basisfarbe #3366cc erhält mit „Komplementär“ die Farbe #8c6500 hinzu, ein warmes Ocker mit derselben Helligkeit in OKLCH. Kombinationen aus Blau und Orangegelb sind eine beliebte Wahl für Akzente neben einer blauen Markenfarbe.
Design-Tokens für eine Komponentenbibliothek
Wählen Sie „Abstufungen und Tönungen“, legen Sie den Namen „primary“ fest und exportieren Sie CSS-Variablen. Sie erhalten --primary-50 bis --primary-950, bereit für Hintergründe (50–100), Rahmen (200–300) und Text (700–900).
Eine Farbe beibehalten und andere ausprobieren
Sperren Sie die zweite Farbe einer triadischen Palette und probieren Sie dann andere Basisfarben aus. Das gesperrte Farbfeld behält seinen HEX-Wert, während sich die anderen Farben ändern.
Häufig gestellte Fragen
Warum unterscheiden sich meine Farben von denen eines HSL-Farbkreis-Tools?
Dieses Tool dreht den Farbton in OKLCH, einem wahrnehmungsbasierten Farbraum. Die Farbtonwinkel stimmen nicht genau mit denen in HSL überein. Daher kann die „Gegenfarbe“ etwas anders ausfallen als in einem HSL-Tool.
Kann ich das JSON in Tailwind CSS verwenden?
Das JSON ordnet Namen HEX-Werte zu und hat dieselbe Struktur wie eine Farbe in der Theme-Konfiguration von Tailwind. In Tailwind 4 können Sie die CSS-Variablen auch in einen @theme-Block einfügen, nachdem Sie sie in --color-… umbenannt haben.
Sind die generierten Paletten barrierefrei?
Nicht automatisch. Eine Farbharmonie sagt nichts über den Kontrast zwischen Text und Hintergrund aus. Prüfen Sie jede geplante Kombination mit dem Kontrastprüfer.
Datenschutz
Paletten werden in Ihrem Browser erstellt. Ihre Farben werden weder gesendet noch gespeichert.