HSL in RGB umrechnen
Erhalten Sie einfache Rot-, Grün- und Blauwerte aus einer HSL-Farbe: Farbton 210, Sättigung 80 % und Helligkeit 45 % ergeben Rot 23, Grün 115 und Blau 207. Werte außerhalb des Bereichs werden gemeldet, nie still angepasst. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Hue
- 210
- Sättigung
- 80
- Helligkeit
- 45
- Red
- 23
- Grün
- 115
- Blau
- 207
Rechnen Sie eine HSL-Farbe in die Rot-, Grün- und Blaukanäle um, die zahlreiche Grafikwerkzeuge, Bildformate und Softwareschnittstellen benötigen. Geben Sie den Farbton in Grad sowie Sättigung und Helligkeit in Prozent an; Sie erhalten drei Ganzzahlen von 0 bis 255. Der Konverter prüft jede Komponente vor der Berechnung. Ein Wert außerhalb des zulässigen Bereichs führt daher zu einem eindeutigen Eingabefehler und nicht zu einer unerwartet umgebrochenen oder beschnittenen Farbe. Die reine, deterministische Berechnung eignet sich für interaktive Prüfungen, Dokumentationsbeispiele, Design-Token-Pipelines und reproduzierbare automatisierte Umwandlungen.
Die HSL-Eingabewerte verstehen
HSL beschreibt eine Farbe mit drei Größen, die sich häufig leichter anpassen lassen als getrennte Rot-, Grün- und Blaukanäle. Der Farbton ist ein Winkel auf einem Farbkreis. 0 Grad steht für Rot, 120 Grad für Grün, 240 Grad für Blau und 360 Grad führt zur gleichen roten Position wie 0 zurück.
Die Sättigung bestimmt, wie farbig das Ergebnis erscheint. Bei 0 % hat der Farbton keine sichtbare Wirkung, und die Ausgabe ist eine Graustufe. Bei 100 % erreicht die Farbe die maximal mögliche Farbstärke für den gewählten Farbton und die gewählte Helligkeit.
Die Helligkeit ordnet das Ergebnis zwischen Schwarz und Weiß ein. 0 % ist stets Schwarz, 50 % zeigt die kräftigste Form eines vollständig gesättigten Farbtons und 100 % ist stets Weiß. Geben Sie den Farbton als endliche Zahl von 0 bis 360 und Sättigung sowie Helligkeit als endliche Prozentwerte von 0 bis 100 an. Die Grenzen sind jeweils zulässig.
Werte außerhalb dieser Intervalle werden abgewiesen und nicht unbemerkt normalisiert. Dadurch fallen fehlerhafte Design-Tokens auf, und ein negativer Farbton oder ein Prozentwert über 100 kann keine zwar plausible, aber unbeabsichtigte Farbe erzeugen.
So entstehen die RGB-Kanäle
Die Berechnung skaliert den Farbton zunächst auf einen Einheitskreis und wandelt die Prozentwerte für Sättigung und Helligkeit in Bruchteile um. Beträgt die Sättigung 0, ist die Farbe unbunt; alle drei RGB-Kanäle erhalten dann denselben, aus der Helligkeit abgeleiteten Wert. Andernfalls berechnet der Algorithmus aus Sättigung und Helligkeit zwei Zwischengrenzen.
Anschließend tastet er drei um jeweils ein Drittel einer Umdrehung versetzte Stellen des Farbkreises ab: eine für Rot, eine für Grün und eine für Blau. Eine abschnittsweise Interpolation bildet jede Stelle zwischen den Zwischengrenzen ab. Zum Schluss wird jeder Kanalbruchteil mit 255 multipliziert und auf die nächste Ganzzahl gerundet.
Die Antwort enthält Felder für Rot, Grün und Blau; jedes ist garantiert eine Ganzzahl zwischen 0 und 255. Das Verfahren besteht aus deterministischer Arithmetik und verwendet weder Netzwerk noch Zufall, Uhrzeit, Gebietsschema oder gespeicherten Zustand. Der Farbton 360 gilt als das zu 0 gleichwertige Ende des Kreises, während der dokumentierte geschlossene Bereich weiterhin strikt durchgesetzt wird.
Eingaben werden nicht beschnitten, sodass Validierungsfehler sichtbar bleiben.
Das Ergebnis zuverlässig einsetzen
Verwenden Sie die ausgegebenen Kanäle überall dort, wo ein System Acht-Bit-RGB-Werte verlangt. Ein Stylesheet kann sie in einen rgb()-Ausdruck einsetzen, eine Bildroutine kann sie in einen Pixel- oder Paletteneintrag schreiben, und ein Design-Token-Build kann sie für Plattformen serialisieren, die HSL nicht direkt verarbeiten. Für eine manuelle Prüfung können Sie eine bekannte Farbe eingeben: Farbton 0, Sättigung 100 und Helligkeit 50 ergeben Rot 255, Grün 0 und Blau 0.
Behandeln Sie in Automatisierungen Fehler getrennt von erfolgreichen Antworten. Ein fehlendes Feld, eine nicht endliche Zahl oder eine Komponente außerhalb ihres Bereichs ist eine ungültige Eingabe, die korrigiert und nicht unverändert erneut gesendet werden sollte. Bewahren Sie die ursprünglichen HSL-Werte auf, falls das Designteam später wahrnehmungsbezogene Anpassungen vornehmen muss, denn diese Fähigkeit führt nur die Vorwärtsumrechnung aus und leitet aus RGB nicht das ursprüngliche HSL ab.
Da die Ausgabe aus Ganzzahlen besteht, kann sie ohne zusätzliche Rundungsregel direkt von üblichen RGB-Verbrauchern genutzt werden.
Anwendungsfälle
Design-Tokens kompilieren
Wandeln Sie HSL-Tokens für Marken und Designs in ganzzahlige RGB-Kanäle für Anwendungen und Builds mit Acht-Bit-Farbkomponenten um.
Grafikwerte vorbereiten
Überführen Sie eine HSL-Auswahl in Rot-, Grün- und Blauwerte für Canvas, Bildwerkzeuge, Diagramme, Paletten und Rendering-APIs.
Farbberechnungen prüfen
Erstellen Sie deterministische Referenzwerte für Dokumentation, Unit-Tests, Migrationsskripte und Vergleiche zwischen Farbumsetzungen.
Häufige Fragen
Welche Bereiche sind zulässig?
Der Farbton muss zwischen 0 und 360 liegen. Sättigung und Helligkeit müssen jeweils zwischen 0 und 100 liegen. Alle Grenzen sind eingeschlossen.
Warum sind die RGB-Werte ganzzahlig?
Die normalisierten Kanalergebnisse werden mit 255 multipliziert und gerundet, damit übliche Acht-Bit-RGB-Schnittstellen sie direkt verwenden können.
Sind die Farbtöne 0 und 360 gleichwertig?
Ja. Beide bezeichnen das rote Ende des Farbkreises und sind innerhalb des geschlossenen Bereichs von 0 bis 360 gültig.
Welche RGB-Zahlen gehören zu Farbton 210, Sättigung 80 % und Helligkeit 45 %?
Rot 23, Grün 115 und Blau 207. Jeder Kanal ist eine ganze Zahl von 0 bis 255, Sie können ihn also direkt in ein Grafikprogramm oder eine Bildeinstellung übernehmen.
Was passiert, wenn ein Wert außerhalb des Bereichs liegt?
Er wird mit einer klaren Meldung abgelehnt. Ein negativer Farbton oder ein Prozentwert über 100 wird nicht in eine plausible Farbe umgebogen, sodass ein falscher Designwert auffällt, statt durchzurutschen.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/color/hsl-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"saturation":80,"lightness":45}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"saturation": 80,
"lightness": 45
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"saturation": 80,
"lightness": 45
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"saturation":80,"lightness":45}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"saturation":80,"lightness":45}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-rgb", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"hue": 210,
"saturation": 80,
"lightness": 45
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_rgb",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
So entstehen die RGB-Kanäle
Identische Eingaben erzeugen deshalb im Browser, in Tests und in einer API-Integration dasselbe JSON.
Das Ergebnis zuverlässig einsetzen
Die Browserberechnung eignet sich für schnelle Prüfungen; eine API-Anfrage kostet $0.002, wenn die Umwandlung Teil einer reproduzierbaren Pipeline ist.
Technische Fragen
Was geschieht bei einem Wert außerhalb des Bereichs?
Die Anfrage schlägt mit invalid_input fehl und nennt die Komponente sowie ihren gültigen Bereich. Werte werden weder umgebrochen noch beschnitten.
Was kostet die Umrechnung per API?
Jede erfolgreiche API-Anfrage verwendet den veröffentlichten Grundpreis von $0.002. Das Browserwerkzeug führt dieselbe deterministische Berechnung lokal aus.