Color Picker & Converter

Pick a color and convert between HEX, RGB, and HSL formats instantly.

HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)

Über dieses Tool

Ein Farbwähler lässt Sie eine Farbe visuell auswählen und ihren Wert in jedem benötigten Format ablesen: HEX für CSS und Designtools, RGB für Canvas und Bildbearbeitung, und HSL wenn Sie Helligkeit oder Sättigung ändern wollen, ohne den Farbton zu verschieben.

Die drei Formate beschreiben dieselbe Farbe unterschiedlich. HEX und RGB sind dieselbe Information in anderer Schreibweise – #2563EB ist exakt rgb(37, 99, 235). HSL ist nützlich beim Aufbau einer Palette, weil Sie den Farbton konstant halten und nur die Helligkeit variieren können, um einen konsistenten Satz heller und dunkler Töne zu erhalten.

Alles läuft lokal in Ihrem Browser, und jeder Wert lässt sich mit einem Klick direkt in Ihr Stylesheet oder Ihre Designdatei kopieren.

Farbe auswählen und umrechnen

  1. 1Nutzen Sie das Farbfeld zur visuellen Auswahl oder fügen Sie einen vorhandenen HEX-Wert ein, um von einer bekannten Farbe auszugehen.
  2. 2Lesen Sie die HEX-, RGB- und HSL-Werte, die sich beim Bewegen des Wählers gemeinsam aktualisieren.
  3. 3Klicken Sie auf einen Wert, um ihn in der von CSS erwarteten Syntax in die Zwischenablage zu kopieren.
  4. 4Passen Sie die Helligkeit in HSL an, um hellere und dunklere Varianten desselben Farbtons für eine Palette zu erzeugen.

Was dieses Tool kann

HEX, RGB und HSL gemeinsam

Alle drei Formate werden gleichzeitig angezeigt – keine zweite Umrechnung, kein Nachschlagen von Formeln.

Kopieren mit einem Klick

Jeder Wert wird in gültiger CSS-Syntax kopiert – #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%) – direkt einfügbar.

Visuelle Auswahl

Wählen Sie Farben nach Augenmaß mit dem nativen Farbfeld oder tippen Sie einen exakten Wert, wenn Sie eine Markenfarbe treffen müssen.

Kein Konto, kein Upload

Läuft vollständig in Ihrem Browser. Nichts wird gespeichert, und nach dem Laden funktioniert das Tool offline.

Häufige Fragen

Wie rechne ich HEX in RGB um?

Ein HEX-Code besteht aus drei Paaren hexadezimaler Ziffern für Rot, Grün und Blau. #2563EB teilt sich in 25, 63 und EB, dezimal 37, 99 und 235 – also rgb(37, 99, 235). Dieses Tool rechnet automatisch mit, während Sie wählen.

Was ist der Unterschied zwischen RGB und HSL?

RGB beschreibt, wie viel rotes, grünes und blaues Licht gemischt wird. HSL beschreibt Farbton (welche Farbe im Kreis), Sättigung (wie kräftig) und Helligkeit (wie hell). HSL ist für Menschen intuitiver: für eine dunklere Version derselben Farbe senken Sie nur die Helligkeit.

Welches Format soll ich in CSS verwenden?

Alle drei sind in jedem modernen Browser gültig. HEX ist in Codebasen und Design-Übergaben am verbreitetsten. RGB ist praktisch, wenn Sie Transparenz über rgba() brauchen. HSL eignet sich am besten für systematische Farbskalen.

Was bedeutet der 8-stellige HEX-Code?

Ein 8-stelliger HEX-Wert ergänzt am Ende zwei Zeichen für die Alpha-Transparenz – #2563EBFF ist vollständig deckend, #2563EB80 etwa 50% transparent. Alle modernen Browser unterstützen das.

Werden meine Farbdaten irgendwohin gesendet?

Nein. Die Farbumrechnung ist einfache Arithmetik in Ihrem Browser. Nichts wird übertragen oder gespeichert.

Verwandte Tools