HSL in stringa CSS
Ottenga un valore hsl() pronto per il browser senza digitare virgole né segni di percentuale: tonalità 210,456, saturazione 64,444 e luminosità 42,225 diventano hsl(210.46, 64.44%, 42.23%) con i due decimali predefiniti. 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,456
- Saturazione
- 64,444
- Luminosità
- 42,225
- Css
- hsl(210.46, 64.44%, 42.23%)
Trasformi valori separati di tonalità, saturazione e luminosità in una stringa CSS hsl() pulita, senza comporre la punteggiatura a mano, applicare arrotondamenti incoerenti o dimenticare le percentuali. Il formattatore convalida ogni componente, normalizza la tonalità sul cerchio cromatico, arrotonda secondo la precisione scelta e restituisce un risultato prevedibile. È utile ovunque dati colore strutturati debbano diventare CSS pronto per il browser, dalle pipeline di token e dai generatori di temi fino a test automatizzati, modelli e piccoli strumenti di sviluppo.
Fornisca componenti HSL numerici
La tonalità è un angolo in gradi e può essere positiva, negativa o maggiore di un giro completo. Il formattatore la riporta nell’intervallo canonico che inizia da zero e termina prima di 360: -30 equivale a 330 e 390 diventa 30. Saturazione e luminosità rappresentano percentuali, ma si inseriscono senza simbolo: usi 65 per sessantacinque per cento.
Entrambe devono rimanere tra 0 e 100.
Controlli un arrotondamento deterministico
Usi precision per scegliere il numero massimo di cifre decimali conservate nei tre componenti. Il valore predefinito è due e sono ammessi interi da zero a sei. Zero produce componenti interi; valori maggiori mantengono più dettaglio.
L’arrotondamento avviene dopo la normalizzazione della tonalità. Gli zeri finali superflui vengono rimossi e lo zero negativo diventa zero. Le regole non dipendono dalle impostazioni locali: il separatore decimale è sempre un punto, gli argomenti usano una virgola seguita da spazio e le percentuali ricevono sempre il proprio simbolo.
La stessa entrata valida restituisce quindi una stringa identica in qualunque ambiente.
Utilizzi in sicurezza il CSS restituito
Il risultato contiene un campo css nella notazione hsl(h, s%, l%). La capacità esegue solo la formattazione: non converte RGB o esadecimale, non aggiunge trasparenza alfa, non calcola il contrasto e non valuta la leggibilità. Per generare temi, convalidi prima i record e formatti ogni colore separatamente, così ogni errore resta identificabile.
Se la precisione appartiene a una convenzione pubblica, la specifichi esplicitamente. Inserisca la stringa solo dove è previsto un valore colore CSS.
Casi d'uso
Generare token grafici
Converta record HSL calcolati in valori CSS uniformi prima di scrivere variabili di tema o file di token.
Normalizzare un modulo
Convalidi i numeri di un selettore colore e produca una stringa stabile per anteprime, archiviazione o stili.
Creare test stabili
Applichi arrotondamento e spaziatura fissi per evitare variazioni negli snapshot dovute alla formattazione.
Domande frequenti
L’input include i simboli di percentuale?
No. Invii numeri da 0 a 100; il formattatore aggiunge i simboli necessari.
Che cosa accade a una tonalità fuori da 0 a 360?
Viene riportata sul cerchio cromatico nell’intervallo da 0 fino a prima di 360.
Quante cifre decimali posso mantenere?
Imposti precision su un intero da 0 a 6. Il valore predefinito è 2 e gli zeri finali vengono rimossi.
È supportata la trasparenza alfa?
No. Viene prodotta una stringa hsl() opaca a tre componenti, senza componente alfa.
Il risultato cambia in base alla mia lingua o regione?
No. Le regole sono fisse e non dipendono dalle impostazioni regionali: il separatore decimale è sempre un punto, quindi gli stessi valori danno sempre hsl(210.46, 64.44%, 42.23%), valido in qualsiasi browser.
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/hsl-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210.456,"saturation":64.444,"lightness":42.225}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210.456,"saturation":64.444,"lightness":42.225}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210.456,"saturation":64.444,"lightness":42.225}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-css", 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.456,
"saturation": 64.444,
"lightness": 42.225
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_css",
"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
Fornisca componenti HSL numerici
Invii tonalità, saturazione e luminosità come numeri JSON, non come espressione CSS parzialmente formattata. Ogni valore obbligatorio deve essere un numero finito; stringhe come «50», campi mancanti, null, Infinity e NaN vengono rifiutati per evidenziare gli errori e garantire risultati identici in API, browser e test.
Utilizzi in sicurezza il CSS restituito
Ogni richiesta automatizzata costa $0.002.
Domande tecniche
Quanto costa una richiesta?
Il prezzo base dell’API è $0.002 per richiesta.