HSL-Farbwähler

Finde eine Farbe so, wie du über sie nachdenkst: Farbton rund ums Rad, zum Rand hin mehr Sättigung, dann die Helligkeit einstellen. Du bekommst hsl() für CSS und alle anderen Formate auf einen Blick.

Rund ums Rad änderst du den Farbton, zum Rand hin wird die Farbe gesättigter. Die Helligkeit stellst du mit dem L-Regler ein.

HEX

hsl(243, 75%, 59%)#4F46E5

Werte: zum Kopieren anklicken

Ausgewählte Farben

Hier erscheinen die Farben, die du auswählst. Wähle so viele, wie du möchtest. Sie bleiben hier, bis du sie importierst oder löschst.

Öffnet den Editor und fügt die Farben als Gruppe hinzu, mit Namen, Abstufungen, Kontrastprüfung und Code-Export.

So funktioniert’s

1Farbton und Sättigung wählen
Zieh rund ums Rad, um den Farbton zu ändern, und von der grauen Mitte zum Rand, um die Sättigung zu erhöhen. Ziehst du über den Rand hinaus, bleibt die Farbe voll gesättigt.
2Helligkeit einstellen
Verschiebe den L-Regler: 0 % ist Schwarz, 50 % die reinste Farbe und 100 % Weiß. Jeder Regler zeigt die Farben, zu denen er führt, und die Zahlenfelder nehmen exakte Werte an.
3Farben sammeln
Jede Auswahl landet mit HEX-Code und Namen im Raster darunter. Wähle so viele, wie du willst, kopiere sie oder entferne die, die du nicht brauchst.
4Im Editor öffnen
Mit „In den PickXColor-Editor importieren“ landen alle Farben als Gruppe im Editor, mit Namen, Abstufungen, Kontrastprüfung und Code-Export.

Häufige Fragen

Was ist HSL?

HSL beschreibt eine Farbe über den Farbton (die Position auf dem Farbkreis, 0–360°), die Sättigung (von Grau bis kräftig, 0–100 %) und die Helligkeit (von Schwarz über die reine Farbe bis Weiß, 0–100 %). Weil das leicht nachvollziehbar ist, wird HSL gern genutzt, um Farben von Hand anzupassen.

Wie nutze ich HSL in CSS?

Kopiere den hsl()-Wert, zum Beispiel hsl(243, 75%, 59%), und verwende ihn wie jede andere Farbe: color: hsl(243, 75%, 59%);. Alle Browser unterstützen das. Für hellere oder dunklere Varianten änderst du nur die letzte Zahl.

Was ist der Unterschied zwischen HSL und HSB?

Beide nutzen Farbton und Sättigung, aber der dritte Wert unterscheidet sich. Bei HSL ist 50 % Helligkeit die reinste Farbe und 100 % immer Weiß. Bei HSB (auch HSV) ist 100 % Hellwert die reinste Farbe, und Weiß erreichst du, indem du die Sättigung senkst. Nimm den HSB-Farbwähler, wenn du Photoshop, Figma oder Sketch gewohnt bist.

Warum wird das Rad schwarz oder weiß?

Das Rad zeigt alle Farbtöne und Sättigungen bei der aktuellen Helligkeit. Bei 0 % ist jede Farbe Schwarz, bei 100 % Weiß. Schieb den L-Regler zurück Richtung 50 %, dann siehst du die Farben wieder.

Ist das datenschutzsicher und DSGVO-konform?

Ja. Deine Auswahl wird vollständig in deinem Browser geöffnet und verarbeitet. Nichts wird hochgeladen, gespeichert oder an einen Server geschickt, und wir bekommen die Datei nie zu sehen. Es gibt kein Konto, kein Tracking und keine Cookies, und die Werkzeug-Seiten laden nichts von Drittanbietern. Da keine Daten aus deiner Datei bei uns ankommen, verarbeiten wir daraus auch keine personenbezogenen Daten.

Die ausgewählten Farben werden im lokalen Speicher deines Browsers abgelegt, damit sie ein Neuladen überstehen. Mit „Leeren“ oder durch Löschen der Website-Daten entfernst du sie.

Was kann ich mit den ausgewählten Farben machen?

Kopiere alle HEX-Codes auf einmal oder drücke „In den PickXColor-Editor importieren“. Der Editor fügt sie als benannte Gruppe auf einem unendlichen Board hinzu, mit Farbnamen, HEX-, RGB-, HSL-, OKLCH- und CMYK-Werten, Abstufungen im Tailwind-Stil, WCAG-Kontrastprüfung und Code-Export für CSS, Tailwind, SCSS, Swift und Jetpack Compose.

Ist das kostenlos?

Ja. Kostenlos, ohne Anmeldung, ohne Wasserzeichen und ohne Grenze, wie viele Farben du auswählst.

Weitere Wege, Farben auszulesen

Jedes Werkzeug läuft in deinem Browser und füllt dieselbe Farbsammlung.