Farbcode-Umrechner (HEX, RGB, HSL)

So funktioniert es

Schreiben Sie eine Farbe pro Zeile; jede Zeile wird für sich erkannt, eine Liste darf HEX, RGB und HSL also mischen. HEX wird in der sechsstelligen Form (#2F6FED) und in der dreistelligen Kurzform (#2F6) gelesen, das Doppelkreuz davor ist freigestellt. Für RGB schreiben Sie rgb(154, 52, 18) oder einfach die drei Zahlen mit Komma oder Leerzeichen getrennt; ein Kanal außerhalb von 0 bis 255 wird zurückgewiesen und nicht stillschweigend gekappt, ein Tippfehler fällt dadurch auf, statt eine falsche Farbe zu liefern. HSL erwartet den Farbton in Grad von 0 bis 360, Sättigung und Helligkeit in Prozent; die Schreibweisen rgba() und hsla() werden ebenfalls gelesen, der Transparenzwert wandert aber nicht in die Ausgabe. Wählen Sie im Ausgabeformat entweder alle drei Schreibweisen nebeneinander oder genau die eine, die Sie einsetzen wollen. Jede erkannte Farbe erscheint als sichtbares Farbfeld neben ihrem HEX-Wert, Sie sehen das Ergebnis also und müssen den Zahlen nicht vertrauen. Nicht lesbare Zeilen werden in der Ausgabe gekennzeichnet.

Dieses Werkzeug ist auch als hex in rgb umrechnen, farbcode umrechner, rgb in hex, hsl umrechnen, hex farbcode konvertieren bekannt.

Was ist HEX-Farbcode?

Ein HEX-Code schreibt die Rot-, Grün- und Blauanteile einer Farbe im Sechzehnersystem, als sechs Stellen hinter einem Doppelkreuz: #9A3412 zum Beispiel. Das erste Paar trägt Rot, das mittlere Grün, das letzte Blau; eine dreistellige Kurzform wie #F00 wird gelesen, indem jede Stelle verdoppelt wird. Weil die Schreibweise kurz, eindeutig und leicht zu kopieren ist, hat sie sich als Standardsprache für Farbe in CSS, in Designwerkzeugen und in Gestaltungshandbüchern durchgesetzt — die meisten Farben, die Sie von einer Gestalterin bekommen, kommen in dieser Form.

Was ist RGB?

RGB beschreibt eine Farbe so, wie ein Bildschirm sie tatsächlich erzeugt: als Stärke von rotem, grünem und blauem Licht, jeweils auf einer Skala von 0 bis 255. Die Schreibweise rgb(154, 52, 18) nennt alle drei Kanäle offen, und man sieht unmittelbar, was das Anheben oder Senken eines einzelnen Kanals bewirkt. Sie trägt genau dieselbe Information wie ein HEX-Code, nur in einem anderen Zahlensystem. Zu RGB greift man, wenn Programmcode mit den einzelnen Kanälen rechnen soll.

Was ist HSL?

HSL beschreibt eine Farbe über drei Größen, die näher an der menschlichen Wahrnehmung liegen: Farbton (die Stelle auf dem Farbkreis, 0 bis 360 Grad), Sättigung und Helligkeit. Eine hellere, dunklere oder blassere Fassung derselben Farbe entsteht dadurch, dass Sie eine einzige Zahl ändern; deshalb arbeiten Gestalter beim Aufbau einer Palette und beim Ableiten eines Farbschemas gern damit. CSS unterstützt die Schreibweise hsl() unmittelbar, ein hier abgelesener Wert lässt sich also ohne weitere Umrechnung einsetzen.

Sind HEX und RGB dieselbe Farbe?

Ja — HEX und RGB sind zwei Schreibweisen derselben Information: #9A3412 und rgb(154, 52, 18) bezeichnen genau dieselbe Farbe, denn hexadezimal 9A ist dezimal 154. Die Wahl zwischen beiden hängt nur davon ab, wohin der Wert geht, nicht davon, was er bedeutet. HSL ist etwas anderes: es beschreibt dieselbe Farbe über Farbton, Sättigung und Helligkeit statt über drei Lichtkanäle. Weil diese Werte für die Lesbarkeit auf ganze Zahlen gerundet werden, kann ein Umweg über HSL um ein bis zwei Einheiten abweichend zurückkommen. Auf dem Bildschirm sieht die Farbe unverändert aus, der Code stimmt aber nicht mehr Zeichen für Zeichen — und darauf kommt es an, wenn der Code selbst das Verbindliche ist.

Welche Schreibweise wofür?

Alle drei Schreibweisen können dieselbe Farbe tragen; entscheidend ist, wohin der Wert geht. Für einen einzelnen Wert in einer Stylesheet-Datei ist HEX die kürzeste und die am weitesten verbreitete Form.

Rechnen Sie mit den einzelnen Kanälen, liefert RGB die drei Zahlen direkt. Leiten Sie eine hellere oder dunklere Variante derselben Farbe ab, ändern Sie in HSL eine Zahl statt drei.

• HEX → kurz, üblich in CSS und in Designwerkzeugen
• RGB → wenn die Kanäle einzeln gebraucht werden
• HSL → für Farbfamilien und helle oder dunkle Varianten

Warum ein Wert um eine Einheit abweicht

HSL-Werte sind gebrochene Zahlen; damit die Ausgabe lesbar bleibt, werden sie auf ganze Zahlen gerundet. Rechnen Sie einen HEX-Code nach HSL und wieder zurück, kann ein Kanal um ein bis zwei Einheiten abweichen.

Auf dem Bildschirm ist der Unterschied nicht zu sehen, vorhanden ist er trotzdem. Muss ein Code exakt so bleiben, wie er vergeben wurde — eine Hausfarbe, ein Wert aus einem Gestaltungshandbuch —, führen Sie den HEX-Wert als Quelle und behandeln Sie die HSL-Angabe als daraus abgeleitet.

Häufige Fragen

Wie rechne ich einen HEX-Code in RGB um?

Schreiben Sie den Code in das linke Feld und stellen Sie das Ausgabeformat auf RGB. Das Ergebnis erscheint beim Tippen im rechten Feld, daneben zeigt ein Farbfeld die Farbe selbst.

Kann ich mehrere Farben auf einmal umrechnen?

Ja. Schreiben Sie eine Farbe pro Zeile. Die gesamte Liste wird in einem Durchgang umgerechnet und behält ihre Reihenfolge, eine Palette kommt also als Palette zurück.

Wird die HEX-Kurzform unterstützt?

Ja. Ein dreistelliger Code wie #2F6 wird gelesen, indem jede Stelle verdoppelt wird — genau so, wie ein Browser ihn auffasst. Das Doppelkreuz davor können Sie weglassen.

Warum wird meine Farbe nicht erkannt?

Meist liegt ein Wert außerhalb des zulässigen Bereichs oder es fehlt eine Klammer. RGB-Kanäle müssen zwischen 0 und 255 liegen, der Farbton zwischen 0 und 360, Sättigung und Helligkeit zwischen 0 und 100. Fehlerhafte Zeilen werden einzeln gekennzeichnet, Sie müssen also nicht die ganze Liste durchsehen.