Farb-Umrechner (HEX, RGB, HSL)
Gib eine Farbe als HEX oder RGB ein und erhalte sofort alle drei Schreibweisen – HEX, RGB und HSL – für CSS und Design.
Farben zwischen HEX, RGB und HSL umrechnen
Der Umrechner nimmt eine Farbe als HEX (#ff8800, auch kurz #f80) oder als
RGB (rgb(255, 136, 0)) entgegen und zeigt sie zugleich in allen drei
CSS-Schreibweisen. So wechselst du mühelos zwischen dem HEX-Wert aus einem
Design-Tool und dem HSL-Wert, mit dem sich Helligkeit und Sättigung leichter
anpassen lassen.
HEX, RGB oder HSL – wann was?
HEX und RGB beschreiben dieselbe Farbe über ihre Rot-, Grün- und Blau-Anteile. HSL (Farbton, Sättigung, Helligkeit) ist oft intuitiver, wenn du eine Farbe gezielt abdunkeln oder entsättigen willst. Die Grundlagen erklärt der Glossareintrag RGB und HSL; die häufige Frage nach dem Unterschied beantwortet die FAQ zu HEX und RGB.
Quellen
Rundung der HSL-Werte auf ganze Zahlen
Häufige Fragen
Was ist der Unterschied zwischen HEX und RGB?
Es gibt keinen inhaltlichen Unterschied: HEX und RGB beschreiben exakt dieselbe
Farbe. RGB nennt die drei Farbkanäle als Zahlen, zum Beispiel rgb(255, 136, 0).
HEX schreibt genau dieselben drei Werte hexadezimal und hängt sie aneinander:
#ff8800. Jeweils zwei HEX-Stellen stehen für einen Kanal – ff für 255, 88
für 136, 00 für 0.
HEX ist kompakt und lässt sich gut kopieren, weshalb Design-Tools es bevorzugen.
RGB ist lesbarer, wenn man einzelne Kanäle im Kopf nachrechnen will, und erlaubt
mit rgba() zusätzlich eine Transparenz. Beide Schreibweisen wandelt der
Farb-Umrechner ineinander um – zusammen mit HSL.