Farbumrechner HEX, RGB und HSL
Eine Farbe von HEX nach RGB und HSL umrechnen, mit Aufschlüsselung je Kanal.
Fülle die Felder aus, dann erscheint das Ergebnis hier automatisch.
Wandelt einen sRGB-Hexcode aus drei oder sechs Zeichen in RGB und HSL um. Im Kurzcode wird jede Ziffer verdoppelt: #F0A wird zu #FF00AA. RGB und der ausgeschriebene HEX-Code behalten die ursprünglichen Bytes; HSL wird für die Anzeige gerundet. CSS-Zeichenfolgen verwenden in jeder Sprache einen Dezimalpunkt und lassen sich in ein Stylesheet kopieren.
So funktioniert es
Formel und Logik
Die Kanäle r,g,b sind ganze Bytes von 0 bis 255. Für HSL werden sie durch 255 geteilt: Helligkeit L=(max+min)/2, Sättigung S=Δ/(1−|2L−1|) bei Δ=max−min>0; der maximale Kanal bestimmt den Farbton. Bei Δ=0 ist die Sättigung null und der Farbton wird konventionell als 0° geschrieben. HSL-Helligkeit ist weder physikalische Leuchtdichte noch ein Kontrastwert. Der Farbton wird auf Grad, S und L auf zwei Prozentnachkommastellen gerundet.
Beispiel
#2E86DE → rgb(46, 134, 222), gerundetes CSS hsl(210, 72.73%, 52.55%). #F0A → #FF00AA → rgb(255, 0, 170). Die Dezimalpunkte in hsl() gehören zur CSS-Syntax.
Felder und Einheiten
- Hexadezimaler Farbcode — ohne Einheit
So wird gerechnet
- — Gib HEX als Text ein: #2E86DE, 2E86DE oder #F0A.
- — Lies die exakten RGB-Bytes und den vollständigen HEX-Code ab.
- — Kopiere die CSS-Zeichenfolgen RGB/HSL; gerundetes HSL kann bei der Rückumwandlung den Farbwert leicht ändern.
Rechenweg und Grenzen
- Rechenweg
- Formel und Logik
- Datenquelle oder Norm
- W3C CSS Color 4: HEX und HSL-Syntax
- Einschränkung
- Unterstützt werden nur deckende sRGB-HEX-Eingaben mit 3/6 Ziffern. Alpha-Codes mit 4/8 Ziffern, RGB/HSL-Eingaben, Farbprofile und barrierefreie Kontrastbewertungen werden nicht berechnet.
FAQ
Warum wird aus #F0A das #FF00AA?
Die kurze Form wird durch Verdoppeln jedes Zeichens erweitert — so ist das Format festgelegt. Mit Nullen aufzufüllen ergäbe eine andere Farbe: #F00A00 statt #FF00AA.
Ist das Rautezeichen nötig?
Nein, es ist freiwillig, und auch die Groß- und Kleinschreibung spielt keine Rolle. Sowohl #2e86de als auch 2E86DE funktionieren.
Was bedeutet die Zeile zur Helligkeit?
Sie ist die HSL-Helligkeit in Prozent: 0 ist Schwarz, 100 ist Weiß, und rund 50 ist eine reine gesättigte Farbe. Sie ist zugleich die dritte Zahl in der hsl()-Schreibweise.
Wie unterscheidet sich die HSL-Helligkeit von der empfundenen?
Die Helligkeit nutzt für jeden Kanal dieselbe Formel, während das Auge Grün weit heller sieht als Blau. Zwei Farben mit gleicher HSL-Helligkeit können deshalb recht verschieden aussehen, und für Kontrast braucht es ein eigenes Maß.
Geht bei der Umrechnung Genauigkeit verloren?
RGB und vollständiges HEX behalten die ursprünglichen Bytes exakt. HSL wird auf ganze Farbton-Grade und zwei Nachkommastellen für Sättigung/Helligkeit gerundet. Eine Rückumwandlung kann andere RGB-Bytes liefern.