HSL-zu-RGB-Konverter

HSL beschreibt eine Farbe über den Farbton auf dem Rad, die Sättigung als wie lebhaft die Farbe ist und die Helligkeit als wie nah sie an Schwarz oder Weiß liegt. Designer und Front-End-Ingenieure wählen Farben oft in HSL, weil das Drehen des Farbtons Sättigung und Helligkeit stabil hält; Browser, Canvas, Bildpuffer und die meisten Grafik-APIs brauchen am Ende jedoch Rot-, Grün- und Blaukanäle auf einer Skala von null bis zweihundertfünfundfünfzig. Dieser Konverter nimmt drei Zahlen — Farbton in Grad von null bis dreihundertsechzig, Sättigung und Helligkeit als Prozentsätze von null bis hundert — und liefert ganzzahlige RGB-Kanäle, eine CSS-rgb()-Zeichenkette und einen Kleinbuchstaben-Hex-Code, mit demselben geschlossenen Pfad, den Browser für hsl() in CSS nutzen. Ein Farbton außerhalb des geschlossenen Intervalls von null bis dreihundertsechzig wird mit einem klaren Validierungsfehler abgelehnt, damit fehlerhafte Tokens nie still umgewickelt werden.

Was HSL beschreibt und warum Bildschirme RGB brauchen

HSL beschreibt eine Farbe so, wie Menschen über sie sprechen: Der Farbton ist ein Winkel auf dem Farbkreis, bei 0 Grad liegt Rot, und bei 360 schließt sich der Kreis wieder bei Rot. Die Sättigung sagt, wie weit die Farbe von Grau entfernt ist, die Helligkeit, wie nah sie an Schwarz oder Weiß liegt. Browser, Zeichenflächen und Bildspeicher arbeiten aber mit Rot, Grün und Blau von 0 bis 255. Der Rechner übersetzt die drei HSL-Zahlen auf demselben Weg, den Browser für hsl() in CSS verwenden, und liefert ganze RGB-Werte, einen rgb()-Text und einen Hexcode in Kleinbuchstaben.

So wird gerechnet und das sollten Sie vermeiden

Sättigung und Helligkeit werden auf den Bereich von 0 bis 1 gebracht, daraus entstehen zwei Zwischenwerte, und für Rot, Grün und Blau wird der Farbkreis an drei versetzten Stellen abgelesen. Am Ende wird jeder Kanal mit 255 multipliziert und gerundet. So ergibt hsl(210, 80%, 45%) den Wert rgb(23, 115, 207) oder #1773cf. Bei Sättigung 0 fallen alle drei Kanäle auf dasselbe Grau. Ein häufiger Irrtum ist, 100 % Helligkeit für die kräftigste Farbe zu halten: Das ist Weiß, der reine Farbton liegt bei 50 %. Ein Farbton außerhalb von 0 bis 360 wird abgelehnt, statt still um den Kreis herumgerechnet zu werden.

Wie HSL auf Rot, Grün und Blau abgebildet wird

Der Farbton ist ein Winkel auf dem Farbrad: null Grad ist reines Rot, einhundertzwanzig reines Grün, zweihundertvierzig reines Blau und dreihundertsechzig schließt den Kreis wieder bei Rot. Die Sättigung dehnt ein Grau der gewählten Helligkeit zur vollchromatischen Farbe bei diesem Farbton; null Prozent Sättigung ist stets achromatisches Grau, Schwarz oder Weiß und hängt nur von der Helligkeit ab. Die Helligkeit verläuft von Schwarz bei null Prozent über den reinen Mittelton nahe fünfzig Prozent bis Weiß bei hundert Prozent.

Der hier verwendete Umwandlungsalgorithmus folgt dem CSS Color Module und der W3C-Formulierung: Sättigung und Helligkeit werden auf das Einheitsintervall skaliert, Zwischen-Chroma-Grenzen p und q aus Helligkeit und Sättigung berechnet und drei verschobene Positionen auf dem Einheitskreis mit dem klassischen hue2rgb-Helfer für die Rot-, Grün- und Blaukanäle abgetastet. Bei null Sättigung kollabieren die drei Kanäle auf dasselbe helligkeitsabgeleitete Grau — zugleich ein Leistungsvorteil und ein Gewinn an numerischer Stabilität. Jeder Kanal des Einheitsintervalls wird mit zweihundertfünfundfünfzig multipliziert und auf die nächste Ganzzahl gerundet, damit das Ergebnis Acht-Bit-Framebuffer- und CSS-rgb()-Erwartungen entspricht.

