So funktioniert es
- 1Grundfarbe per Farbwähler oder als HEX/RGB eingeben – oder „Zufallsfarbe“ zur Inspiration drücken.
- 2Farbmodell wählen: OKLCH hält die wahrgenommene Helligkeit gleich, HSL nutzt den klassischen Farbkreis.
- 3Komplementäre, analoge, triadische, split-komplementäre, tetradische, quadratische und monochrome Paletten ansehen; ein Klick auf ein Farbfeld macht es zur neuen Grundfarbe.
- 4„Diese Palette exportieren“ wählen und als CSS-Variablen oder HEX-Liste kopieren; für Text/Hintergrund-Paare den Kontrastprüfer öffnen.
Die Farbharmonien im Überblick
Komplementär kombiniert zwei gegenüberliegende Farben des Farbkreises (180°) und erzeugt starken Kontrast. Analog verbindet Nachbarfarben (±30°) und wirkt ruhig und natürlich. Triadisch teilt den Kreis in drei Farben im Abstand von 120°; split-komplementär nimmt statt der Gegenfarbe deren zwei Nachbarn (150° und 210°) und wirkt ausgewogener. Tetradische (Rechteck) und quadratische Harmonien liefern reiche Vierfarb-Paletten, monochrome Paletten bestehen aus helleren und dunkleren Stufen eines Farbtons.
HSL oder OKLCH?
Dreht man in HSL den Farbton, springt die wahrgenommene Helligkeit: Gelb wirkt bei gleicher Sättigung und Helligkeit viel heller als Blau. OKLCH ist ein wahrnehmungsorientiertes Modell, das Helligkeit und Buntheit beim Drehen konstant hält – die Palette wirkt dadurch ausgeglichener. Farben außerhalb des sRGB-Raums werden durch Verringern der Buntheit in den darstellbaren Bereich geholt. HSL eignet sich für Ergebnisse nahe am klassischen Malerfarbkreis, OKLCH für UI- und Markenpaletten.
Kontrast und Barrierefreiheit
Unter jedem Farbfeld steht das WCAG-Kontrastverhältnis zu weißer (◻) und schwarzer (◼) Schrift: ab 4,5:1 ist AA für normalen Text erfüllt (grün), 3:1 bis 4,5:1 reicht nur für große Schrift (gelb), darunter ist es für Text zu schwach (rot). Für Websites sollten die tatsächlichen Text-Hintergrund-Paare zusätzlich im Kontrastprüfer getestet werden. Alle Berechnungen laufen in Ihrem Browser.
Häufige Fragen
Wie finde ich die Komplementärfarbe?
Indem man den Farbton im Farbkreis um 180° dreht. Das Tool macht das in HSL oder OKLCH und gibt den HEX-Wert aus.
Welche Farben passen zusammen?
Farben mit festen Winkeln im Farbkreis: gegenüber (komplementär), benachbart (analog), 120° Abstand (triadisch) oder 90° Abstand (Quadrat). Monochrome Paletten harmonieren immer.
Kann ich die Palette als CSS exportieren?
Ja. „Diese Palette exportieren“ klicken, CSS-Variablen wählen und kopieren – Sie erhalten einen :root-Block mit --color-…-Variablen. Eine HEX-Liste gibt es ebenfalls.
Zeigt das Tool, wie sich Malfarben mischen?
Nein, es arbeitet mit Bildschirmfarben (RGB). Wie echte Pigmente sich mischen, zeigt das Werkzeug zum Farbenmischen.
Mit den Ergebnissen nicht zufrieden?
Sprechen Sie mit Webin Agency über schnelle, SEO-freundliche Websites, E-Commerce und Google-Ads-Betreuung.