Selettore Colori

Che cosa fa Selettore Colori

Selettore Colori serve a scegliere un colore preciso, leggerne i codici principali e preparare valori copiabili per design, CSS e documentazione tecnica. Il campionamento avviene nel campo colore visibile, mentre il cursore Tonalità sposta la base cromatica lungo l’intero intervallo. Il riquadro del colore attivo mostra il campione selezionato, il valore cambia in base al formato scelto e il pulsante di copia consente di prendere subito il codice necessario.

Il valore più importante di Selettore Colori non è limitato alla scelta di un singolo campione. Dopo aver selezionato la tinta, la stessa interfaccia permette di confrontare varianti, armonie, simulazioni di daltonismo, conversioni colore e contrasto su sfondo bianco o nero. Questo rende il color picker utile quando un colore deve essere valutato come parte di un sistema visivo, non solo come codice isolato.

Un HEX color picker è spesso il modo più rapido per passare da una decisione visiva a un valore riutilizzabile. In Selettore Colori puoi partire dal canvas, leggere HEX, RGB, HSL, HSV, OKLCH e CMYK, aggiungere più campioni alla palette e poi esportare i codici in un formato ordinato. Il controllo resta visivo, ma il risultato finale è abbastanza preciso per essere inserito in fogli di stile, specifiche UI o palette condivise.

Come usare Selettore Colori

1. Sposta il puntatore nel campo colore per scegliere la tinta e osserva il campione attivo mentre il valore viene aggiornato.
2. Usa il cursore Tonalità quando vuoi cambiare famiglia cromatica senza perdere il controllo sul punto scelto nel canvas.
3. Apri il menu del formato e seleziona Hex, RGB, HSL, HSV, OKLCH o CMYK in base al codice che devi copiare.
4. Premi l’icona di copia accanto al valore attivo per copiare il formato visualizzato in quel momento.
5. Usa i pulsanti più e meno per aggiungere o rimuovere campioni dalla palette selezionata quando vuoi confrontare più colori.
6. Apri Varianti cromatiche per leggere scale Tailwind, ombre, tinte e toni derivati dal colore attivo.
7. Apri Armonie cromatiche, Simula daltonismo, Converti colori o Verifica contrasto solo quando quei controlli servono al controllo finale.
8. Premi Esporta colori, scegli Hex, RGB, HSL o OKLCH e usa Copia codici per prendere l’elenco generato.

Formati colore disponibili

La scelta del formato dipende dal contesto tecnico. HEX resta compatto e leggibile nei fogli CSS, RGB è pratico quando servono canali numerici, HSL facilita modifiche ragionate su tonalità, saturazione e luminosità, HSV è utile per descrivere una scelta visiva, OKLCH aiuta nei sistemi moderni basati su percezione e CMYK offre un riferimento orientativo quando si ragiona su stampa o materiali esterni.

Quando usare Selettore Colori

Selettore Colori è adatto quando conosci già la direzione visiva e devi trasformarla in codici. Un designer può usarlo per rifinire un accento, un frontend developer può copiarne il valore CSS e chi prepara una guida stile può confrontare formati diversi senza cambiare schermata. La palette selezionata aiuta anche a conservare più prove durante la stessa sessione, così il confronto non dipende dalla memoria visiva.

È più diretto di una ruota cromatica quando l’obiettivo è scegliere un punto preciso e leggere il codice. È più completo di un semplice convertitore quando vuoi controllare varianti e contrasto dello stesso colore. Quando il colore parte da una foto, invece, Colore da Immagine è la scelta più adatta perché lavora sul campionamento visivo dell’immagine.

In un progetto web reale il colore raramente vive da solo. Un blu può essere un pulsante primario, una tinta chiara può diventare sfondo, una variante più scura può servire per hover o bordo. Usare Selettore Colori in questa fase permette di leggere il valore principale e valutare subito se il resto del sistema ha abbastanza differenza visiva.

Varianti, armonie e simulazioni

Il pannello Varianti cromatiche genera gruppi come Tailwind, Shades, Tints e Tones. Queste scale sono utili quando devi costruire stati UI, superfici, bordi o accenti partendo dallo stesso colore. Non tutti i valori devono essere usati: spesso bastano un tono base, uno più chiaro per sfondi e uno più scuro per interazioni o testo decorativo.