Sättigung und Helligkeit müssen jeweils zwischen null und hundert Prozent einschließlich liegen, passend zu den Prozentsätzen, die Designer in Stylesheets eingeben.

Was Sie senden und was Sie zurückerhalten

Senden Sie drei endliche Zahlen unter den Feldern h, s und l. Das Feld h ist der Farbton in Grad und ist erforderlich; es muss zwischen null und dreihundertsechzig einschließlich liegen. Die Felder s und l sind Sättigung und Helligkeit als Prozentsätze von null bis hundert.

Liegt der Farbton außerhalb des erlaubten Bandes, erklärt die Antwort, dass h zwischen null und dreihundertsechzig Grad liegen muss, damit Clients den Token vor dem erneuten Versuch klemmen oder korrigieren können. Bei Erfolg gibt die Antwort die bereinigten h-, s- und l-Werte zurück, ganzzahlige Kanäle r, g und b jeweils von null bis zweihundertfünfundfünfzig, eine druckbare rgb-Zeichenkette der Form rgb(R, G, B), eine Kleinbuchstaben-Hex-Zeichenkette der Form #rrggbb und eine kurze Formelnotiz mit dem CSS- und W3C-Pfad.

Klassische Prüfungen umfassen reines Rot mit Farbton null, Sättigung hundert und Helligkeit fünfzig, was zweihundertfünfundfünfzig, null, null ergibt; Mittelgrau mit beliebigem Farbton, Sättigung null und Helligkeit fünfzig, was einhundertachtundzwanzig auf jedem Kanal ergibt; und tiefe Grüntöne nahe Farbton einhundertzwanzig mit hoher Sättigung und bescheidener Helligkeit.

Wo HSL-zu-RGB-Umwandlung in der Praxis vorkommt

Designsysteme speichern Markenrampen und semantische Tokens in HSL, damit Produktteams den Farbton für Themes drehen können und gleichzeitig kontrastfreundliche Helligkeitsschritte behalten; die Auslieferung an CSS-Custom-Properties, mobile native Farben und Canvas-Füllstile erfordert weiterhin zuverlässiges RGB und Hex. Datenvisualisierungsbibliotheken erzeugen kategoriale Paletten, indem sie den Farbton bei fester Sättigung und Helligkeit schrittweise ändern und jeden Schritt für SVG-, WebGL- und Charting-Engines in RGB umwandeln. E-Mail-Vorlagen und PDF-Generatoren akzeptieren oft nur Hex oder rgb(), daher wandeln Marketing-Automatisierungspipelines HSL-Markenspezifikationen einmal um und cachen das Kanal-Tripel.

Spielwerkzeuge und Level-Editoren zeigen Künstlern Farbtonräder und müssen ganzzahliges RGB in Materialdefinitionen und Texturfärbungen schreiben, ohne browser-only APIs. Barrierefreiheits-Workflows berechnen Kontrastverhältnisse auf RGB oder relativer Luminanz; der Start bei HSL für perzeptuelle Helligkeitsanpassungen endet dennoch bei den Kanalwerten, die dieser Konverter liefert. Lehrpläne und Bootcamp-Lektionen lehren Farbmodelle nebeneinander und brauchen ein einziges vertrauenswürdiges Orakel, das mit dem CSS-Rendering für Hausaufgaben-Schlüssel übereinstimmt.

Wenn Sie später Multi-Format-Umwandlung über HEX, LAB und CMYK, die Umkehrung RGB zu HSL oder WCAG-Kontrastprüfungen brauchen, behandeln Sie diese als separate Suchintentionen und Landings statt diese dedizierte HSL-zu-RGB-Konverterseite zu überladen.