Hex in variabile CSS
Faccia di un colore sciolto una variabile CSS riutilizzabile: #3366ff con il nome brand-primary diventa --brand-primary: #3366ff;, con la forma breve espansa e l’hex in minuscolo. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Hex
- #3366ff
- Nome
- brand-primary
- Valore
- #3366ff
- Hex6
- 3366ff
- Hex grezzo
- #3366ff
- Nome
- --brand-primary
Una proprietà personalizzata CSS —detta anche variabile CSS— è un token riutilizzabile che Lei dichiara una volta e consulta con var() in tutto un foglio di stile, un file di tema o una pipeline di token di design.
Che cos'è una proprietà personalizzata CSS e perché avvolgere un colore hex
Le proprietà personalizzate CSS sono dichiarazioni CSS ordinarie i cui nomi iniziano con due trattini. L'hex resta il formato di scambio che la maggior parte dei selettori, PDF di brand e file di token ancora esportano, ma un #3366ff grezzo non è un contratto di foglio di stile: non ha nome, non ha prefisso -- e non ha punto e virgola finale.
Avvolgerlo come dichiarazione di ident con trattini è una trasformazione piccola ed esatta che tuttavia fallisce nelle pipeline — cancelleti assenti, maiuscole miste, abbreviazione a tre cifre non espansa, nomi che iniziano con una cifra, $variabili Sass incollate per abitudine, oppure un involucro var() dove spetta solo l'ident. Ognuno di quegli errori produce CSS che sembra quasi giusto e poi fallisce in analisi o in una revisione.
Un passo dedicato da hex a variabile CSS standardizza il contratto: convalidare il colore, convalidare il nome, espandere l'abbreviazione, portare l'hex a sei cifre in minuscolo, conservare la capitalizzazione dell'ident ed emettere uno spazio dopo i due punti più un punto e virgola finale. Il risultato è una riga di definizione pronta da incollare in :root, una classe di tema o un tokens.css generato, senza ricalcolare la grammatica in ogni deposito.
Dove un formattatore da hex a variabile CSS merita davvero il posto
I depositi di token di design e le pipeline Style Dictionary convertono oggetti di palette strutturati in proprietà personalizzate CSS; un formattatore condiviso tiene ogni pacchetto sulla stessa grammatica di dichiarazione invece di modelli ad hoc che divergono su maiuscole del cancelletto, abbreviazione o lo spazio dopo i due punti. Le librerie di componenti e la documentazione Storybook possono esporre un selettore di colore più un campo nome e copiare il declaration esatto in frammenti che coincidono con i fogli destinati alla produzione.
I generatori di tema che emettono blocchi :root chiari e scuri hanno bisogno di un passo finale che non inventi mai un ident con trattini illecito né ometta il punto e virgola. Preferisca questa capacità quando ha già un token hex e un nome scelto e le serve solo la riga di definizione; non converte hex in HSL, non risolve colori CSS con nome come rebeccapurple e non accetta hex alfa a otto cifre.
Fissi la stringa declaration nei test, tenga i nomi in kebab-case o nella convenzione di casa, e ottiene righe di proprietà personalizzata riproducibili per design system, worker al bordo e generatori di documentazione senza erigere una biblioteca completa di scienza del colore solo per avvolgere.
Casi d'uso
Documentazione Storybook e componenti
Consenta agli autori di scegliere un hex e un nome di token, poi di copiare il campo declaration esatto in frammenti di codice che coincidono con il blocco :root di produzione.
Generatori di temi e palette
Dopo aver calcolato una rampa hex chiara o scura, avvolga ogni fermata come proprietà personalizzata CSS con nome così il file di tema è CSS valido già alla prima emissione.
Domande frequenti
Come avvolgo un colore hex come proprietà personalizzata CSS?
Invii hex (3 o 6 cifre, # facoltativo) e name (con o senza --).
Il nome richiede un -- iniziale?
No. brand-primary e --brand-primary diventano entrambi --brand-primary. La capitalizzazione è conservata.
Quali formati hex sono accettati?
Colori esadecimali a tre cifre (#RGB) e a sei cifre (#RRGGBB), con o senza # iniziale. L'abbreviazione viene espansa. Le forme con alfa (#RGBA, #RRGGBBAA) e i colori CSS con nome non sono accettati.
Com'è fatta la riga di definizione?
Sempre --<ident>: #<sei cifre hex minuscole>; con uno spazio dopo i due punti e un punto e virgola finale. Esempio: --brand-primary: #3366ff;.
Quali nomi di variabile vengono rifiutati?
Il nome deve iniziare con una lettera o un trattino basso, eventualmente preceduto da un trattino, e usare solo lettere, cifre, trattini e trattini bassi. Un nome che inizia con una cifra o una variabile Sass con $ viene rifiutato invece di produrre CSS non valido.
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/hex-to-css-var \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hex":"#3366ff","name":"brand-primary"}'const res = await fetch("https://api.kit.forhosting.com/color/hex-to-css-var", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hex": "#3366ff",
"name": "brand-primary"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hex-to-css-var",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hex": "#3366ff",
"name": "brand-primary"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hex-to-css-var", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hex":"#3366ff","name":"brand-primary"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hex":"#3366ff","name":"brand-primary"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hex-to-css-var", 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
{
"hex": "#3366ff",
"name": "brand-primary"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hex_to_css_var",
"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.
Limiti
max_name_len | 64 |
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
I team continuano a conservare i colori di brand come codici hex in Figma, PDF di brand e palette JSON, poi hanno bisogno di una sola riga deterministica da incollare in :root o in un blocco di tema. Questo strumento avvolge un colore hex convalidato in una dichiarazione di proprietà personalizzata con nome: Lei sceglie l'identificatore, il solver normalizza l'hex a sei cifre minuscole con cancelletto, verifica che il nome sia un ident con trattini lecito e restituisce la riga di definizione --name: #rrggbb;. I codici hex non validi e gli identificatori illeciti falliscono con invalid_input invece di emettere CSS che non si analizzerebbe. La stessa logica pura gira gratis nel browser e sull'API, così i token generati non divergono tra anteprime locali, integrazione continua e fogli di produzione.
Che cos'è una proprietà personalizzata CSS e perché avvolgere un colore hex
Lei scrive --brand-primary: #3366ff; su :root o su qualsiasi selettore, poi consuma il token con color: var(--brand-primary) su pulsanti, collegamenti e superfici. Quella fonte unica di verità è il modo in cui i design system tengono d'accordo un hex da Figma, una palette JSON e un foglio di produzione senza cacciare decine di letterali cablati.
Contratto di ingresso, regole di convalida e riga di definizione
Lo spazio bianco circostante viene tagliato. In caso di successo l'hex torna sempre come #rrggbb minuscolo, l'abbreviazione a tre cifre viene espansa (#abc diventa #aabbcc) e il nome torna con prefisso -- conservando la capitalizzazione originale delle lettere. Il campo principale declaration è la riga di definizione stessa: --brand-primary: #3366ff;. Invii un corpo JSON con due stringhe obbligatorie. hex è il colore: tre o sei cifre esadecimali, cancelletto iniziale facoltativo, lettere maiuscole o minuscole. Gli alias color, value, text, input e code sono accettati dallo stesso solver. name è l'ident della proprietà personalizzata, con o senza -- iniziale; gli alias includono variable, var, var_name, custom_property e ident. La stessa stringa è spezzata in variable e value per le tabelle di token, e root_block la avvolge come :root { --brand-primary: #3366ff; } per seminare un foglio con un solo incolla. I canali interi r, g e b, più i flag shorthand, had_hash e had_prefix, descrivono la forma originale. La convalida fallita —campo assente, hex vuoto dopo un cancelletto, lunghezza diversa da tre o sei, caratteri non hex, prefisso di programmazione 0x, spazi dentro il nome, prefisso $ Sass, involucro var(), ident che non inizia con lettera o trattino basso, oppure un nome più lungo di sessantaquattro caratteri incluso il prefisso— restituisce invalid_input nominando il campo e non viene mai addebitata. Il prezzo è un fisso $0.002 per richiesta riuscita.
Dove un formattatore da hex a variabile CSS merita davvero il posto
Poiché l'implementazione è parse pura di livello A, ogni chiamata riuscita costa il prezzo base pubblicato $0.002 senza token di modello e senza rete in uscita, e la convalida fallita non consuma saldo.
Casi di integrazione
Pipeline di token di design e fogli di stile
Trasformi voci hex di un JSON di brand in righe stabili --name: #rrggbb; per Style Dictionary, Theo o un tokens.css proprio, senza deriva di maiuscole né di abbreviazione tra macchine.
Domande tecniche
Quanto costa lo strumento da hex a variabile CSS?
Lo strumento del browser è gratuito. Le richieste API usano il saldo prepagato KIT a $0.002 per chiamata riuscita; l'ingresso non valido non viene addebitato.