Hex a nome colore

Token di design, linee guida di brand e fogli di stile spesso memorizzano i colori come codici hex, eppure le persone parlano ancora con nomi come tomato, cornflowerblue o rebeccapurple. Questo strumento prende un singolo valore hex CSS—tre o sei cifre esadecimali, con o senza cancelletto iniziale—e restituisce il colore CSS nominato solido più vicino della palette CSS Color Module Level 4 per distanza euclidea nello spazio rosso-verde-blu a otto bit. Quando l’hex coincide già esattamente con un colore nominato, la risposta marca exact a true e la distanza è zero. Quando si colloca tra parole chiave, ottiene comunque un nome stabile più vicino, l’hex e i canali propri della parola chiave, e una distanza numerica così revisioni di design e regole di lint decidano quanto vicino sia abbastanza. Le stringhe hex non valide falliscono con un errore di validazione chiaro invece di inventare un nome.

Come si scelgono i colori CSS nominati più vicini

Ogni colore CSS nominato solido è una tripla fissa di valori di canale rosso, verde e blu da zero a 255, pubblicata nella tabella di parole chiave del CSS Color Module Level 4. L’input viene normalizzato: cancelletto iniziale opzionale, cifre hex in minuscolo, e scorciatoia a tre cifre espansa raddoppiando ogni nibble così che f zero zero diventi f f zero zero zero zero.

L’algoritmo misura poi la distanza euclidea nello spazio RGB: la radice quadrata della somma delle differenze di canale al quadrato tra il Suo colore e ciascuna tripla nominata. Vince il nome con la distanza più piccola. Quando due parole chiave condividono gli stessi valori RGB—ad esempio aqua e cyan, o fuchsia e magenta—o quando due triple distinte cadono alla stessa distanza numerica, si conserva il nome alfabeticamente primo così il risultato non oscilli tra le esecuzioni.

Distanza zero significa colpo esatto di palette e il flag exact è true; una distanza positiva significa un’approssimazione del vicino più prossimo ancora utilizzabile in testi, note di accessibilità o lint soft di palette.

Cosa invia e cosa riceve indietro

Invii un campo stringa denominato hex. Le forme accettate sono codici a sei cifre come hash f f five seven three three, scorciatoia a tre cifre come hash f zero zero, e le stesse stringhe senza cancelletto iniziale. Gli spazi intorno al valore vengono tagliati.

Controlli classici includono rosso puro come hash f f zero zero zero zero che risolve a red con exact true; quasi-arancio hash f f five seven three three che risolve vicino a tomato con distanza positiva; e codici a sei cifre senza hash che risolvono come la forma con hash.

Dove la ricerca hex-a-nome compare nel lavoro reale

Design system e brand book spesso pubblicano primari e accenti come hex mentre copy di prodotto, annotazioni di accessibilità e slide per stakeholder necessitano di nomi leggibili per gli stessi campioni. Regole di lint front-end e controlli CI possono segnalare hex personalizzati lontani da qualsiasi parola chiave CSS quando un team preferisce colori nominati nei fogli di stile per leggibilità. Autori di visualizzazione dati che mappano serie categoriali partono talvolta da rampe hex e vogliono la parola chiave CSS più vicina per legende che devono renderizzare senza immagini campione personalizzate.

Se in seguito serve conversione multi-formato tra HEX, RGB, HSL, LAB e CMYK, conversione inversa solo da nomi a hex, estrazione del colore dominante da immagini o controlli di contrasto WCAG, li tratti come intenti di ricerca e landing separati invece di sovraccaricare questa pagina dedicata hex-a-nome-colore.