Farbwähler & Paletten-Generator

Jede Farbe auf dem Bildschirm lässt sich auf drei Arten beschreiben, und dieses Tool hält alle synchron: HEX ist die Kurzschreibweise in CSS und Design-Tools, RGB gibt an, wie viel rotes, grünes und blaues Licht sich zur Farbe mischen, und HSL – Farbton, Sättigung, Helligkeit – beschreibt sie so, wie Menschen tatsächlich über Farbe nachdenken: welcher Ton es ist, wie kräftig und wie hell oder dunkel. Ziehe das native Farbfeld, tippe einen HEX-Code ein oder ändere direkt ein R/G/B- oder H/S/L-Feld, und alle anderen Felder aktualisieren sich sofort. So wechselst du zwischen den Denkweisen, ohne selbst zu rechnen.

Der Farbkreis ist die Grundlage für sechs klassische Harmonieregeln, die alle automatisch aus deiner Grundfarbe entstehen. Komplementär stellt einer Farbe ihr Gegenüber zur Seite und liefert den stärksten Kontrast; analog wählt Nachbarn auf dem Kreis für einen ruhigen, stimmigen Eindruck; triadisch und tetradisch verteilen drei oder vier Farben gleichmäßig um den Kreis – lebendig, aber ausgewogen; geteilt komplementär entschärft das Komplementärpaar, indem es statt der Gegenfarbe deren beide Nachbarn nutzt; und monochrom bleibt bei einem einzigen Farbton und variiert nur die Helligkeit – oft die sicherste Wahl für eine Oberfläche, die eine einheitliche Markenfarbe in mehreren Abstufungen braucht.

Nicht jede gute Palette beginnt mit Farbtheorie – manchmal willst du einfach sehen, was dabei herauskommt. Der Zufallsgenerator (Leertaste drücken oder auf „Erzeugen“ klicken) liefert fünf Farben auf einmal, deren Farbtöne und Helligkeiten so abgestimmt sind, dass es weder matschig noch übertrieben pastellig wird. Sperre mit dem Schloss-Symbol jede Farbe, die du behalten willst, und erzeuge neu: Nur die entsperrten Farben ändern sich, sodass du eine Palette Schritt für Schritt aufbaust – ähnlich wie bei Tools wie Coolors. Ein Klick auf ein Farbfeld kopiert den HEX-Code, und mit den Schaltflächen unter der Palette kopierst du das ganze Set als CSS-Custom-Properties, SCSS-Variablen, Tailwind-Konfigurationsausschnitt oder JSON-Array oder exportierst eine Adobe-.ase-Farbfelddatei für Illustrator und Photoshop. Außerdem kannst du aus jedem Bild eine Palette extrahieren (lokal verarbeitet, nie hochgeladen) und Lieblingspaletten für später in deinem Browser speichern.

Eine schöne Farbe ist noch keine brauchbare: Text, dessen Farbe in der Helligkeit zu nah am Hintergrund liegt, kann unlesbar sein. Die Web Content Accessibility Guidelines (WCAG) legen dafür feste Schwellen fest: ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text auf Stufe AA und 7:1 für die strengere Stufe AAA. Die Kontrastprüfung berechnet das genaue Verhältnis zwischen deiner Farbe und weißem sowie schwarzem Text mit derselben Formel für die relative Leuchtdichte, die die WCAG-Spezifikation vorgibt, und zeigt, ob die jeweilige Kombination besteht – so entdeckst du einen kontrastarmen Button oder eine Überschrift vor der Veröffentlichung statt danach.