Estrarre codici colore esadecimali dal testo

Cerca ed estrai tutti i codici colore esadecimali dal testo con un clic

Come usare l'estrattore di codici colore esadecimali

Incolla CSS, HTML, note di design o qualsiasi testo che contenga colori esadecimali. Lo strumento trova codici come #0F5C8C e #abc, quindi li elenca per la copia o il download. L'elaborazione avviene nel tuo browser.

  1. Incolla il tuo testo nella casella di input (fogli di stile, frammenti HTML o appunti di design).
  2. Scegli opzioni
    • Rimuovere i colori duplicati — mantieni ogni colore una volta.
    • Standardizzare il formato (maiuscolo) — normalizzare in esadecimale maiuscolo.
    • Includi colori in forma breve (#abc) — corrisponde anche a un esadecimale a 3 cifre.
    • Espandi la forma breve a 6 cifre (#abc → #AABBCC) — converte #abc in #AABBCC quando la forma breve è attiva.
    • Mostra anteprime dei colori — visualizzare campioni accanto ai valori.
  3. Clicca su “Estrai codici colore”.
  4. Copia, scarica o rivedi l'elenco estratto e le anteprime.

Hex color extractor example

Casi d'uso comuni

  • Verifiche CSS / tema: Estrai ogni colore esadecimale da un foglio di stile o da un file di token di design.
  • Coerenza del marchio: Raccogli i colori utilizzati nei modelli HTML o nel markup delle email.
  • Consegna del design: Estrai i colori dalle note o dal CSS esportato prima di ricostruire un kit UI.
  • Pulizia: Trova i colori avanzati o duplicati prima di consolidare una palette.

Quali formati vengono rilevati?

  • Hex a 6 cifre: #0F5C8C, #ff5733 (con o senza # a seconda del contesto nel testo
  • Forma breve a 3 cifre: #abc, #F00 (quando “Includi forma breve” è abilitato)
  • Forma breve espansa: #abc → #AABBCC quando l'espansione è abilitata

Le funzioni RGB/HSL non vengono convertite qui — questo strumento estrae solo codici colore esadecimali.

Esempio: Prima e Dopo

Con “Includi forma abbreviata”, “Espandi forma abbreviata”, “Rimuovi duplicati” e “Standardizza formato” attivati:

CSS di inputColori estratti
.btn {
  color: #ff0000;
  background: #abc;
  border-color: #FF0000;
  outline: #0F5C8C;
}
#FF0000
#AABBCC
#0F5C8C

#ff0000 e #FF0000 ridurre a un solo valore maiuscolo. Breve #abc si espande in #AABBCC.

Domande Frequenti (FAQ)

Lo strumento carica il mio CSS o HTML?

No. L'estrazione avviene localmente nel tuo browser. Il tuo testo non viene inviato ai nostri server.

Perché manca un colore breve come #abc?

Abilita Includi i colori in forma abbreviata. Abilita opzionalmente Espandi la forma breve elencare l'equivalente a 6 cifre.

Può estrarre valori rgb() o hsl()?

Non in questa pagina. Usa un convertitore di colori dedicato se hai bisogno della conversione RGB ↔ Hex (per esempio Esadecimale a RGB / RGB a Hex).

Il cancelletto (#) è necessario?

I colori più abbinati includono #. Abilitare standardize/uppercase per mantenere un elenco coerente per i sistemi di design.

Privacy

Tutte le corrispondenze avvengono sul tuo dispositivo con JavaScript. Non memorizziamo il testo che incolli né i colori che estrai.