Hex, RGB und HSL
Geben Sie die Farbe in dem Format ein, das Sie haben, dann füllen sich die anderen. Alle drei Felder hängen zusammen.
So sieht die Farbe aus
Text auf Weiß · 3,89
Text auf Schwarz · 5,39
- Hex#e0521f
- RGBrgb(224, 82, 31)
- HSLhsl(16, 76%, 50%)
Kanäle
- Rot224
- Grün82
- Blau31
- Farbton16°
- Sättigung76 %
- Helligkeit50 %
Helligkeitsreihe
Gleicher Farbton und gleiche Sättigung, Helligkeit von 10 bis 90 %. Klicken Sie ein Feld an, um es zu übernehmen.
So funktioniert es
Hex ist dasselbe wie RGB, nur mit hexadezimalen Ziffern geschrieben. Jedes Zeichenpaar steht für einen Kanal, von 00 bis ff, also 0 bis 255.
Die Kurzform mit drei Zeichen ist eine Abkürzung, bei der jedes Zeichen verdoppelt wird. #f30 bedeutet also #ff3300, weshalb sich nur 4096 der 16,7 Millionen Farben so schreiben lassen.
HSL beschreibt dieselben Farben mit Farbton, Sättigung und Helligkeit statt mit drei Lichtquellen. Der Farbton ist ein Winkel auf dem Farbkreis, wobei 0 Rot ist, 120 Grün und 240 Blau.
Mit HSL arbeitet es sich leichter, wenn man Varianten derselben Farbe will. Behalten Sie Farbton und Sättigung und ändern Sie nur die Helligkeit, dann bekommen Sie eine Reihe, die zusammenpasst.
Die Umrechnung zwischen RGB und HSL ist in beide Richtungen exakt, aber das Runden auf ganze Grad und Prozent in HSL kann einen Kanal um einen Schritt verschieben, wenn man hin und zurück geht.
So rechnet das Werkzeug um
Von RGB nach HSL wird jeder Kanal zuerst durch 255 geteilt. Die Helligkeit L ist der Mittelwert aus dem größten und dem kleinsten Kanal. Die Sättigung S ist ihre Differenz geteilt durch 1 − |2L − 1|. Der Farbton H hängt davon ab, welcher Kanal am größten ist, und wird in Grad angegeben. In der Gegenrichtung gilt derselbe Farbkreis aus sechs Sektoren, und die Kanäle werden auf ganze Zahlen gerundet. Die Zeilen Hex, RGB und HSL zeigen ganze Zahlen, die Helligkeitsreihe unten wird dagegen aus den ungerundeten Werten berechnet.
Rechenbeispiel
#1e90ff ist Rot 30, Grün 144 und Blau 255, also 0,118, 0,565 und 1. Der größte Wert ist 1 und der kleinste 0,118, also ist L = (1 + 0,118) / 2 = 0,559 oder 55,9 %. Die Differenz 0,882 geteilt durch 1 − |2 × 0,559 − 1| = 0,882 ergibt S = 1 oder 100 %. Blau ist am größten, also ist H = 60 × ((0,118 − 0,565) / 0,882 + 4) = 209,6 Grad.
Das Werkzeug schreibt die Farbe als hsl(210, 100%, 56%). Geben Sie diesen Text ein, erhalten Sie #1f8fff zurück, nicht #1e90ff, weil das Runden auf ganze Grad und Prozent Rot und Grün um je einen Schritt verschoben hat.
Die HSL-Helligkeit ist nicht die wahrgenommene
CSS Color 4 weist darauf hin, dass Gelb und Blau beide eine HSL-Helligkeit von 50 % haben, das Gelb aber viel heller aussieht. Die Kontrastzahlen des Werkzeugs zeigen dasselbe: hsl(60, 100%, 50%) ergibt gegen Weiß ein Verhältnis von 1,07 und hsl(240, 100%, 50%) eines von 8,59. Die Helligkeitsreihe unter der Farbe behält Farbton und Sättigung und ändert nur die Helligkeit, in Schritten von 10 Prozentpunkten. Die Stufen passen im Farbton zusammen, wirken aber nicht gleich weit voneinander entfernt.
Was das Werkzeug liest
Die Felder folgen CSS Color 4: Hex mit drei, vier, sechs oder acht Zeichen, rgb() mit Zahlen oder Prozent, wobei 100 % für 255 steht, und hsl() mit dem Farbton in Grad oder in den Einheiten deg, rad, grad und turn. So wird rgb(50%, 50%, 50%) zu rgb(128, 128, 128), und hsl(0.5turn, 100%, 50%) erhält den Farbton 180 Grad, also #00ffff.
Transparenz, ob in Hex mit vier oder acht Zeichen, als vierter Wert oder nach einem Schrägstrich, wird verworfen: Das Werkzeug rechnet mit deckenden Farben und sagt, wie viel Transparenz es gab. Werte außerhalb ihres Bereichs, etwa rgb(300, 0, 0), werden abgewiesen, damit ein Tippfehler auffällt, obwohl CSS sie auf den Bereich begrenzt.