Il pannello Armonie cromatiche mostra combinazioni come Analogous, Complementary, Split Complementary, Triadic, Rectangle e Tetradic. Questi gruppi servono a capire se il colore scelto può dialogare con un accento o con una seconda famiglia cromatica. Un’armonia complementare crea più contrasto, mentre una analoga mantiene un passaggio più morbido e coerente.

Simula daltonismo permette di confrontare il colore originale con versioni per Protanopia, Deuteranopia, Tritanopia e Achromatopsia. La simulazione non sostituisce un audit completo, ma segnala se due campioni diventano troppo simili. Se una coppia perde distinzione, la correzione più efficace di solito non è cambiare solo tonalità: serve aumentare la differenza di luminosità o assegnare un ruolo visivo più chiaro.

Controllo del contrasto e lettura del risultato

Verifica contrasto mostra il rapporto del colore attivo su sfondo bianco e su sfondo nero. Il risultato include controlli per testo piccolo, testo grande ed elemento UI con stati AA e AAA. Questo aiuta a capire se il colore può essere usato come testo, icona, bordo o elemento interattivo senza affidarsi solo all’occhio.

Un colore può sembrare equilibrato nel campione e fallire su testo piccolo. Al contrario, una tinta intensa può funzionare bene su sfondo chiaro ma diventare insufficiente su sfondo scuro. Per questo il controllo del contrasto va letto insieme al ruolo previsto. Se il colore deve essere testo principale, richiede più prudenza; se diventa solo decorazione, il vincolo può essere meno severo ma resta utile per la coerenza visiva.

Quando la leggibilità è la priorità, confronta il risultato con Contrasto Colori, soprattutto se devi testare coppie colore specifiche. Selettore Colori è ideale per il controllo rapido durante la scelta; un controllo dedicato resta più indicato quando devi validare una combinazione finale.

Esportazione e copia dei codici

Esporta colori crea un elenco a partire dalla palette o dai gruppi derivati disponibili. Puoi scegliere il formato prima di copiare: Hex è compatto, RGB è leggibile nei sistemi numerici, HSL è comodo per varianti e OKLCH è utile nei contesti moderni che supportano questa notazione. Il vantaggio dell’esportazione è evitare trascrizioni manuali quando più campioni devono passare in un file, in una nota o in una specifica.

Prima di copiare l’elenco, controlla se i colori hanno un ruolo. Un’esportazione con molti valori ma senza gerarchia può creare confusione nel progetto. Assegna mentalmente ogni campione a un uso possibile: base, accento, sfondo, bordo, stato hover, errore o evidenziazione. Se un colore non ha una funzione, è meglio lasciarlo fuori dal set finale.

Errori comuni da evitare

• Copiare il formato sbagliato. Verifica il menu del formato prima di premere il pulsante di copia, soprattutto quando passi da HEX a RGB o HSL.
• Valutare solo il campione attivo. Controlla varianti, contrasto e simulazioni quando il colore avrà un ruolo importante nell’interfaccia.
• Usare CMYK come prova di stampa definitiva. Il valore è un riferimento tecnico, non una conversione professionale per profili colore di stampa.
• Creare una palette troppo ampia. Più campioni non significano più coerenza; scegli solo i valori con un uso chiaro.
• Confondere armonia e accessibilità. Colori armonici possono comunque avere contrasto insufficiente per testo o controlli UI.

Il controllo finale dovrebbe unire codice, ruolo e contesto. Se il colore verrà usato in CSS, copia il formato più adatto. Se verrà inserito in una guida stile, conserva anche una breve nota d’uso. Se diventerà parte di una palette più ampia, verifica che le varianti non si sovrappongano e che il contrasto resti leggibile nei punti critici.

Quando lavori su una UI già avviata, confronta sempre il colore copiato con gli stati esistenti. Un valore può sembrare corretto nel selettore ma diventare troppo vicino a un bordo, a un badge o a uno sfondo già presente. Prima dell’esportazione finale, controlla almeno un uso chiaro per il colore principale e uno per ciascuna variante che decidi di conservare.

Se il colore viene condiviso con altre persone, copia il formato richiesto e indica anche il ruolo previsto. Questo evita che lo stesso codice venga usato come testo, sfondo e accento senza controllo.