palette Farbkonverter star

Wie es funktioniert

Diese drei Notationen beschreiben alle exakt dieselbe Farbe — sie kodieren lediglich, wie viel rotes, grünes und blaues Licht ein Bildschirm mischt, um sie zu erzeugen. RGB speichert jeden Kanal als Dezimalzahl von 0 bis 255. HEX ist genau dasselbe RGB, nur zur Basis 16 geschrieben: Jeder Kanal wird zu einem zweistelligen Hexadezimalpaar, sodass rgb(255, 128, 0) zu #ff8000 wird (ff = 255, 80 = 128, 00 = 0). Bei dieser Übersetzung geht keine Farbinformation verloren oder wird hinzugefügt — es ist reine Notation.

HSL ist anders: Es leitet die Farbe entlang dreier perzeptueller Achsen neu her — Farbton, Sättigung und Helligkeit —, die mathematisch aus den RGB-Kanälen berechnet werden. Der Farbton (0–360°) ist der Winkel auf einem Farbkreis, berechnet daraus, welcher Kanal am größten ist und wie weit die Kanäle auseinanderliegen: Bei #ff8000 ist Rot maximal (255) und Blau minimal (0), und die Formel 60 × ((Grün − Blau) / (Max − Min)) ergibt 60 × (128/255) ≈ 30°, was die Farbe im Orangebereich platziert. Die Helligkeit ist der Durchschnitt aus höchstem und niedrigstem Kanal — hier (255 + 0) / 2 ≈ 50 %. Die Sättigung misst, wie weit die Farbe bei dieser Helligkeit von Grau entfernt ist — hier 100 %, da ein Kanal auf voller Intensität steht und ein anderer bei null. Zusammen ergibt das hsl(30, 100%, 50%) — dasselbe Orange wie #ff8000, nur anders beschrieben.

Genau deshalb greifen Designer eher zu HSL als zu RGB: Um eine Farbe bei gleichem Farbton um 20 % dunkler zu machen, muss in HSL nur der Helligkeitswert gesenkt werden — bei RGB müsste man alle drei Kanäle proportional neu berechnen. Wählen Sie eine Farbe mit dem Picker oder geben Sie einen beliebigen HEX-Code ein, und dieses Tool rechnet sofort in beide Notationen um.

Was Sie wissen sollten

Kurze 3-stellige HEX-Codes (#f80) sowie 4-/8-stellige Formen mit Alphakanal (#ff8000cc, rgba(255,128,0,0.8)) sind gängige Varianten; dieses Tool arbeitet mit standardmäßigem 6-stelligem, deckendem HEX und dessen RGB-/HSL-Entsprechungen. Farbnamen wie orange sind in der CSS-Spezifikation festen HEX-Werten zugeordnet, aber nicht jeder Farbname hat einen einprägsamen HEX-Code — ein weiterer Grund, warum Entwickler ständig hin und her konvertieren. Zwei Farben, die auf einem Monitor identisch aussehen, können auf einem anderen leicht unterschiedlich wiedergegeben werden, weil handelsübliche Displays sich in Farbraum und Kalibrierung unterscheiden — HEX-/RGB-/HSL-Werte sind exakte Zahlen, aber das erzeugte Licht ist auf jedem Bildschirm nicht garantiert identisch. Bei der Wahl von Text- und Hintergrundfarben sollten Sie bedenken, dass der Helligkeitswert von HSL nicht dasselbe ist wie der wahrgenommene Kontrast — ein gesättigtes Gelb und ein gesättigtes Blau können denselben L-Wert teilen und trotzdem vor Weiß sehr unterschiedlich wirken; Barrierefreiheitsprüfungen sollten daher eine echte Kontrastverhältnis-Berechnung nutzen, nicht nur die L-Zahl.

CSS akzeptiert auch prozentbasiertes RGB, etwa rgb(100%, 50%, 0%), als exaktes Äquivalent zu rgb(255, 128, 0) — nützlich bei der Arbeit mit Design-Tools, die Farbe als Prozentwerte statt als 0–255-Ganzzahlen ausdrücken. Neuere CSS-Farbfunktionen wie oklch() und lab() gehen einen Schritt weiter als HSL: Sie sind auf perzeptuelle Gleichmäßigkeit ausgelegt, das heißt, gleiche numerische Schritte in der Helligkeit wirken über alle Farbtöne hinweg gleich unterschiedlich für das menschliche Auge — etwas, das reines HSL nicht vollständig garantiert. Für die tägliche Web- und UI-Arbeit bleiben HEX, RGB und HSL jedoch die drei Formate, denen Sie in fast jeder Codebasis, jedem Styleguide und jedem Design-Tool begegnen.