Color Picker

In Farbton, Sättigung und Helligkeit denken

Eine Farbe in RGB Kanal für Kanal zusammenzusetzen ist, als würde man ein Boot über drei Propeller steuern – möglich, aber nichts entspricht der Absicht. HSL passt dagegen dazu, wie Menschen Farbe beschreiben: welche Farbe (Farbton), wie kräftig (Sättigung), wie hell (Helligkeit). Eine produktive Routine arbeitet die Regler von oben nach unten ab: Parke zuerst den Farbton in der richtigen Region – Rottöne nahe 0°, Gelb um 60°, Grün um 120°, Cyan bei 180°, Blau bei 220–250°, Violett bei 270–300° –, zieh dann die Sättigung vom Vollton herunter, bis die Farbe aufhört zu schreien, und setze zuletzt die Helligkeit passend zum Kontext: Text will die Extreme, Hintergründe liegen nahe daran, Markenfarben sitzen meist zwischen 35 % und 60 %.

Regler, Farbkreis oder Code – derselbe Zylinder

Farbkreise und Schieberegler zeigen denselben HSL-Zylinder: Der Kreis stellt den Farbton als Winkel dar, die Sättigung als Radius, und ein zusätzliches Bedienelement ergänzt die Helligkeit. Schieberegler tauschen die auf einen Blick erfassbare Geometrie des Kreises gegen Präzision – jede Dimension bewegt sich unabhängig, die Pfeiltasten schieben um einzelne Schritte weiter, und der Verlauf auf jeder Reglerbahn zeigt schon vor der Bewegung genau, wohin es geht. Diese Vorschau ist hier live: Änderst du den Farbton, färbt sich die Sättigungsbahn sofort für diesen Farbton neu ein.

Der Haken an HSL – und warum auch OKLCH dabeisteht

Die Helligkeit in HSL ist eine geometrische Bequemlichkeit, keine Messung der Wahrnehmung. Gelb mit hsl(60, 100%, 50%) wirkt deutlich heller als Blau mit hsl(240, 100%, 50%), obwohl die Zahl identisch ist – und genau so entstehen UI-Paletten mit „gleicher Helligkeit“, in denen manche Farbfelder leuchten und andere düster wirken. Die Formattabelle zeigt deshalb immer auch OKLCH, den modernen CSS-Farbraum, dessen L-Wert der empfundenen Helligkeit über alle Farbtöne hinweg folgt. Ein praktischer Ablauf: hier zügig in HSL zusammenstellen, dann die OKLCH-L-Werte der Paletteneinträge vergleichen – klaffen sie weit auseinander, wird die Palette ungleichmäßig aussehen.

Von dieser Seite in dein Projekt

• CSS: Kopiere für maximale Kompatibilität die HEX-Zeile – oder die oklch()-Zeile für moderne Stylesheets und Wide-Gamut-Tauglichkeit.
• Design-Werkzeuge: Figma und Sketch nehmen HEX direkt an; die HSV/HSB-Zeile entspricht ihren internen Farbwählern.
• Arbeiten rund um den Druck: Die CMYK-Zeile ist die übliche naive Näherung – nimm sie als Orientierung, nicht als Druckvorstufe.
• Für später: Mit „In ‚Meine Farben‘ speichern“ landet die Farbe in der Ablage, die alle Werkzeuge dieser Seite gemeinsam nutzen.

Nichts von dem, was du auswählst, verlässt deinen Browser – einmal geladen, funktioniert die Seite offline. Wenn die gesuchte Farbe nur in einem Foto oder Screenshot steckt, wechsle zum Farbwähler für Bilder auf der Startseite; und bevor du dich auf ein Paar aus Text- und Hintergrundfarbe festlegst, schick es durch den Kontrast-Checker.