Convertitore HSL in RGB

HSL descrive un colore tramite la tonalità sulla ruota, la saturazione come quanto il colore è vivido e la luminosità come quanto è vicino al nero o al bianco. Una tonalità fuori dall'intervallo chiuso da zero a trecentosessanta viene rifiutata con un errore di validazione chiaro affinché i token errati non si avvolgano in silenzio.

Come HSL si proietta su rosso, verde e blu

La tonalità è un angolo sulla ruota dei colori: zero gradi è rosso puro, centoventi è verde puro, duecentoquaranta è blu puro e trecentosessanta chiude il cerchio di nuovo sul rosso. La saturazione allunga un grigio della luminosità scelta verso il colore pienamente cromatico a quella tonalità; zero per cento di saturazione è sempre grigio, nero o bianco acromatico che dipende solo dalla luminosità. La luminosità va dal nero a zero per cento, passa dal tono medio puro vicino al cinquanta per cento, fino al bianco al cento per cento.

L'algoritmo di conversione usato qui segue il CSS Color Module e la formulazione W3C: scala saturazione e luminosità nell'intervallo unitario, calcola i limiti intermedi di croma p e q da luminosità e saturazione, poi campiona tre posizioni spostate sul cerchio unitario con il classico ausiliario hue2rgb per i canali rosso, verde e blu. Quando la saturazione è zero i tre canali collassano sullo stesso grigio derivato dalla luminosità, il che è insieme un'ottimizzazione di prestazioni e un guadagno di stabilità numerica.

Ogni canale dell'intervallo unitario viene moltiplicato per duecentocinquantacinque e arrotondato all'intero più vicino affinché il risultato corrisponda alle aspettative di framebuffer a otto bit e di CSS rgb(). Saturazione e luminosità devono ciascuna stare tra zero e cento per cento inclusi, come le percentuali che i designer digano nei fogli di stile.

Cosa invia e cosa riceve in risposta

Invii tre numeri finiti nei campi h, s e l. Il campo h è la tonalità in gradi ed è obbligatorio; deve stare tra zero e trecentosessanta inclusi. I campi s e l sono saturazione e luminosità come percentuali da zero a cento.

Quando la tonalità è fuori dalla banda legale, la risposta spiega che h deve essere tra zero e trecentosessanta gradi così il client può limitare o correggere il token prima di riprovare. In caso di successo la risposta restituisce i valori h, s e l puliti, canali interi r, g e b ciascuno da zero a duecentocinquantacinque, una stringa rgb stampabile della forma rgb(R, G, B), una stringa hex in minuscolo della forma #rrggbb e una breve nota di formula che nomina il percorso CSS e W3C.

Controlli classici includono il rosso puro con tonalità zero, saturazione cento e luminosità cinquanta che dà duecentocinquantacinque, zero, zero; il grigio medio con qualsiasi tonalità, saturazione zero e luminosità cinquanta che dà centoventotto su ogni canale; e verdi profondi vicino alla tonalità centoventi con alta saturazione e luminosità modesta.

Dove la conversione HSL in RGB compare nel lavoro reale

I design system memorizzano rampe di marca e token semantici in HSL così i team di prodotto possono ruotare la tonalità per i temi mantenendo gradini di luminosità amichevoli al contrasto; pubblicare su proprietà personalizzate CSS, colori nativi mobile e stili di riempimento canvas richiede ancora RGB e hex affidabili. Le librerie di visualizzazione dati generano palette categoriche avanzando la tonalità a saturazione e luminosità fisse, poi convertono ogni passo in RGB per motori SVG, WebGL e di grafici.

I template e-mail e i generatori PDF accettano spesso solo hex o rgb(), quindi le pipeline di automazione marketing convertono una volta le specifiche HSL di marca e mettono in cache il triplo di canali. I flussi di accessibilità calcolano rapporti di contrasto su RGB o luminanza relativa; partire da HSL per regolazioni percettive di luminosità termina comunque nei valori di canale che questo convertitore fornisce.

Curricula e lezioni di bootcamp insegnano i modelli di colore fianco a fianco e servono un unico oracolo affidabile che combaci con il rendering CSS per le chiavi dei compiti. Se in seguito le servono conversioni multi-formato tra HEX, LAB e CMYK, l'inverso da RGB a HSL o controlli di contrasto WCAG, le tratti come intenzioni di ricerca e landing separate invece di sovraccaricare questa pagina dedicata al convertitore HSL in RGB.