Eine Farbe zwischen HEX, RGB und HSL umrechnen
Veröffentlicht am · Aktualisiert am 3 Min. Lesezeit
HEX, RGB und HSL sind drei Arten, dieselbe Farbe zu schreiben. Man begegnet ihnen in einem Zeichenprogramm, einem Stylesheet, einem Entwurfswerkzeug oder einem Styleguide, und man wechselt ständig von einer zur anderen. Das Werkzeug zeigt alle drei zugleich an und akzeptiert die gängigen Schreibweisen.
Drei Schreibweisen derselben Farbe
Farben erkunden zeigt standardmäßig die drei Formen an, mit einer Vorschau der Farbe. HEX ist eine Folge aus sechs Ziffern und Buchstaben mit vorangestelltem Rautenzeichen. RGB gibt die Anteile von Rot, Grün und Blau an, von 0 bis 255. HSL beschreibt den Farbton in Grad, die Sättigung und die Helligkeit in Prozent, was zum Aufhellen oder Abdunkeln einer Farbe oft intuitiver ist. Für das Grün #2F4A3F:
| Form | Ergebnis |
|---|---|
| HEX | #2f4a3f |
| RGB | rgb(47, 74, 63) |
| HSL | hsl(156, 22%, 24%) |
Die drei Schaltflächen HEX, RGB und HSL des Bedienfelds beschränken das Ergebnis auf eine einzige Form, praktisch zum Kopieren.
Die akzeptierten Schreibweisen
| Schreibweise | Beispiel | Ergebnis in HEX |
|---|---|---|
| Kurzes HEX | #fff | #ffffff |
| HEX mit Transparenz | #2F4A3F80 | #2f4a3f80 |
| RGB mit Kommas | rgb(47, 74, 63) | #2f4a3f |
| RGB mit Leerzeichen | rgb(47 74 63) | #2f4a3f |
| RGB in Prozent | rgb(100%, 0%, 0%) | #ff0000 |
| HSL mit Leerzeichen | hsl(156 22% 24%) | #304b40 |
Farbnamen wie „rot“ und Werte außerhalb von 0 bis 255 wie rgb(300, 0, 0) werden mit einer Meldung abgelehnt, die die akzeptierten Schreibweisen auflistet.
Die Transparenz
Eine Transparenz wird in HEX mit acht Ziffern geschrieben oder nach einem Schrägstrich mit Leerzeichen. Die Farbe rgb(47 74 63 / 50%) ergibt #2f4a3f80 in HEX und rgba(47, 74, 63, 0.5) in RGB. Umgekehrt ergibt #2F4A3F80 eine Deckkraft von 0,502, weil 80 hexadezimal 128 von 255 entspricht.
Warum ein Hin und Zurück um eine Stufe abweicht
HSL wird in ganzen Zahlen angezeigt: der Farbton in Grad, die Sättigung und die Helligkeit in Prozent. Der Weg von HSL zurück zu HEX landet daher bei einer benachbarten Farbe, nicht immer bei der Ausgangsfarbe.
| Start | Angezeigtes HSL | Zurück zu HEX |
|---|---|---|
| #2F4A3F | hsl(156, 22%, 24%) | #304b40 |
| #B5532E | hsl(16, 59%, 45%) | #b6532f |
Die Abweichung beträgt eine Stufe pro Kanal, für das Auge unsichtbar. Behalten Sie bei einem Design-Token oder einer Marke das ursprüngliche HEX als Referenz und gehen Sie nicht über HSL.
Die Grautöne
Ein Grau hat keine Sättigung und einen wirkungslosen Farbton: #808080 ergibt rgb(128, 128, 128) und hsl(0, 0%, 50%).
Was das Werkzeug nicht misst
Eine Formatumwandlung sagt nichts über die Lesbarkeit. Das Werkzeug berechnet nicht den Kontrast zwischen einem Text und seinem Hintergrund: Prüfen Sie ihn vor dem Veröffentlichen gesondert. Der Fall eines QR-Codes, bei dem der Kontrast über die Lesbarkeit entscheidet, wird in Einen QR-Code erstellen, der sich auf Anhieb scannen lässt behandelt.
Für welche Zwecke
Ein Grafiker, der einem Entwickler eine Farbe übergibt, eine Person, die ein Stylesheet anpasst, eine Lehrkraft, die ein Material vorbereitet: Dieselbe Farbe wird je nach Werkzeug auf drei Arten geschrieben.
Eine Umrechnung prüfen
- Fügen Sie die Farbe in das Feld ein: Die Vorschau muss Ihren Erwartungen entsprechen.
- Kopieren Sie die von Ihrem System verlangte Form.
- Um die genaue Farbe zu behalten, bewahren Sie das HEX oder das RGB statt des HSL auf.
Häufige Fragen
- Wie rechnet man HEX in RGB um?
- Fügen Sie die Farbe in das Werkzeug ein, das die drei Formen zugleich anzeigt, zum Beispiel #2F4A3F, rgb(47, 74, 63) und hsl(156, 22%, 24%).
- Warum ändert ein Hin und Zurück über HSL die Farbe um eine Stufe?
- HSL wird in ganzen Zahlen angezeigt. Behalten Sie das ursprüngliche HEX als Referenz.
- Wie schreibt man eine Transparenz?
- In HEX mit acht Ziffern oder in RGB mit einem Schrägstrich, zum Beispiel rgb(47 74 63 / 50%).
- Prüft das Werkzeug die Lesbarkeit des Textes?
- Nein, es berechnet nicht den Kontrast zwischen einem Text und seinem Hintergrund: Prüfen Sie ihn gesondert.