Convertitore RGB in HSL
Veda qualsiasi colore RGB come tonalità, saturazione e luminosità: 255, 128, 64 diventa 20.1°, 100 % e 62.55 %. Così può regolare il tono o creare temi chiari e scuri senza andare a tentativi. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Resistenza (Ω)
- 255
- G
- 128
- B
- 64
- H
- 20,1047
- S
- 100
- L
- 62,549
- Tonalità
- 20,1047
Designer, sviluppatori front-end e autori di pipeline spesso tengono i colori come interi di rosso, verde e blu da zero a duecentocinquantacinque, ma necessitano di tonalità, saturazione e luminosità per regolare il tono senza spostare la luminosità percepita, costruire variabili CSS o alimentare strumenti sensibili al colore. Questo convertitore RGB in HSL accetta tre canali in quell'intervallo di byte standard, esegue una conversione deterministica in stile sRGB e restituisce la tonalità in gradi più saturazione e luminosità in percentuali, insieme a stringhe hsl CSS moderne e classiche da incollare nei fogli di stile. I canali fuori da zero a duecentocinquantacinque falliscono con un errore chiaro di input non valido, così i dati errati non vengono mai compressi in silenzio.
Inserire i canali RGB e cosa calcola la conversione
Fornisca tre numeri denominati r, g e b per rosso, verde e blu. Il motore normalizza prima ogni canale dividendolo per duecentocinquantacinque così i valori restano sull'intervallo unitario. Poi trova il massimo e il minimo di quelle tre componenti normalizzate e la croma come loro differenza.
La luminosità è la metà della somma di massimo e minimo. Quando la croma è zero il colore è acromatico: la tonalità è zero e la saturazione è zero, lasciando solo la luminosità a descrivere i grigi dal nero al bianco passando per il grigio medio. Quando la croma è positiva, la saturazione è la croma divisa per uno meno il valore assoluto di due volte la luminosità meno uno, formula standard di saturazione HSL usata in CSS e nelle pile grafiche.
La tonalità si costruisce dal settore della ruota dei colori in cui si colloca il canale massimo: dominante rosso, verde o blu, scalata in gradi nell'intervallo semiaperto da zero fino a trecentosessanta.
Casi d'uso
CSS e token di design
Converta campioni RGB dagli strumenti di design in HSL così i temi regolano tonalità o luminosità mantenendo politiche di saturazione coerenti in modalità chiara e scura.
Pipeline di palette e marca
L'automazione che parte da colori di marca RGB deriva componenti HSL per generare tinte, ombre e varianti di accento senza comprimere in silenzio canali fuori intervallo.
Domande frequenti
Come converto RGB in HSL con questo strumento?
La risposta include h, s, l, stringhe CSS e un oggetto hsl annidato.
Cosa succede se un canale è fuori da 0–255?
Ciascuno di r, g e b deve essere tra 0 e 255 inclusi; i valori fuori intervallo sono respinti e non addebitati.
Tonalità, saturazione e luminosità sono percentuali o frazioni 0–1?
La tonalità è in gradi da 0 fino a 360. Saturazione e luminosità sono percentuali da 0 a 100, in linea con l'uso comune di hsl() in CSS.
Il convertitore RGB in HSL è gratuito?
Lo strumento del browser gira gratis sul Suo dispositivo.
Come si calcola la luminosità HSL?
Ogni canale viene diviso per 255 e la luminosità è la metà della somma tra il valore più alto e quello più basso. Per 255, 128, 64 il risultato è 62.55 %.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo stack
curl -X POST https://api.kit.forhosting.com/color/rgb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"r":255,"g":128,"b":64}'const res = await fetch("https://api.kit.forhosting.com/color/rgb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"r": 255,
"g": 128,
"b": 64
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/rgb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"r": 255,
"g": 128,
"b": 64
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/rgb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"r":255,"g":128,"b":64}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"r":255,"g":128,"b":64}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/rgb-hsl", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Esempio di richiesta
{
"r": 255,
"g": 128,
"b": 64
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.rgb_hsl",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Inserire i canali RGB e cosa calcola la conversione
Ogni canale deve essere un numero finito tra zero e duecentocinquantacinque inclusi; stringhe intere come "128" sono accettate e gli alias red, green e blue mappano sugli stessi campi se preferisce nomi lunghi. Input identici producono sempre JSON identico perché il percorso è aritmetica pura, senza rete, senza seme casuale e senza orologio di sistema.
Leggere tonalità, saturazione, luminosità e stringhe CSS
In caso di successo la risposta ripete i canali di input r, g e b, poi espone h, s e l per tonalità in gradi, saturazione in percentuale e luminosità in percentuale. Il rosso puro duecentocinquantacinque zero zero produce tonalità zero con saturazione piena e luminosità media; il verde puro e il blu puro cadono vicino a centoventi e duecentoquaranta gradi rispettivamente; canali uguali producono grigi con saturazione zero. Gli stessi tre numeri compaiono di nuovo sotto i nomi lunghi hue, saturation e lightness, e annidati in un oggetto hsl, così il codice UI, le demo SDK e i correttori possono scegliere la forma adatta senza mappature extra. Sono incluse due stringhe pronte da incollare: hsl_css usa la forma moderna CSS Color Module separata da spazi, come hsl(30 100% 50%), e hsl_legacy usa la forma classica con virgole e parentesi che i parser più vecchi si aspettano ancora. Il campo method è sempre rgb_to_hsl così i router a valle possono ramificare senza ispezionare le forme. L'assenza di un canale obbligatorio, valori non numerici e qualsiasi canale fuori da zero a duecentocinquantacinque falliscono con invalid_input e non vengono addebitati dopo il rifiuto del motore.
Uso dell'API, prezzi, flussi di design e limiti pratici
Chiami il convertitore RGB in HSL gratuito nel browser per ritocchi di palette, dimostrazioni didattiche e controlli rapidi senza installare una libreria di colore. Abbini le uscite HSL a verificatori di contrasto nel costruire temi accessibili, o alimenti spostamenti di tonalità in pipeline di token di marca che mantengono fissa la luminosità ruotando gli accenti. Invii un corpo JSON con i numeri obbligatori r, g e b nell'intervallo pubblicato. Usi l'API prepagata quando un design system, un generatore di temi, una pipeline di accessibilità o uno strumento colore e-commerce necessita di un contratto stabile sotto saldo KIT a $0.002 per elemento riuscito; i fallimenti di validazione non consumano mai saldo dopo il rifiuto del motore. Preferisca questo endpoint quando l'intento di ricerca e l'inquadramento del prodotto sono specificamente RGB in HSL con limiti di canale rigorosi; per conversione multi-formato tra HEX, RGB, HSL, LAB e CMYK in una sola chiamata, usi il convertitore di colore più ampio del catalogo. Gli autori che distribuiscono SDK possono mappare h, s e l direttamente su controlli di form o proprietà personalizzate CSS senza reimplementare la conversione in ogni linguaggio.
Casi di integrazione
Insegnamento e valutazione della matematica del colore
Corsi e prove di programmazione confrontano le risposte RGB→HSL degli studenti con JSON deterministico, con invalid_input chiaro quando un canale esce da 0–255.
Domande tecniche
Posso usare gli alias red, green e blue?
Sì. I campi red, green e blue sono accettati come alias di r, g e b così i client possono usare nomi di canale corti o lunghi.