Analizzare stringa HSL in RGB

Designer e ingegneri incollano letterali CSS hsl() e hsla() da fogli di stile, token di Figma e DevTools del browser, poi hanno bisogno di un triplo rosso-verde-blu stabile per canvas, app native e buffer di immagine. Questo analizzatore accetta una sola stringa di colore CSS, tollera spazi in più, unità di tonalità facoltative come deg, turn, rad e grad, e segni di percentuale facoltativi su saturazione e luminosità; quindi converte la tonalità, la saturazione e la luminosità analizzate lungo lo stesso percorso del CSS Color Module che i browser usano per dipingere hsl(). La tonalità si avvolge come CSS avvolge gli angoli; saturazione e luminosità fuori da zero a cento per cento vengono rifiutate affinché un errore di battitura non diventi bianco in silenzio.

Come una stringa CSS hsl() diventa un triplo RGB

Un colore CSS hsl() nomina un punto in coordinate cilindriche: la tonalità è l'angolo intorno alla ruota, la saturazione è quanto il colore dista dal grigio e la luminosità è quanto è vicino al nero o al bianco. Questa capacità analizza prima il token di funzione. Accetta la forma storica con virgole hsl(h, s, l) e la forma moderna separata da spazi hsl(h s l), con o senza la a di hsla, e con un alfa facoltativo dopo una quarta virgola o dopo una barra.

La tonalità può essere un numero nudo di gradi oppure portare un'unità esplicita: deg, turn, rad o grad. Saturazione e luminosità possono includere il segno di percentuale oppure ometterlo; entrambe si leggono come percentuali da zero a cento. Dopo che il token è compreso, la conversione segue il CSS Color Module e il percorso W3C hue2rgb: si scalano saturazione e luminosità sull'intervallo unitario, si calcolano i limiti intermedi p e q, si campionano tre posizioni spostate sul cerchio unitario, si moltiplica per duecentocinquantacinque e si arrotonda a interi.

Quando la saturazione è zero i tre canali collassano sullo stesso grigio. Il percorso è aritmetica pura, senza orologi e senza rete, così la stessa stringa produce sempre lo stesso triplo.

Contratto di ingresso, unità, spazi ed errori

Il valore deve essere una funzione CSS hsl() o hsla(), parentesi comprese; un triplo nudo di numeri viene rifiutato affinché il contratto resti un analizzatore di stringhe e non una seconda forma HSL numerica. Lo spazio extra dentro le parentesi viene ignorato. Saturazione e luminosità fuori da zero a cento per cento falliscono anch'esse invece di essere ritagliate, così un errore come cinquecento per cento non può diventare bianco in silenzio.

La tonalità si avvolge modulo trecentosessanta dopo la conversione dell'unità, come CSS, così quattrocentottanta gradi e centoventi gradi dipingono lo stesso verde. In caso di successo il corpo restituisce la stringa di ingresso ritagliata, gli h, s e l numerici analizzati (tonalità in gradi dopo l'avvolgimento, saturazione e luminosità come percentuali), canali interi r, g e b, un array triplo rgb, una stringa rgb() stampabile, un codice hex in minuscolo e una breve nota di formula.

Quando la stringa di origine includeva un componente alfa, la risposta include anche a nell'intervallo unitario e una stringa rgba(); se l'alfa è assente quelle chiavi vengono omesse invece di essere impostate a null. Esempio: hsl(210, 80%, 45%) produce gli stessi canali blu profondi che un convertitore HSL numerico restituirebbe per tonalità duecentodieci, saturazione ottanta e luminosità quarantacinque.

Dove analizzare una stringa hsl() merita il suo posto

Le pipeline di token di design memorizzano rampe di marca come funzioni CSS così restano leggibili accanto ai fogli di stile, poi emettono canali interi per UIColor di iOS, Android Color e hex delle e-mail. Gli strumenti di regressione visiva confrontano pixel renderizzati; un'analisi deterministica della stessa stringa hsl() usata nel CSS è l'unico modo per conoscere il triplo a otto bit atteso senza aprire un browser.

I generatori di documentazione stampano una tabella di campioni dai token di un deposito e non devono inventare un verde diverso da quello che il sito spedisce. I materiali didattici che mostrano le funzioni di colore CSS accanto a RGB e hex hanno bisogno di un oracolo che segnali la sintassi malformata invece di recuperare un segno di percentuale assente indovinando.

Se Lei ha già tre numeri anziché una stringa CSS, usi un convertitore HSL in RGB numerico; questa pagina possiede l'intenzione di ricerca di analizzare una stringa hsl() in un triplo RGB.