Was ist Farbkreis?

Wähle eine Grundfarbe und sieh komplementäre, analoge, triadische, split-komplementäre, tetradische und monochrome Schemata auf einem interaktiven Rad. Jede Farbprobe zeigt ihr WCAG-Kontrastverhältnis zu Weiß und Schwarz, und die Palette lässt sich als Text oder teilbares PNG exportieren.

Das Rad arbeitet mit HSL, daher ziehen Sie einen Grundton oder geben einen beliebigen HEX-Wert ein, und die passenden Felder rücken in Echtzeit an ihren Platz. Die Regler für Sättigung und Helligkeit verändern das ganze Schema gleichzeitig. Jede erzeugte Farbe lässt sich mit einem Klick als HEX, RGB, HSL, CMYK oder OKLCH kopieren, und das Rad markiert jeden Harmoniepunkt mit einem beschrifteten Kreis, damit Sie die Beziehungen erkennen.

Anleitung

1. Klicken oder ziehen Sie auf dem Farbrad, um Ihren Grundton auszuwählen, oder geben Sie einen bestimmten HEX-Wert in das Eingabefeld ein.
2. Wählen Sie einen Harmonietyp (komplementär, analog, triadisch, split-komplementär oder tetradisch), um passende Farben auf dem Rad hervorgehoben zu sehen.
3. Kopieren Sie jede generierte Farbe als HEX, RGB, HSL, CMYK oder OKLCH per Klick auf das Farbfeld. Exportieren Sie die gesamte Palette für Ihre Design-Tools.

Wann verwenden

• Drei oder vier Akzentfarben für ein Marken-Kit auswählen, sobald die Primärfarbe feststeht.
• Eine Schaltflächenfarbe wählen, die visuell zum Hintergrund kontrastiert, für maximalen Kontrast.
• Eine UI-Palette bauen, in der verwandte Töne ruhig wirken sollen, statt zu beißen.

Ergebnis

Ein Webdesigner wählt #E87040 als Markenfarbe, wechselt zur triadischen Harmonie und erhält drei ausgewogene Akzentfarben für seine Landingpage — alles mit einem Klick.

Häufige Fragen

Was unterscheidet analoge von triadischen Harmonien?

Analog nimmt Farben, die auf dem Rad benachbart sind (innerhalb von rund 30 Grad), und wirkt ruhig und einheitlich. Triadisch verteilt drei Farben in 120-Grad-Abständen für ein kontrastreiches, ausgewogenes Schema, das einem Design Schwung verleiht.

Wann sollte ich Komplementär statt geteilter Komplementär wählen?

Komplementär nutzt zwei gegensätzliche Töne für maximale Wucht, beißt sich aber bei voller Sättigung. Die geteilte Variante kombiniert Ihre Basis mit den beiden Nachbarn des Gegentons: gleiche Spannung, sanfterer Zusammenstoß, leichter auszubalancieren.

Warum ändern sich die Harmoniefarben, wenn ich den Helligkeitsregler bewege?

Das Rad behält die relativen Farbtonabstände bei, wendet aber Sättigung und Helligkeit auf jedes Ergebnis an. So sind analoge Grüntöne bei 40 Prozent Helligkeit alle in einem dunklen Waldgrün, statt Dunkelgrün mit Neongrün zu mischen.

Kann ich die Palette als CSS-Variablen oder im Format von Designtools bekommen?

Klicken Sie auf eine beliebige Farbprobe, um HEX, RGB, HSL, CMYK oder OKLCH in die Zwischenablage zu kopieren. Von dort geht es direkt in eine CSS-Datei (--brand-primary: #E87040), in das Hex-Feld von Figma oder in die Custom-Color-Konfiguration von Tailwind.

Ist die Tetrade dasselbe wie eine rechteckige Harmonie?

Ja. Die Tetrade (auch rechteckig genannt) wählt vier Farben, die auf dem Rad ein Rechteck bilden, also zwei Komplementärpaare. Die Palette ist reicher, aber ein Ton muss dominieren, sonst wirkt das Design überladen.

Ähnliche Tools