OKLCH in stringa CSS
Luminosità 0.7, croma 0.15 e tonalità 180 diventano oklch(0.7000 0.1500 180.00), oppure oklch(70.0000% 0.1500 180.00) se preferisce le percentuali. Tutti i Suoi token e fogli di stile risultano scritti allo stesso modo, con gli stessi decimali. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- L
- 0,7
- C
- 0,15
- H
- 180
- L arrotondato
- 0,7
- C arrotondato
- 0,15
- H arrotondato
- 180
- Decimali di L
- 4
OKLCH è lo spazio colore percettivo alla base del moderno CSS Color Module Level 4: consente ai designer di impostare indipendentemente luminosità, croma e tonalità, mentre il browser esegue il gamut mapping dei valori fuori intervallo. I design system, le pipeline di token e i generatori di documentazione necessitano di un modo deterministico per trasformare componenti numerici OKLCH in una stringa della funzione oklch() pronta da incollare, validata allo stesso modo in ogni ambiente. Questa capacità accetta luminosità nell’intervallo unitario, croma non negativo, tonalità in gradi e un canale alfa opzionale; quindi arrotonda ciascun componente a decimali fissi ed emette sia la forma con luminosità unitaria sia quella con luminosità in percentuale della funzione CSS.
Cos’è OKLCH e perché conta una stringa CSS oklch()
OKLCH separa il colore in tre assi percettivamente significativi: L per la luminosità dal nero al bianco su una scala pressoché uniforme, C per il croma (quanto è colorato il campione; zero significa pienamente acromatico) e H per l’angolo di tonalità in gradi attorno alla ruota dei colori. A differenza dell’HSL legacy, passi uguali di luminosità in OKLCH tendono a risultare più uniformi all’occhio umano; per questo i design system che abbandonano hex e HSL spesso memorizzano prima le rampe di marca in OKLCH.
Il CSS Color Module Level 4 espone quello spazio direttamente con la funzione oklch(), così un foglio di stile può dichiarare oklch(0.72 0.14 250) o la forma percentuale equivalente oklch(72% 0.14 250) senza una conversione sRGB intermedia che taglierebbe il gamut troppo presto. L’opacità opzionale usa la sintassi moderna con slash oklch(L C H / A), allineata alle altre funzioni colore CSS.
Contratto di ingresso, regole di arrotondamento e forma della risposta
L’alfa opzionale tra zero e uno abilita l’opacità con slash nella stringa emessa. Tali errori di convalida non vengono fatturati. Esempio: l uguale a 0.7, c uguale a 0.15, h uguale a 180 produce oklch(0.7000 0.1500 180.00) e oklch(70.0000% 0.1500 180.00).
Con alfa 0.5 compare la forma con slash: oklch(0.7000 0.1500 180.00 / 0.5000). La tonalità non viene avvolta nell’intervallo da zero a trecentosessanta, così angoli multi-giro o negativi intenzionali sopravvivono in CSS, che accetta qualsiasi tipo di angolo. Abbini questo formattatore a un convertitore separato se le serve hex o sRGB; questa capacità convalida e serializza solo OKLCH per CSS.
Dove un formattatore OKLCH in CSS porta valore concreto
I repository di token di design e le pipeline style-dictionary convertono oggetti colore strutturati in proprietà personalizzate CSS; un formattatore condiviso mantiene ogni pacchetto del monorepo sulla stessa grammatica oklch() invece di template ad hoc. Le librerie di componenti e la documentazione Storybook possono mostrare campioni live guidati da controlli numerici L, C e H copiando il campo css esatto negli snippet. Gli strumenti di accessibilità e di tematizzazione che generano rampe chiare e scure in OKLCH necessitano di un passaggio finale che non inventi mai CSS illegale.
La convalida fallita non consuma saldo.
Casi d'uso
Documentazione Storybook e di componenti
Controlli le manopole L, C e H in una demo live e copi il campo css esatto in snippet di codice allineati ai fogli di stile di produzione.
Generatori di temi e rampe
Dopo aver calcolato i passi OKLCH per le modalità chiara e scura, formatti ogni stop come oklch() valido CSS Color Level 4 con alfa opzionale a slash per superfici traslucide.
Domande frequenti
Come si formatta OKLCH come stringa CSS oklch()?
Invii numeri finiti l in [0,1], c ≥ 0 e h in gradi. L’alfa opzionale aggiunge opacità con slash.
Quali intervalli sono validi per L, C, H e alfa?
La luminosità deve essere in [0, 1], il croma non negativo, la tonalità qualsiasi angolo finito in gradi e l’alfa (se inviato) in [0, 1].
Come si controlla l’arrotondamento?
I predefiniti sono quattro decimali per L e C e due per H.
Lo strumento converte OKLCH in hex o RGB?
No. Convalida e formatta solo OKLCH in stringhe CSS oklch() moderne. Usi una capacità di conversione colore separata se le servono canali sRGB o hex.
Come aggiungo trasparenza a un colore oklch()?
Indichi un'opacità tra 0 e 1 e verrà scritta dopo una barra. Con luminosità 0.7, croma 0.15, tonalità 180 e opacità 0.5 ottiene oklch(0.7000 0.1500 180.00 / 0.5000).
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/oklch-to-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"l":0.7,"c":0.15,"h":180}'const res = await fetch("https://api.kit.forhosting.com/color/oklch-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"l": 0.7,
"c": 0.15,
"h": 180
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/oklch-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"l": 0.7,
"c": 0.15,
"h": 180
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/oklch-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"l":0.7,"c":0.15,"h":180}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"l":0.7,"c":0.15,"h":180}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/oklch-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
{
"l": 0.7,
"c": 0.15,
"h": 180
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.oklch_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
Gli intervalli non validi falliscono con invalid_input invece di produrre spazzatura silenziosa.
Cos’è OKLCH e perché conta una stringa CSS oklch()
Gli strumenti che costruiscono token, JSON di tema o CSS generato devono quindi produrre una stringa stabile byte per byte: gli stessi L, C e H danno sempre gli stessi decimali, spazi e parentesi. Questo endpoint standardizza quel contratto: convalida gli intervalli, arrotonda con precisione fissa e restituisce le forme CSS a L unitaria e a L percentuale così il consumatore sceglie lo stile della casa senza reimplementare le regole di formattazione.
Contratto di ingresso, regole di arrotondamento e forma della risposta
Invii un corpo JSON con i numeri finiti obbligatori l (luminosità nell’intervallo chiuso da zero a uno), c (croma maggiore o uguale a zero) e h (tonalità in gradi, qualsiasi angolo finito). Gli interi opzionali l_decimals, c_decimals e h_decimals (ciascuno da zero a dieci) sostituiscono i predefiniti di quattro, quattro e due decimali rispettivamente; l’alfa, quando presente, viene sempre stampato con quattro decimali. Ogni campo può arrivare come numero JSON o come stringa numerica; campi mancanti, valori non finiti, booleani e L o alfa fuori intervallo falliscono con invalid_input indicando il campo, e il croma negativo viene respinto allo stesso modo. In caso di successo il corpo riecheggia i componenti grezzi, quelli arrotondati, i budget di decimali usati, has_alpha, un campo css con la stringa oklch() a luminosità unitaria, un campo css_percent con L in percentuale alla stessa precisione, più le stringhe method, formula e message per l’interfaccia.
Dove un formattatore OKLCH in CSS porta valore concreto
Poiché l’implementazione è parse pura di tier A, ogni chiamata riuscita costa il prezzo base pubblicato $0.002 senza token di modello e senza rete in uscita. Mantenga le richieste piccole, fissi le stringhe css e css_percent nei test e otterrà letterali di colore CSS moderni e riproducibili per design system, worker all’edge e generatori di documentazione, senza montare un’intera libreria di scienza del colore solo per formattare.
Casi di integrazione
Pipeline di token di design e variabili CSS
Serializzi rampe di marca OKLCH in proprietà personalizzate oklch() stabili per style-dictionary, Theo o JSON di tema proprietario senza deriva di stringhe in virgola mobile tra macchine CI.
Domande tecniche
Quanto costa lo strumento OKLCH in stringa CSS?
Lo strumento nel browser è gratuito. Le richieste API usano il saldo prepagato KIT a $0.002 per chiamata riuscita; l’input non valido non viene fatturato.