Convertitore HSL in HWB

HSL descrive un colore tramite la tonalità sulla ruota, la saturazione come quanto è vivace la miscela e la luminosità come quanto è vicino al nero o al bianco. HWB usa quella stessa tonalità e indica quanto bianco e quanto nero si mescolano alla tinta pura. Chi già sceglie i colori in HSL ha spesso bisogno di HWB per scrivere le funzioni hwb() del CSS Color Module, parlare con strumenti di illustrazione che espongono cursori di bianchezza e nerezza, o documentare un campione come tinta più ombra. Questo convertitore accetta la tonalità in gradi da zero a trecentosessanta e la saturazione e la luminosità come percentuali da zero a cento, poi restituisce il triplo HWB corrispondente con una stringa CSS hwb().

Come HSL si proietta su tinta, bianchezza e nerezza

La tonalità è condivisa da HSL e HWB: zero gradi è rosso puro, centoventi è verde puro, duecentoquaranta è blu puro e trecentosessanta chiude il cerchio di nuovo sul rosso. HSL memorizza poi la saturazione come quanto un grigio della luminosità scelta viene allungato verso il colore pienamente cromatico a quella tinta, e la luminosità come la miscela tra nero a zero per cento, un tono medio vicino al cinquanta per cento e bianco al cento per cento.

HWB nomina lo stesso colore come una tinta pura mescolata con una quantità di bianco e una quantità di nero. Sull'intervallo unitario la mappatura è in forma chiusa e non richiede un passaggio per RGB intero: il croma vale uno meno il valore assoluto di due volte la luminosità meno uno, il tutto moltiplicato per la saturazione; la bianchezza è la luminosità meno metà del croma; la nerezza è uno meno la luminosità meno metà del croma.

È la stessa cosa che prendere il canale RGB minimo come bianco e uno meno il canale RGB massimo come nero, che è come il CSS Color Module Level Four definisce HWB. Quando la saturazione è zero il croma scompare, così bianchezza e nerezza diventano percentuali complementari che sommano a cento e descrivono un grigio, un nero o un bianco.

Quando la luminosità è cinquanta per cento e la saturazione è cento per cento, il croma vale uno e sia il bianco sia il nero collassano a zero, cioè la tinta pura. La tonalità deve stare nell'intervallo chiuso da zero a trecentosessanta; saturazione e luminosità devono ciascuna stare tra zero e cento per cento inclusi.

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 perché HSL e HWB condividono quell'angolo e questo convertitore non inventerà un avvolgimento. I campi s e l sono saturazione e luminosità come percentuali da zero a cento.

Quando la saturazione esce da zero a cento, la risposta spiega che s deve essere una percentuale in quella banda chiusa così un client può limitare o correggere il token prima di riprovare; la stessa regola vale per la luminosità.

In caso di successo la risposta restituisce i valori h, s e l puliti, riporta la bianchezza w e la nerezza b come percentuali, annida l'oggetto hsl di origine e l'oggetto hwb risultante, emette una stringa CSS stampabile della forma hwb(H W% B%) e include una breve nota di formula che riformula le identità di croma.

Controlli classici includono il blu-ciano di tono medio con tinta duecentodieci, saturazione ottanta e luminosità quarantacinque, che si proietta su nove per cento di bianco e diciannove per cento di nero; il rosso puro con tinta zero, saturazione cento e luminosità cinquanta, che si proietta su zero di bianco e zero di nero; e qualsiasi tinta con saturazione zero, che collassa in una miscela acromatica la cui bianchezza più nerezza vale cento.

Dove la conversione da HSL a HWB compare nel lavoro reale

I design system spesso redigono rampe di marca in HSL così i team di prodotto possono scalare la luminosità per un contrasto accessibile mantenendo stabili la tinta e una banda di saturazione; tuttavia i fogli di stile moderni, le app di illustrazione e diversi selettori nativi espongono ormai HWB perché mescolare una tinta pura con bianco e nero corrisponde a come i pittori parlano di tinte e ombre.

Gli ingegneri front-end che migrano un token da proprietà personalizzate hsl() a hwb() hanno bisogno di un oracolo deterministico che non dipenda dalla serializzazione dello stile calcolato di un browser particolare. Strumenti di visualizzazione dati e di arte generativa che costruiscono palette categoriche avanzando la tinta a saturazione e luminosità fisse devono ancora scaricare HWB quando un renderer o una pipeline di stampa chiede bianchezza e nerezza invece di un terzo asse di luminosità.

Curricula e lezioni di bootcamp insegnano i modelli cilindrici fianco a fianco e servono un'unica chiave affidabile per i compiti che combaci con le identità del CSS Color Module, non con uno screenshot di un selettore di colore. Se in seguito Le servono HSL verso RGB, HSL verso HSV, conversione multi-formato HEX LAB CMYK o controlli di contrasto WCAG, le tratti come intenzioni di ricerca e landing separate invece di sovraccaricare questa pagina dedicata al convertitore da HSL a HWB.