colorPaletteFinder basiert auf klassischen Prinzipien der Farblehre, kombiniert mit den Anforderungen modernen digitalen Designs. Wir haben eine nahtlose Oberfläche gestaltet, bei der du Farbtöne nicht manuell berechnen oder Kontrastverhältnisse selbst prüfen musst — das Tool übernimmt die Schwerstarbeit für dich.
1. Der interaktive Farbkreis
Im Zentrum von colorPaletteFinder steht der interaktive HSL-Farbkreis. Anders als herkömmliche rechteckige Farbauswahlfelder bildet unser kreisförmiger Farbkreis die Dynamik der Farblehre direkt ab.
- Farbton (der Winkel): Ziehe den Punkt um den äußeren Rand, um die grundlegende Farbfamilie zu ändern (Rot, Blau, Grün usw.).
- Sättigung (Abstand zum Mittelpunkt): Ziehe den Punkt zur Mitte, um die Farbe gräulich und gedämpft zu machen, oder zum Rand für maximale Leuchtkraft.
- Helligkeit: Wird dynamisch angepasst, damit die erzeugten Harmoniefarben ein ausgewogenes visuelles Gewicht behalten.
Bewege den Punkt der Primärfarbe und beobachte, wie sich alle abhängigen Harmoniefarben sofort in Echtzeit anpassen und dabei ihre strengen mathematischen Beziehungen beibehalten.
2. Eine Harmonieregel wählen
Je nach Ästhetik, die du erreichen möchtest, kannst du aus sieben verschiedenen, mathematisch erprobten Farbharmonieregeln wählen:
Komplementär
Farben, die im Farbkreis direkt gegenüberliegen (180° auseinander). Erzeugt maximalen Kontrast und auffällige Energie.
Analog
Farben, die im Farbkreis nebeneinander liegen (durch 30° getrennt). Das erzeugt ein ruhiges, angenehmes und natürlich wirkendes Design.
Triadisch
Drei Farben, die gleichmäßig um den Farbkreis verteilt sind (120° auseinander). Bietet hohen Kontrast bei besserer Farbbalance als komplementäre Schemata.
Geteilt-komplementär
Eine Basisfarbe plus die beiden Farben neben ihrem Komplement. Bietet den starken visuellen Kontrast des komplementären Schemas, jedoch mit weniger Spannung.
Monochromatisch
Variationen in Helligkeit und Sättigung eines einzelnen Farbtons. Erzeugt einen stimmigen, klaren und eleganten Look.
3. WCAG-Kontrastprüfung
Eine schöne Palette zu erstellen ist nur die halbe Arbeit; die Farben müssen auch für alle Nutzer zugänglich sein. Insbesondere muss Text vor Hintergrundfarben lesbar sein.
colorPaletteFinder verfügt über einen integrierten Kontrastprüfer am Ende des Tools. Wähle zwei beliebige erzeugte Farben (z. B. einen Hintergrund und eine Textfarbe), und das Verhältnis wird berechnet.
- AA-Standard: Erfordert ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text und 3:1 für großen Text.
- AAA-Standard: Der Goldstandard der Barrierefreiheit, der ein Verhältnis von mindestens 7:1 für normalen Text erfordert.
4. Kopieren und Exportieren
Sobald deine perfekte Palette erstellt ist, lässt sie sich mühelos in dein Projekt einbinden.
Fahre mit der Maus über eine beliebige Farbfläche im Palettenstreifen, um ihren genauen HEX-Code einzublenden. Ein Klick auf die Farbfläche kopiert den sechsstelligen HEX-Code sofort in deine Zwischenablage (z. B. #1A2B3C), bereit zum direkten Einfügen in CSS, Tailwind-Konfigurationen, Figma oder Adobe Creative Cloud.