Farbpaletten-Generator
Basisfarbe wählen – sofort fünf fertige Harmoniepaletten mit HEX, RGB, HSL, CSS-Export und PNG-Download.
Häufige Fragen
Farbharmonie beschreibt Kombinationen von Farben, die nach optischen und ästhetischen Regeln gut zusammenpassen. Grundlage sind geometrische Beziehungen auf dem Farbkreis: Farben mit einem bestimmten Winkelabstand ergänzen sich in Kontrast oder Ähnlichkeit. Bekannte Harmonietypen sind Komplementär (180°), Analog (benachbarte Farbtöne), Triadisch (120° Dreiklang) und Tetradisch (90° Vierklang).
Komplementärfarben liegen sich auf dem Farbkreis genau gegenüber (180° Abstand) und erzeugen maximalen Kontrast. Analoge Farben sind Nachbarn auf dem Farbkreis (je ±15–30°) und wirken harmonisch und ruhig. Komplementärfarben eignen sich für starke Akzente und Call-to-Actions, analoge Paletten für gleichmäßige, aufeinander abgestimmte Designs.
HSL (Hue, Saturation, Lightness) bildet den Farbkreis direkt auf den H-Wert (0–360°) ab. Farbharmonien lassen sich dadurch als einfache Winkelberechnungen umsetzen: +180° für das Komplement, +120° für Triaden usw. Sättigung und Helligkeit bleiben bei harmonischen Varianten konstant, sodass die Paletten konsistent wirken. Im RGB-Farbraum wären dieselben Berechnungen weit aufwändiger.
Die CSS Custom Properties (--color-1 bis --color-N) können direkt in jede Stylesheet-Datei eingefügt werden. Sie erlauben es, Farben zentral in :root zu verwalten und per var(--color-1) überall im Projekt einzusetzen. Ändert sich die Basisfarbe später, reicht eine einzige Anpassung in :root, um das gesamte Design zu aktualisieren.
Triadische Farben teilen den Farbkreis in drei gleiche Teile (je 120° Abstand) und ergeben lebhafte, ausgewogene Kombinationen mit drei Farbtönen. Tetradische Farben bilden ein Rechteck auf dem Farbkreis (je 90° Abstand) und liefern vier Farbtöne mit reichhaltigem Spektrum. Tetradische Paletten sind vielseitiger, erfordern aber mehr Sorgfalt beim Einsatz, um Überladung zu vermeiden.
Farbpaletten für Design und Entwicklung
Ein schlüssiges Farbkonzept ist die Grundlage jedes überzeugenden Designs. Dieser Generator berechnet aus einer einzigen Basisfarbe fünf klassische Harmonietypen direkt im HSL-Farbraum – ohne externe Bibliotheken und ohne Serverzugriff. Alle Ergebnisse stehen sofort als HEX, RGB und HSL zum Kopieren bereit.
Die fünf Harmonietypen im Überblick
Komplementärpaletten setzen auf maximalen Kontrast (180° Abstand) und eignen sich für klare Akzente. Analoge Paletten (±15° und ±30°) wirken ruhig und kohärent. Triadische (120°) und tetradische (90°) Schemata bieten ausgewogene Mehrfarbkombinationen für komplexere Designs. Die monochromatische Variante liefert fünf Helligkeitsstufen desselben Farbtons – ideal für Schichten und Tiefe im Interface.
CSS-Export und PNG-Download
Mit einem Klick kopiert der Generator die gesamte Palette als CSS Custom Properties in die Zwischenablage – fertig zum Einfügen in jede Stylesheet-Datei. Der PNG-Export erzeugt einen Farbstreifen mit HEX-, RGB- und HSL-Werten, der sich direkt in Moodboards, Dokumentationen oder Design-Briefings einsetzen lässt.
