ForHosting KIT · Immagini e foto

Convertitore hex in HSL

Trasformi un codice hex in valori da regolare a occhio: #FF8040 corrisponde a tinta 20,1°, saturazione 100% e luminosità 62,55%, pronto da incollare come hsl(20.1 100% 62.55%). Gratis nel suo browser.

  • Gratis
  • Funziona nel suo browser
  • Senza registrazione
  • I suoi dati restano sul dispositivo
Usalo da WebAPIEmailTelegramApp presto
Se inserisce
Esadec
#FF8040
Ottiene
Cifre hex
FF8040
Resistenza (Ω)
255
G
128
B
64

Designer, sviluppatori front-end e sistemi di brand spesso memorizzano i colori come codici hex quali #FF8040 o la forma breve #f80, ma necessitano di tinta, saturazione e luminosità per regolare il tono senza far scivolare la luminosità, costruire variabili CSS o alimentare token di design sensibili al colore. Questo convertitore hex in HSL accetta un codice colore esadecimale a tre o sei cifre con o senza cancelletto iniziale, espande le forme abbreviate come fa CSS, esegue una conversione deterministica in stile sRGB e restituisce la tinta in gradi più saturazione e luminosità in percentuali, insieme a stringhe CSS hsl moderne e legacy da incollare nei fogli di stile. I codici hex non validi—lunghezza errata, caratteri non hex o campo mancante—falliscono con un errore chiaro di input non valido così i dati cattivi non diventano mai un clamp silenzioso.

Come inserire un codice hex e cosa calcola la conversione

Fornisca un campo stringa denominato hex con un codice colore esadecimale a tre o sei cifre. Un cancelletto iniziale è opzionale, quindi sono accettati sia #FF8040 sia FF8040, così come le forme brevi #f80 e f80. La maiuscola è ignorata: cifre minuscole, maiuscole e miste si normalizzano allo stesso risultato.

I codici a tre cifre si espandono raddoppiando ciascuna cifra—f80 diventa FF8800—secondo la regola di abbreviazione colore CSS dei browser. Dopo l’espansione il motore analizza due cifre hex per canale in interi rosso, verde e blu da zero a 255, poi normalizza ogni canale dividendolo per 255 così i valori stanno sull’intervallo unitario. Trova il massimo e il minimo di quelle tre componenti normalizzate e il croma come loro differenza.

La luminosità è metà della somma di massimo e minimo. Quando il croma è zero il colore è acromatico: tinta zero e saturazione zero, lasciando solo la luminosità per descrivere i grigi dal nero al bianco passando per il grigio medio. Quando il croma è positivo, la saturazione è il croma diviso per uno meno il valore assoluto di due volte la luminosità meno uno, la formula standard di saturazione HSL usata in CSS e stack grafici.

La tinta si costruisce dal settore della ruota dei colori dove siede il canale massimo: dominante rosso, verde o blu, scalato in gradi nell’intervallo semiaperto da zero fino a 360.

Token CSS e di design da colori hex del brand

Converta campioni hex da strumenti di design in HSL così i temi regolano tinta o luminosità mantenendo politiche di saturazione coerenti in modalità chiara e scura.

Pipeline di palette e brand

L’automazione che parte da colori hex del brand ricava componenti HSL per generare tinte, ombre e varianti di accento senza accettare in silenzio codici malformati.

Come converto un colore hex in HSL con questo strumento?

La risposta include h, s, l, canali RGB, stringhe CSS e un oggetto hsl annidato.

Cosa succede se il codice hex non è valido?

Sono accettate solo 3 o 6 cifre esadecimali (cancelletto iniziale opzionale). Lunghezza errata o caratteri non hex sono rifiutati e non addebitati.

Tinta, saturazione e luminosità sono percentuali o frazioni 0–1?

La tinta è in gradi da 0 fino a 360. Saturazione e luminosità sono percentuali da 0 a 100, allineate all’uso comune di hsl() in CSS.

