Farbwähler (Color Picker)

Farben auswählen und verwendbare Werte kopieren

Ein zuverlässiger Farbwähler sollte mehr leisten, als nur ein hübsches Quadrat anzuzeigen. Designer, Entwickler und Content-Ersteller benötigen dieselbe Farbe je nach Zweck oft in mehreren Formaten. CSS akzeptiert HEX, RGB und HSL, Designsysteme dokumentieren Tokens häufig als HEX, und schnelle Prototyp-Anpassungen gelingen in HSL oft leichter, weil Farbton, Sättigung und Helligkeit unabhängig voneinander geändert werden können. Dieses Tool zeigt die Formate nebeneinander an, sodass Sie die Farbe nur einmal wählen und den passenden Wert für Ihren Arbeitsablauf kopieren.

Alles geschieht lokal im Browser. Farbeingabe, Umrechnung und Kopier-Schaltflächen laufen mit clientseitigem JavaScript – es gibt kein Konto, keinen Upload und keine Verarbeitung auf einem Server. Damit eignet sich das Tool für private Markenpaletten, unveröffentlichte Produkt-Themes, Kundenprojekte und schnelle UI-Experimente, die Ihren Rechner nicht verlassen sollen.

Tints und Shades in Benutzeroberflächen einsetzen

Tints und Shades helfen einer einzelnen Markenfarbe, eine komplette Oberfläche zu tragen. Hellere Tints eignen sich für dezente Hintergründe, Hover-Zustände, Benachrichtigungsfelder und ausgewählte Zeilen. Dunklere Shades liefern Rahmen, gedrückte Zustände, Akzente für den Dunkelmodus oder Text mit starker Betonung, wenn die Ausgangsfarbe zu hell ist. Die Farbfelder hier behalten Farbton und Sättigung bei und verändern nur die Helligkeit, wodurch eine einfache Skala entsteht, die zur Basisfarbe passt.

Betrachten Sie die erzeugte Skala als Ausgangspunkt und nicht als fertiges Designsystem. Die menschliche Wahrnehmung ist nicht perfekt linear, und manche Farbtöne brauchen manuelle Anpassungen, damit sie gleichmäßig wirken. Blau und Violett vertragen oft große Helligkeitsbereiche, während Gelb dunklere Shades für gut lesbaren Text benötigen kann. Kopieren Sie die Werte, testen Sie sie in der echten Komponente und verfeinern Sie die Stufen, auf die es am meisten ankommt.

Die Wahl zwischen HEX, RGB und HSL

HEX ist kompakt und bei der Design-Übergabe weit verbreitet, daher eine gute Standardwahl für die Dokumentation. RGB ist hilfreich, wenn ein Tool numerische Rot-, Grün- und Blaukanäle verlangt oder Sie direkt in Bildschirmlicht denken. HSL ist meist das freundlichste Format für kleine Anpassungen: Drehen Sie den Farbton, um sich auf dem Farbkreis zu bewegen, senken Sie die Sättigung für einen ruhigeren Ton oder ändern Sie die Helligkeit für einen Tint oder Shade. Wenn alle drei Formate sichtbar sind, passieren weniger Fehler beim Wechsel zwischen Design-Tools, CSS-Dateien und Komponentenbibliotheken.