HEX-Farbwähler

Rechnen Sie jede HEX-Farbe in RGB und HSL um oder wählen Sie eine neue nach Augenmaß.

Läuft in Ihrem Browser
Keine Uploads
Kein Konto

Ihr Browser-Tool wird geladen…

Was HEX-Farbwähler macht

Geben Sie einen HEX-Code wie #3157D5 oder die Kurzform #35D ein, und Farbfeld, RGB- und HSL-Werte aktualisieren sich beim Tippen. Oder klicken Sie auf das Farbfeld, um den Farbwähler Ihres Systems zu öffnen und eine Farbe nach Augenmaß zu wählen. So übersetzen Sie schnell eine Farbe aus einem Designtool in rgb() für CSS oder prüfen, wozu sich ein kurzer HEX-Code erweitert.

Ein Bild ist nicht nötig. Möchten Sie doch eine Farbe aus einem Screenshot übernehmen, öffnen Sie „Weitere Optionen“ und ziehen Sie das Bild dorthin. Zuletzt aus einem Bild gewählte Farben bleiben als Farbfelder erhalten. Um die Farben eines ganzen Bildes zu analysieren, verwenden Sie das Tool Dominante Farbe ermitteln.

Beispiel

Eingabe

#35D

Ergebnis

HEX #3355DD
RGB rgb(51, 85, 221)
HSL hsl(228, 71%, 53%)

Jede Ziffer eines 3-stelligen Codes wird verdoppelt, #35D ist also #3355DD.

Anleitung: HEX-Farbwähler

Geben Sie unter „HEX-Farbe“ einen Code ein oder klicken Sie auf das Farbfeld, um eine Farbe zu wählen.
Lesen Sie die RGB- und HSL-Werte unter dem großen Farbfeld ab.
Klicken Sie auf „Kopieren“, um den HEX-Code zu kopieren, oder kopieren Sie RGB oder HSL aus ihren eigenen Feldern.

Gut zu wissen

8-stellige HEX-Codes mit Alpha wie #3157D580 werden nicht akzeptiert. Verwenden Sie die ersten sechs Ziffern und legen Sie die Deckkraft in CSS separat fest.
Auf dieser Seite wird nur HEX als Eingabe akzeptiert. Die Ausgabe umfasst HEX, RGB und HSL; CMYK oder Pantone gibt es nicht.
HSL-Werte werden auf ganze Zahlen gerundet, sodass die Rückrechnung in RGB um eine Einheit abweichen kann.

Fragen zu HEX-Farbwähler

Wie rechne ich HEX in RGB um?

Teilen Sie die sechs Ziffern in drei Paare und rechnen Sie jedes von Basis 16 in Basis 10 um. Aus #3157D5 werden 31, 57 und D5, also 49, 87 und 213. Geben Sie den Code hier ein, und rgb(49, 87, 213) erscheint sofort.

Was ist eine 3-stellige HEX-Farbe?

Eine Kurzschreibweise, bei der jede Ziffer verdoppelt wird: #35D bedeutet #3355DD, und #FFF bedeutet #FFFFFF. Das funktioniert nur bei Farben mit sich wiederholenden Paaren, die meisten Markenfarben brauchen daher alle sechs Ziffern.

Wann sollte ich HSL statt HEX verwenden?

HSL lässt sich leichter von Hand anpassen. Wenn Sie nur den letzten Wert ändern, wird eine Farbe heller oder dunkler, was für Hover-Zustände und Abstufungen praktisch ist. HEX ist kürzer und das, was die meisten Designtools exportieren.