Il convertitore hex in HSL è gratuito?

Lo strumento nel browser gira gratis sul Suo dispositivo.

Posso usare codici hex brevi a tre cifre?

Sì. Codici come #f80 si espandono in #FF8800 raddoppiando ciascuna cifra, secondo le regole di abbreviazione CSS, poi si convertono in HSL.

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.

POSThttps://api.kit.forhosting.com/color/hex-hsl

Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.

curl -X POST https://api.kit.forhosting.com/color/hex-hsl \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#FF8040"}'
{
  "hex": "#FF8040"
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hex_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.

per richiesta$0.002

Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.

HTTPCodiceSignificato
401unauthorizedChiave API mancante o non valida: controlla l'header Authorization.
402insufficient_balanceCredito esaurito: ricarica per continuare a eseguire attività.
404unknown_typeTipo di attività sconosciuto: controlla il campo type della richiesta.
429rate_limitedTroppe richieste in poco tempo: rallenta e riprova tra qualche secondo.

Come inserire un codice hex e cosa calcola la conversione

Gli alias color, colour, value e hex_code mappano sullo stesso campo quando i client preferiscono quei nomi. Input identici producono sempre JSON identico perché il percorso è aritmetica pura senza rete, senza seme casuale e senza orologio a muro.

Leggere tinta, saturazione, luminosità, eco RGB e stringhe CSS

Espone poi h, s e l per tinta in gradi, saturazione in percento e luminosità in percento. Il rosso puro #FF0000 produce tinta zero con saturazione piena e luminosità media; il verde puro #00FF00 e il blu puro #0000FF cadono vicino a 120 e 240 gradi rispettivamente; canali uguali come #808080 producono grigi con saturazione zero. In caso di successo la risposta include la stringa hex normalizzata con cancelletto iniziale e sei cifre maiuscole, il campo hex_digits senza cancelletto, e i canali r, g e b espansi per verificare il parse o concatenare strumenti solo RGB. Gli stessi tre numeri riappaiono sotto i nomi lunghi hue, saturation e lightness, e annidati in un oggetto hsl, così codice UI, demo SDK e valutatori possono scegliere la forma adatta senza mappatura extra. Sono incluse due stringhe pronte da incollare: hsl_css usa la forma moderna CSS Color Module separata da spazi come hsl(20.1 100% 62.55%), e hsl_legacy usa la forma classica con virgole e parentesi che i parser più vecchi si aspettano ancora. Il campo method è sempre hex_to_hsl così i router a valle possono ramificare senza sniffare forme. Hex mancante, stringhe vuote, caratteri non hex e lunghezze diverse da tre o sei cifre falliscono con invalid_input e non sono addebitati dopo il rifiuto del motore.

Uso API, prezzi, flussi di design e limiti pratici

Usi il convertitore hex in HSL gratuito nel browser per ritocchi di palette, demo di lezione e controlli rapidi senza installare una libreria colore. Abbini le uscite HSL a verificatori di contrasto costruendo temi accessibili, o alimenti scostamenti di tinta in pipeline di token di brand che tengono fissa la luminosità mentre ruotano accenti derivati da un campione hex di brand. Invii un corpo JSON con la stringa obbligatoria hex impostata a un codice colore a tre o sei cifre. 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 il framing di prodotto sono specificamente hex in HSL con validazione rigorosa del codice; per triple di canale RGB usi il convertitore RGB in HSL dedicato, e per conversione multi-formato tra HEX, RGB, HSL, LAB e CMYK in una chiamata usi il convertitore colore più ampio del catalogo. Gli autori di SDK possono mappare h, s e l direttamente in controlli di form o proprietà personalizzate CSS senza reimplementare parse hex e conversione in ogni linguaggio.

Didattica e valutazione della matematica del colore

Corsi e valutazioni di codice confrontano le risposte hex→HSL degli studenti con JSON deterministico, con invalid_input chiaro quando il codice hex è malformato.

Leggi la documentazione completa del KIT →