Trova nome colore — Nome CSS più vicino

Trova la parola chiave CSS più vicina

CSS include un lungo elenco di parole chiave per i colori, da scelte familiari come black, white e red a nomi più specifici come cornflowerblue, papayawhip e mediumseagreen. Questo trova nome colore ti aiuta a collegare qualsiasi valore HEX al nome CSS disponibile più vicino. Inserisci un colore e il browser lo confronta con la mappa di parole chiave incorporata usando la distanza RGB. Il nome più vicino, il suo valore HEX e diverse alternative simili si aggiornano subito.

I colori con nome sono utili per demo rapide, didattica, documentazione ed esempi leggibili. Possono anche servire a descrivere un colore a qualcuno quando non sono richiesti token esatti. Tuttavia l'elenco dei colori con nome è limitato e distribuito in modo non uniforme: ci sono molti rosa e azzurri chiari ma meno tonalità di brand moderne e precise, quindi la parola chiave più vicina va considerata un'approssimazione e non un sostituto perfetto del tuo codice HEX originale.

Come funziona la ricerca del colore più vicino

Ogni parola chiave CSS ha un valore fisso di rosso, verde e blu. Lo script converte il tuo HEX in RGB, poi misura la distanza al quadrato da ogni colore con nome confrontando i tre canali. Il nome con la distanza minore viene mostrato come corrispondenza più vicina. Questo metodo è veloce e prevedibile, ideale per uno strumento lato client. Non è una formula completa di differenza percettiva del colore, quindi due colori con una distanza RGB simile non sempre appaiono ugualmente vicini all'occhio umano.

Quando usare i nomi al posto di HEX

Per i design system in produzione, HEX, RGB, HSL o le proprietà personalizzate sono di solito meglio dei nomi, perché conservano l'intento esatto. I nomi danno il meglio in esempi, prototipi rapidi, articoli di blog e conversazioni in cui la leggibilità conta più della precisione. Se usi un colore con nome nel CSS pubblicato, testalo nell'interfaccia completa come qualsiasi altro token. La parola chiave più vicina potrebbe comunque richiedere un controllo del contrasto prima di diventare sfondo, colore del testo o indicatore di stato.