HSL-HEX-Umrechner

Zuerst wird HSL in RGB umgerechnet. Danach wird jeder RGB-Kanal als zweistellige Hexadezimalzahl formatiert. Sättigung und Helligkeit werden auf 0 bis 1 normiert, zwei Hilfswerte aus der Helligkeit berechnet und der Farbton den roten, grünen und blauen Kanälen zugeordnet. Die drei Kanäle ergeben den Hex-Code.

Der Farbton liegt zwischen 0 und 360 Grad auf dem Farbkreis. 0 und 360 Grad stehen beide für Rot, 120 Grad für Grün und 240 Grad für Blau. Sättigung und Helligkeit werden als Prozentwerte von 0 bis 100 eingegeben. Bei 0 % Sättigung entsteht ein Grauton, bei 0 % Helligkeit Schwarz und bei 100 % Helligkeit Weiß.

120 Grad entsprechen Grün. Eine Sättigung von 100 % macht die Farbe vollständig gesättigt, und 50 % Helligkeit liegt am kräftigsten Punkt dieses Farbtons. Das ergibt RGB(0, 255, 0). Die drei Werte werden als 00, ff und 00 geschrieben, also als #00ff00.

Die HSL-zu-RGB-Berechnung folgt der Formel des CSS Color Module. Gerundet wird erst am Ende, wenn jeder Kanal als ganze Zahl von 0 bis 255 in den Hex-Code geschrieben wird. Deshalb können leicht unterschiedliche HSL-Werte denselben Hex-Code ergeben, obwohl die Berechnung selbst deterministisch ist.

RGB beschreibt eine Farbe über die Anteile von Rot, Grün und Blau, also über die Kanäle, die ein Bildschirm darstellt. HSL beschreibt denselben Farbraum mit Farbton, Sättigung und Helligkeit. HSL ist oft leichter zu verändern, während RGB und Hex direkt in vielen technischen Schnittstellen vorkommen.

Ja. Der sechsstellige Hex-Code wie #336699 kann direkt in CSS, HTML und vielen Designprogrammen verwendet werden. Zusätzlich liefert der Rechner eine kopierbare rgb()- und hsl()-Schreibweise. Die Ausgaben enthalten technische Syntax und bleiben deshalb in der standardisierten Schreibweise.