Che cos’è un selettore di colori?

Un selettore di colori ti permette di scegliere un colore a occhio invece di digitare dei numeri. La maggior parte delle app di design lo organizza allo stesso modo: un cursore della tonalità seleziona il colore di base dall’arcobaleno, mentre un quadrato accanto permette di impostare quanta tonalità applicare (saturazione, da sinistra a destra) e quanto renderla luminosa (dall’alto verso il basso). Questa disposizione corrisponde al modello di colore HSV, in cui trova posto ogni colore che uno schermo può visualizzare.

Descrizione dello strumento

Trascina sul quadrato e sul cursore della tonalità per trovare un colore, oppure digita o incolla un colore che hai già in HEX, RGB, HSL o un altro formato. In Chrome ed Edge, il pulsante del contagocce seleziona un colore da qualsiasi punto dello schermo, anche al di fuori del browser. Imposta l’opacità per i colori trasparenti e copia il risultato nel formato che ti serve: HEX per CSS e per la maggior parte degli strumenti di design, RGB e HSL per CSS, HSV per le app di design, OKLCH per i CSS moderni e CMYK come punto di partenza per la stampa.

Funzionalità

  • Quadrato di saturazione e luminosità con cursore della tonalità, utilizzabile con mouse, tocco o tastiera
  • Contagocce per selezionare i colori dallo schermo in Chrome ed Edge
  • Digita o incolla un colore in HEX, RGB, HSL, HWB, CMYK e altri formati
  • Opacità, visualizzata su una griglia di trasparenza
  • Valori HEX, RGB, HSL, HSV, OKLCH e CMYK, tutti pronti da copiare
  • Altri formati, come HWB, LAB, LCH e XYZ, disponibili nell’elenco dei formati del colore selezionato
  • Funziona nel browser

Come funziona

Lo strumento mantiene il colore in termini di tonalità, saturazione e valore, così la tonalità rimane invariata quando trascini verso il bianco, il nero o il grigio. Gli altri formati vengono calcolati a partire da questi valori: HEX e RGB vengono arrotondati a numeri interi da 0 a 255, HSL e HSV a gradi e percentuali interi, mentre OKLCH viene convertito attraverso lo spazio colore sRGB. Quando l’opacità è inferiore al 100%, HEX include una quarta coppia di cifre e i formati CSS includono un valore alfa. CMYK non prevede il canale alfa e viene calcolato con una conversione semplice, senza un profilo di stampa.

Suggerimenti

  • L’opacità del colore incollato, ad esempio in rgba(), non viene mantenuta: impostala nel campo Opacità.
  • Fai clic sul quadrato o sul cursore e usa i tasti freccia per spostarti dell’1%, oppure del 10% con Maiusc.
  • Per i colori in una foto o in un file di screenshot, usa il selettore di colori da immagine, che legge direttamente l’immagine.
  • Chiedi alla tipografia quali valori CMYK usare, perché lo stesso colore può essere stampato in modo diverso su macchine da stampa e tipi di carta differenti.