Espandere hex abbreviato

CSS e gli strumenti di design scrivono spesso i colori in forma abbreviata a tre cifre, ad esempio #f0a, invece della forma completa a sei cifre #ff00aa. I browser espandono tale abbreviazione raddoppiando ogni cifra esadecimale così che ogni canale diventi un byte completo. Questo strumento di espansione del colore hex abbreviato accetta un codice a tre cifre con o senza cancelletto iniziale, verifica che ogni carattere sia una cifra esadecimale e restituisce l’espansione deterministica a sei cifre più gli interi dei canali rosso, verde e blu corrispondenti. Gli sviluppatori front-end lo usano quando i token di design arrivano come codici brevi e fogli di stile, snapshot o design system richiedono la forma lunga. Studenti e script di QA lo usano per controllare che una palette scritta a mano coincida byte per byte con la regola del CSS Color Module.

Cosa significa l’abbreviazione a 3 cifre e come funziona l’espansione

In CSS un colore esadecimale può essere scritto con tre cifre dopo un cancelletto opzionale: un nibble per il rosso, uno per il verde e uno per il blu. La regola ufficiale di espansione è semplice e assoluta: ogni cifra viene ripetuta una volta così che tre caratteri diventino sei. Ad esempio #abc si espande in #aabbcc, #f0a in #ff00aa e #000 in sei zeri.

Questa regola non è un’euristica né un’approssimazione percettiva; è la stessa mappatura che i browser applicano quando analizzano un foglio di stile. Questo calcolatore codifica esattamente quella mappatura.

Lei fornisce un’abbreviazione a tre cifre, il motore porta le cifre in minuscolo per una forma canonica stabile, raddoppia ogni nibble e restituisce la stringa completa con cancelletto, le sei cifre senza cancelletto, una forma in maiuscolo per le guide di stile che preferiscono A–F maiuscole, l’abbreviazione normalizzata a tre cifre con e senza cancelletto, un booleano che registra se l’input portava un cancelletto iniziale, e i canali interi r, g e b da 0 a 255 così da poter alimentare lo stesso colore in strumenti RGB senza una seconda conversione.

Non esiste un percorso che inventi un quarto canale, preservi l’alfa o tratti i prefissi 0x come colori CSS validi. Usi un convertitore dedicato da hex a RGB o multiformato quando ha già sei cifre e serve solo i numeri di canale; usi questa pagina quando l’input è deliberatamente corto e il compito è materializzare la forma lunga con un contratto di validazione chiaro.

Dove conviene espandere l’hex abbreviato

I design system ricevono spesso campioni di marca come codici a tre cifre da guide di stile obsolete, plugin Figma o note manoscritte, mentre le pipeline di token moderne e le proprietà personalizzate CSS preferiscono hash a sei cifre per grepping, diff di snapshot e mappatura canale a canale. Espandere l’abbreviazione una sola volta al confine mantiene ogni consumatore a valle sulla forma lunga senza che ciascun team reimplementi leggermente in modo diverso la regola del raddoppio.

I materiali didattici di sviluppo web introducono presto i colori a tre cifre perché sono facili da digitare, poi chiedono agli studenti di spiegare l’espansione; uno strumento deterministico consente di mostrare che #fff è bianco e che #f0a non equivale a inventare cifre mancanti. Le pipeline di QA e accessibilità a volte memorizzano colori in formati misti; normalizzare i codici brevi a sei cifre prima dei controlli di contrasto evita falsi disallineamenti quando un lato ha usato l’abbreviazione e l’altro la forma lunga.

Abbini questo espansore a convertitori RGB o HSL quando servono altri spazi, e mantenga questa pagina focalizzata quando l’unico compito è da tre cifre a sei sotto un contratto di validazione rigoroso che rifiuta codici già lunghi e caratteri illegali invece di indovinare.