Selettore di Colore
Selettore di colore gratuito — scegli qualsiasi colore visivamente e ottieni istantaneamente i codici HEX, RGB, HSL, HSV e CMYK. Sfumature, tinte, armonie e...
Aggiornato maggio 2026
Revisionato da Rafael Duarte
Questo colore soddisfa il livello AA delle WCAG 2.1 per il testo normale (4,5:1) su almeno uno sfondo.
Ombre e tinte
Armonie di colore
Come usare il selettore di colori online
Scegli un colore e leggi subito il codice HEX, RGB e HSL
1. Clicca o trascina nel riquadro
In orizzontale cambia la saturazione, in verticale la luminosità; la barra arcobaleno sotto regola la tinta.
2. Oppure digita un codice hex
Inserisci un codice a 6 cifre come 1A73E8 (il # si aggiunge da solo) oppure usa il contagocce per prendere un colore dallo schermo.
3. Copia il formato che ti serve
Copia HEX, RGB o HSL con un clic, poi esplora sfumature, tinte e armonie nei pannelli sotto il selettore.
Cosa fa questo color picker
Conversioni, sfumature, armonie e contrasto WCAG nella stessa pagina
Otto formati insieme
HEX, RGB, HSL, HSV, CMYK, LAB, valore decimale e colore web-safe si aggiornano in tempo reale mentre muovi il cursore.
Sfumature e tinte
Dieci varianti più scure e dieci più chiare calcolate sulla luminosità HSL del colore scelto: clicca una variante per selezionarla.
Cinque armonie cromatiche
Complementare, analoga, triadica, complementare divisa e tetradica, ruotando la tinta sulla ruota dei colori.
Controllo del contrasto WCAG
Calcola il rapporto di contrasto del colore su bianco e su nero e indica se raggiunge AA (4,5:1) o AAA (7:1).
Nome CSS più vicino
Trova la parola chiave CSS più simile al colore scelto, misurando la distanza euclidea tra i valori RGB.
Contagocce, palette e cronologia
Preleva un colore da qualsiasi punto dello schermo, salva fino a 20 colori in una palette e ritrova gli ultimi 12 nella cronologia.
Esempi di codici colore
Valori calcolati dal selettore
Quando ti serve un selettore di colori HEX
Dal CSS alla stampa
Sviluppo web e interfacce
Copia il codice HEX o i valori RGB direttamente nel CSS, nella configurazione di Tailwind o nei design token.
Verifica dell'accessibilità
Controlla se un colore di testo o di pulsante regge il contrasto su sfondo bianco o nero prima di andare in produzione.
Scale di colore per un design system
Le dieci sfumature e le dieci tinte sono una base rapida per costruire la scala 50–900 di un colore di marca.
Preparare file per la stampa
I valori CMYK danno un primo riferimento per passare un colore dallo schermo alla tipografia, da confermare poi con il profilo colore dello stampatore.
Prendere un colore da un sito o da un'immagine
Con il contagocce clicchi un pixel qualsiasi dello schermo, anche fuori dalla scheda, e ottieni subito il codice hex.
Errori comuni con i codici colore
Scambiare il nome CSS più vicino per il colore esatto
È la parola chiave con la distanza RGB minore, non per forza identica: #1A73E8 diventa dodgerblue, che in realtà è #1E90FF.
Usare il contagocce su Firefox o Safari
Il pulsante si basa sulla EyeDropper API, disponibile nei browser basati su Chromium come Chrome ed Edge. Negli altri browser compare un messaggio di errore.
Aspettarsi che palette e cronologia restino salvate
I colori salvati e la cronologia vivono solo nella scheda aperta: se ricarichi o chiudi la pagina si perdono. Copia prima i codici che ti servono.
Confondere HSL e HSV
Condividono tinta e saturazione, ma il terzo valore è diverso: al 100% HSL dà sempre bianco, HSV dà il colore puro. Il CSS usa HSL.
Pretendere che il CMYK riproduca lo schermo
Alcuni blu e verdi molto saturi sono fuori dalla gamma stampabile: la conversione è matematica e non tiene conto di carta e inchiostri.
Perché usare questo selettore di colori
Conversione, sfumature, armonie e contrasto WCAG sono nella stessa pagina, quindi non devi passare da uno strumento all'altro mentre scegli una palette. HSL e HSV sono mostrati affiancati, così sai subito quale valore va nel CSS e quale nei programmi di grafica.
Il contagocce, la palette da 20 colori e la cronologia ti fanno confrontare più alternative senza annotare i codici a parte. Tutto funziona nel browser, senza registrazione e senza installare estensioni.
HSL o HSV?
Stessi primi due valori, terzo asse diverso
Domande frequenti
È un colore RGB scritto in base 16 nella forma #RRGGBB. Ogni coppia di cifre indica un canale (rosso, verde, blu) da 00 a FF, cioè da 0 a 255: in #1A73E8 il rosso vale 26, il verde 115 e il blu 232.
Riferimenti
Il riferimento (in inglese) di tutti i formati di colore accettati dal CSS: esadecimale, rgb(), hsl() e parole chiave.
La traduzione autorizzata delle linee guida, con i rapporti 4,5:1 e 3:1 usati nel controllo di contrasto.
Spiega in italiano il modello CIELAB mostrato tra i valori tecnici e perché è più vicino alla percezione umana dell'RGB.
Strumenti correlati
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Verificatore Contrasto Colori Design Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
