Convertitore da HWB a HSL
La tinta 210 con 20 % di bianchezza e 10 % di nerezza diventa hsl(210 77.78% 55%), mantenendo la tonalità esattamente come l'ha inserita. Porti i Suoi colori di design da HWB a HSL senza tentativi. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Hue
- 210
- Bianchezza
- 20
- Nerezza
- 10
- H
- 210
- S
- 77,7778
- L
- 55
- Saturazione
- 77,7778
Il convertitore da HWB a HSL trasforma un angolo di tonalità e le percentuali di bianchezza e nerezza in tonalità, saturazione e luminosità senza dipendere dal parser dei colori del browser o da servizi esterni. Conserva l’angolo normalizzato, convalida ogni componente e applica la regola standard di normalizzazione HWB quando bianchezza e nerezza insieme superano il cento per cento. Il risultato comprende campi HSL numerici, un oggetto annidato e una stringa CSS pronta all’uso.
Inserisca un colore HWB completo e comprenda la convalida
La tonalità è misurata in gradi e può essere qualsiasi angolo finito positivo o negativo: il convertitore la riporta nel consueto intervallo da zero incluso a trecentosessanta escluso; meno trenta diventa quindi trecentotrenta e quattrocentoventi diventa sessanta. Bianchezza e nerezza sono percentuali e devono rimanere ciascuna tra zero e cento inclusi. Le stringhe numeriche sono ammesse quando contengono soltanto una notazione decimale o esponenziale valida, agevolando i client basati su moduli senza indebolire la convalida.
Questo limite rigoroso è utile nelle pipeline perché arresta i dati errati prima che possano sembrare un colore plausibile.
Come bianchezza e nerezza diventano HSL
HWB descrive un colore come una tonalità pura mescolata con bianco e nero. Dopo aver convertito entrambe le percentuali in frazioni, il convertitore ne verifica la somma. Se il totale non supera uno, la frazione restante è il croma: uno meno la bianchezza meno la nerezza.
La luminosità HSL è uno più la bianchezza meno la nerezza, diviso per due. La saturazione è il croma diviso per uno meno il valore assoluto di due volte tale luminosità meno uno, salvo ai limiti nero, bianco o acromatico, dove vale zero. Se bianchezza più nerezza supera il cento per cento, le regole colore CSS normalizzano entrambe le proporzioni mediante la loro somma.
La tonalità restituita conserva comunque l’angolo di ingresso ricondotto all’intervallo anche quando la saturazione è zero. Ciò mantiene stabili le conversioni di andata e ritorno, i metadati della tavolozza e i confronti deterministici, sebbene il grigio visibile non abbia una tonalità percepibile. Tutti i risultati numerici pubblicati sono arrotondati a quattro decimali per evitare rumore in virgola mobile nelle istantanee.
Usi l’output in CSS, sistemi di design e test automatizzati
Una risposta riuscita espone h, s e l, con la tonalità in gradi e saturazione e luminosità in percentuale. Usi l’esecutore gratuito nel browser per tavolozze occasionali, esempi di documentazione e verifiche didattiche. Poiché l’implementazione contiene solo aritmetica limitata, lo stesso input produce sempre lo stesso output: non intervengono rete, casualità, orologio di sistema, parser dipendenti dalle impostazioni locali o profili colore nascosti.
Questo convertitore gestisce soltanto HWB verso HSL.
Casi d'uso
Migri i token colore CSS
Converta i token di design HWB in componenti HSL numerici e in una stringa CSS, conservando tonalità e miscela originali per la revisione.
Normalizzi le tavolozze generate
Gestisca totali programmati di bianchezza e nerezza superiori al cento per cento con valori effettivi espliciti, senza sorprese legate al browser.
Domande frequenti
Quali unità accetta il convertitore?
La tonalità è un angolo in gradi. Bianchezza e nerezza sono percentuali da 0 a 100 inclusi, non frazioni da 0 a 1.
Cosa accade se bianchezza più nerezza supera il 100%?
Entrambi i valori vengono normalizzati proporzionalmente tramite la somma, secondo le regole HWB. L’output è acromatico, normalized vale true e vengono restituite le percentuali effettive.
La tonalità viene conservata per un risultato grigio?
Sì. La tonalità di ingresso viene riportata nell’intervallo 0–360 e restituita anche con saturazione zero, conservando i metadati in modo deterministico.
Lei può usare i campi h, w e b?
I nomi canonici estesi prevalgono se vengono fornite entrambe le forme.
Come converto la tinta 210 con 20 % di bianchezza e 10 % di nerezza in HSL?
Il risultato è hsl(210 77.78% 55%). Ciò che resta togliendo bianchezza e nerezza è il colore puro, e la luminosità è uno più la bianchezza meno la nerezza, diviso due: 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/hwb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"whiteness":20,"blackness":10}'const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"whiteness": 20,
"blackness": 10
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hwb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"whiteness": 20,
"blackness": 10
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"whiteness":20,"blackness":10}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-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
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_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
Lo strumento nel browser è gratuito; la conversione automatizzata tramite API costa $0.002 per elemento riuscito.
Inserisca un colore HWB completo e comprenda la convalida
Fornisca hue, whiteness e blackness come numeri finiti. Sono accettati anche gli alias brevi h, w e b per i client che già conservano record HWB compatti. Valori mancanti, testo non numerico, infiniti e percentuali fuori intervallo producono invalid_input anziché essere dedotti o limitati in silenzio.
Come bianchezza e nerezza diventano HSL
Non rimane alcuna componente cromatica, quindi il risultato è grigio; effective_whiteness ed effective_blackness mostrano la miscela normalizzata e normalized vale true.
Usi l’output in CSS, sistemi di design e test automatizzati
Fornisce inoltre i nomi estesi hue, saturation e lightness, un oggetto hsl annidato e hsl_css da usare direttamente in un foglio di stile o in una proprietà personalizzata. Le percentuali originali di bianchezza e nerezza restano visibili, mentre effective_whiteness ed effective_blackness distinguono una miscela HWB sovradimensionata che ha richiesto la normalizzazione. Usi l’API a $0.002 per elemento riuscito quando un compilatore di token, un generatore di temi, uno script di migrazione o un’attività di integrazione continua richiede lo stesso contratto JSON stabile. Uno strumento multiformato è preferibile per input HEX, RGB, LAB o CMYK arbitrari, mentre questo endpoint mirato offre convalida precisa e normalizzazione trasparente ai flussi HWB.
Casi di integrazione
Crei fixture colore stabili
Usi l’output HSL arrotondato e deterministico in unit test, strumenti didattici e verifiche di conformità tra linguaggi.
Domande tecniche
Quanto costa la conversione tramite API?
Ogni elemento API riuscito costa $0.002. L’esecutore nel browser è gratuito e gli errori di convalida vengono restituiti come invalid_input.