Wie rechne ich HEX in RGB und HSL um?
Um eine HEX-Farbe in RGB umzuwandeln, teilen Sie sie in drei 2-stellige Paare und wandeln jedes von hexadezimal in dezimal (0-255) um; für HSL berechnen Sie Farbton, Sättigung und Helligkeit aus diesen RGB-Werten. Beispiel: #4F46E5 wird zu rgb(79, 70, 229) und hsl(243, 75%, 59%).
Schritte zur Umwandlung von HEX in RGB und HSL
- Entfernen Sie das #-Zeichen und teilen Sie den 6-stelligen HEX-Code in drei 2-stellige Paare (bei #4F46E5: 4F, 46, E5).
- Wandeln Sie jedes Hexadezimalpaar in eine Dezimalzahl von 0 bis 255 um (4F=79, 46=70, E5=229), um die RGB-Werte zu erhalten.
- Teilen Sie jeden RGB-Wert durch 255, um ihn auf den Bereich 0-1 zu normieren, und bestimmen Sie dann Maximum und Minimum der drei Werte.
- Die Helligkeit ist der Mittelwert aus Maximum und Minimum; Sättigung und Farbton werden aus der Differenz von Maximum und Minimum nach den Standard-HSL-Formeln berechnet.
- Runden Sie den Farbton auf ganze Grad (0-360) sowie Sättigung und Helligkeit auf ganze Prozentwerte (0-100 %) für die Anzeige.
HEX zu RGB zu HSL
RGB-Kanal = parseInt(Hex-Paar, 16) · Helligkeit = (max(R,G,B) + min(R,G,B)) / 2, normiert auf 0-1
- R, G, B = Rot-, Grün-, Blau-Kanalwerte, jeweils 0-255
- H, S, L = Farbton in Grad (0-360), Sättigung und Helligkeit in Prozent (0-100 %)
Häufig gesuchte Farbumrechnungen
Was ist #FF0000 in RGB?
#FF0000 ist rgb(255, 0, 0) — reines Rot, mit dem Rotkanal auf dem Maximum und Grün sowie Blau auf null.
Was ist #FFFFFF in RGB?
#FFFFFF ist rgb(255, 255, 255) — reines Weiß, mit allen drei Kanälen auf dem Maximum.
Was ist #000000 in RGB?
#000000 ist rgb(0, 0, 0) — reines Schwarz, mit allen drei Kanälen bei null.
Was ist rgb(0, 128, 0) als Hex-Code?
rgb(0, 128, 0) ist #008000 — ein mittleres Grün, da 128 dezimal gleich 80 hexadezimal ist.
Was ist #FFA500 in RGB?
#FFA500 ist rgb(255, 165, 0) — Standard-Orange.
Was ist #00FF00 in RGB?
#00FF00 ist rgb(0, 255, 0) — reines Grün, mit nur dem Grünkanal auf dem Maximum.
Was ist #0000FF in RGB?
#0000FF ist rgb(0, 0, 255) — reines Blau, mit nur dem Blaukanal auf dem Maximum.
Was ist rgb(255, 255, 0) als Hex-Code?
rgb(255, 255, 0) ist #FFFF00 — reines Gelb, gemischt aus vollem Rot und vollem Grün.
Beispielhafte Farbumwandlungen
| HEX | RGB | HSL |
|---|
| #4F46E5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #1D4ED8 | rgb(29, 78, 216) | hsl(224, 76%, 48%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX, RGB und HSL?
HEX und RGB beschreiben eine Farbe auf dieselbe Weise, als Rot-, Grün- und Blau-Lichtanteile, nur in unterschiedlicher Notation (Basis 16 gegenüber Basis 10). HSL beschreibt dieselbe Farbe über Farbton (die Farbe selbst), Sättigung (Intensität) und Helligkeit (wie hell oder dunkel), was sich beim manuellen Anpassen einer Farbe oft intuitiver anfühlt.
Warum zeigt Weiß 0 % Sättigung an?
Die Sättigung misst, wie weit eine Farbe von Grau entfernt ist. Reines Weiß, Schwarz und jede Graustufe dazwischen haben gleiche Rot-, Grün- und Blau-Werte, daher liegt ihre Sättigung immer bei 0 %, unabhängig von der Helligkeit.
Kann ich einen 3-stelligen HEX-Code wie #FFF eingeben?
Dieses Werkzeug erwartet das vollständige 6-stellige HEX-Format (#RRGGBB). Eine 3-stellige Kurzform wie #FFF ist CSS-Kurzschreibweise für #FFFFFF, bei der jede Ziffer verdoppelt wird; erweitern Sie sie vor der Eingabe auf 6 Stellen.
Wie wird der Farbton berechnet, wenn Rot, Grün und Blau alle unterschiedlich sind?
Der Farbton hängt davon ab, welcher Kanal — Rot, Grün oder Blau — den höchsten Wert hat, und wird aus der relativen Position der beiden anderen Kanäle berechnet. Das Ergebnis ist ein Winkel auf einem 360-Grad-Farbkreis, wobei 0 Grad Rot, 120 Grün und 240 Blau entspricht.
Dieses Werkzeug wandelt Standard-6-stellige HEX-Farben um, wie sie im Web verwendet werden; es unterstützt keine Alpha-(Transparenz-)Kanäle, benannte CSS-Farben oder Farbräume jenseits von sRGB wie HSV oder LAB.
Sources: W3C CSS Color Module Level 4