PickXColorFarbe auslesen
EnglishENEditor öffnen

HSB-Farbwähler

Der Farbwähler, den Designer aus Photoshop und Figma kennen: Farbton am Ring wählen, dann Sättigung und Hellwert im Quadrat. HSB, HEX und alle anderen Formate ändern sich schon beim Ziehen.

Zieh am Ring, um den Farbton zu wählen, dann im Quadrat: nach rechts mehr Sättigung, nach oben mehr Helligkeit.

hsb(243, 69%, 90%)#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

  1. Der HSB-Farbwähler mit Farbtonring um ein Quadrat für Sättigung und Hellwert und Reglern darunter

    1Farbton am Ring wählen

    Zieh am Ring entlang, um den Farbton zu wählen. Das Quadrat in der Mitte wechselt sofort zu diesem Farbton.

  2. Die gewählte Farbe mit HSB-Wert, Namen und HEX-, RGB-, HSL-, HSV-, OKLCH- und CMYK-Werten

    2Im Quadrat feinjustieren

    Zieh nach rechts für mehr Sättigung und nach oben für mehr Helligkeit, oder tippe exakte Werte in die Felder für H, S und B. Oben rechts liegt die reinste Farbe.

  3. Ein Raster ausgewählter Farbfelder mit HEX-Codes und Farbnamen

    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.

  4. Der PickXColor-Editor mit den importierten Farben als benannte Gruppe von Karten

    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 HSB?

HSB beschreibt eine Farbe über den Farbton (0–360° auf dem Farbkreis), die Sättigung (0–100 %, von Grau bis kräftig) und den Hellwert (0–100 %, von Schwarz bis volle Intensität). Auf diesem Modell beruhen die Farbwähler in Photoshop, Illustrator, Figma und Sketch.

Sind HSB und HSV dasselbe?

Ja. HSB (Hue, Saturation, Brightness) und HSV (Hue, Saturation, Value) sind zwei Namen für dasselbe Modell, die Werte stimmen also genau überein. Deshalb steht es in der Werteliste als HSV.

Kann ich HSB in CSS verwenden?

Nein, CSS kennt keine hsb()-Funktion. Kopiere stattdessen den HEX-, RGB-, HSL- oder OKLCH-Wert aus der Liste: Sie beschreiben genau dieselbe Farbe.

Wie übernehme ich Werte aus Figma oder Photoshop?

Tippe die Zahlen für H, S und B in die Felder neben den Reglern, oder füge den HEX-Code ins HEX-Feld ein und drücke Enter. Pfeiltasten ändern ein Feld um 1, mit Shift um 10.

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.