Farbkonverter (HEX, RGB, HSL)
Eingaben
| Eingabeformat | HEX |
|---|---|
| HEX-Farbcode | #3B82F6 |
| Rot | 59 |
| Grün | 130 |
| Blau | 246 |
| Farbton | 217 |
| Sättigung | 91 |
| Helligkeit | 60 |
Farbkonverter (HEX, RGB, HSL)
Farbe zwischen HEX, RGB und HSL umrechnen. Einen Wert in einem der drei Formate eingeben und die entsprechenden Codes in den anderen beiden ablesen — bereit zum Einfügen in CSS.
Eingaben
Farbeingabe
Ergebnisse
Geben Sie einen Wert ein, um die Ergebnisse zu sehen.
Umgerechnete Werte
Farbkonvertierung (HEX, RGB, HSL)
Ein Farbkonverter übersetzt eine Farbe zwischen den drei im Web am häufigsten verwendeten Notationen: HEX, RGB und HSL. Jede beschreibt dieselbe Farbe auf andere Weise. Entwickler und Gestalter, die an Stylesheets arbeiten, müssen Werte regelmäßig von einem Format ins andere übertragen — etwa einen HEX-Code aus einem Design-Werkzeug in eine RGB-Funktion einfügen oder eine Farbe in HSL anpassen, weil sich dort intuitiver arbeiten lässt.
Drei Schreibweisen für eine Farbe
RGB definiert eine Farbe durch den Anteil von Rot-, Grün- und Blaulicht, wobei jeder Kanal eine Ganzzahl von 0 bis 255 ist. HEX ist dieselbe Information in Basis 16: zwei Hexadezimalziffern pro Kanal, zu einem sechsstelligen Code zusammengefasst, z. B. #3B82F6. Da beide Formate dieselben acht Bits pro Kanal speichern, ist die Umrechnung zwischen HEX und RGB exakt — es geht keine Information verloren.
HSL wählt einen anderen Ansatz. Anstatt Primärfarben zu mischen, beschreibt es eine Farbe durch Farbton (ein Winkel von 0 bis 360 Grad auf dem Farbkreis), Sättigung (0 bis 100 Prozent, von Grau bis lebhaft) und Helligkeit (0 bis 100 Prozent, von Schwarz über den reinen Farbton bis Weiß). HSL entspricht stärker der natürlichen Beschreibungsweise — „ein etwas helleres, weniger intensives Blau" — und eignet sich daher gut für Farbkorrekturen.
Die Umrechnungsschritte
Einen HEX-Code in RGB umzuwandeln ist reine Ziffernrechnung: Jedes Paar von Hex-Ziffern wird als Zahl von 00 bis FF gelesen, also 0 bis 255. Die Umrechnung von RGB nach HSL skaliert zunächst die Kanäle auf den Einheitsbereich, leitet dann die Helligkeit aus dem Mittelwert des größten und kleinsten Kanals ab, die Sättigung aus deren Spreizung und den Farbton daraus, welcher Kanal der größte ist.
Rechenbeispiel
Gegeben sei #3B82F6. Die drei Paare sind 3B, 82 und F6 — also 59, 130 und 246 —, was rgb(59, 130, 246) ergibt. Nach Skalierung auf den Einheitsbereich erhält man näherungsweise 0,231, 0,510 und 0,965. Der größte Kanal ist Blau, der kleinste Rot:
mit einem Farbton von etwa 217 Grad, was hsl(217, 91%, 60%) ergibt.
Da RGB 256 diskrete Stufen speichert, HSL jedoch auf ganze Grad und Prozentwerte rundet, kann ein Hin-und-Her-Konvertieren den Wert um eine Stufe verschieben — für das Auge nicht wahrnehmbar, aber zu beachten, wenn Codes verglichen werden. Das hexadezimale Rechnen hinter HEX-Codes lässt sich mit dem Zahlenbasis-Konverter nachvollziehen.
Häufig gestellte Fragen (FAQ)
Wie wird ein HEX-Code in RGB umgerechnet?
Ein sechsstelliger Hexadezimalcode besteht aus drei Paaren von Hex-Ziffern, je eines pro Kanal: Rot, Grün, Blau. Jedes Paar ist eine Zahl von 00 bis FF, entsprechend 0 bis 255 im Dezimalsystem. #3B82F6 teilt sich beispielsweise in 3B, 82 und F6 auf — also 59, 130 und 246 — und ergibt rgb(59, 130, 246). Die Umrechnung ist in beide Richtungen exakt, da jeder Kanal dieselben acht Bits speichert.
Was bedeuten die HSL-Werte?
HSL beschreibt eine Farbe durch Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness), anstatt Primärfarben zu mischen. Der Farbton ist ein Winkel von 0 bis 360 Grad auf dem Farbkreis (0 ist Rot, 120 ist Grün, 240 ist Blau). Die Sättigung reicht von 0 Prozent — ein neutrales Grau — bis 100 Prozent, der lebendigsten Ausprägung des Farbtons. Die Helligkeit reicht von 0 Prozent (Schwarz) über 50 Prozent (reiner Farbton) bis 100 Prozent (Weiß).
HSL erleichtert häufig die visuelle Anpassung einer Farbe — sie aufzuhellen oder abzuschwächen — gegenüber der direkten Bearbeitung von Kanalwerten.
Werden dreistellige HEX-Codes unterstützt?
Ja. Ein dreistelliger Code ist eine Kurzschreibweise, bei der jede Ziffer verdoppelt wird, um den sechsstelligen Wert zu bilden: #ABC wird zu #AABBCC erweitert. Die Kurzform erfasst nur die 4.096 Farben, deren Kanäle aus wiederholten Ziffern bestehen; der Konverter gibt daher stets den vollständigen sechsstelligen Code aus.
Warum verschieben sich Werte beim mehrfachen Konvertieren leicht?
RGB speichert 256 diskrete Stufen pro Kanal, während HSL auf ganze Grad und ganze Prozentwerte rundet. Die Umrechnung von RGB nach HSL und zurück kann auf eine benachbarte Stufe fallen, da jedes Format auf sein eigenes Raster rundet. Die Abweichung beträgt höchstens eine Einheit und ist für das Auge nicht sichtbar, erklärt jedoch, warum ein Hin-und-Her-Konvertieren gelegentlich einen um eine Einheit veränderten Wert liefert.