Color picker HEX, RGB e HSL
Come funziona
Clicca sul riquadro colorato per aprire il selettore di colori del tuo browser e scegli la tinta che ti serve. In alternativa scrivi un codice HEX di sei cifre nel campo Inserisci il codice HEX: il cancelletto iniziale puoi anche ometterlo, e il campo accetta solo cifre esadecimali. Accanto al selettore c'è un'anteprima grande del colore.
Per ogni colore lo strumento mostra tre formati, ciascuno con il suo pulsante Copia: • HEX, per esempio #1A73E8: il formato da incollare nei CSS, negli strumenti di grafica e nei manuali di brand. • RGB, per esempio rgb(26, 115, 232): i tre canali rosso, verde e blu da 0 a 255, utile quando devi calcolare o combinare colori nel codice. • HSL, per esempio hsl(214, 82%, 51%): tonalità, saturazione e luminosità, il formato più comodo per costruire varianti di un colore.
Colori recenti. Ogni colore completo che scegli o scrivi finisce nella cronologia, fino agli ultimi 20, salvata nel localStorage del browser: resta anche se ricarichi la pagina. Un clic su un campione lo ricarica, e il pulsante Cancella svuota la lista. Diventa una piccola tavolozza personale: inserisci una volta i colori del tuo brand e li ritrovi la volta dopo.
Come leggere l'HSL senza essere un designer. • La tonalità (hue) è il colore vero e proprio, un angolo da 0 a 360 gradi: 0 è rosso, 120 verde, 240 blu. • La saturazione dice quanto è vivo: 0% è grigio, 100% è il colore pieno. • La luminosità dice quanto è chiaro: 50% è il colore puro, verso 100% ottieni le tinte chiare, verso 0% quelle scure.
Per un colore complementare o una palette armonica a partire da un colore di base usa il Color Palette Generator di questo sito, che calcola gli schemi complementare, analogo e triadico e controlla il contrasto WCAG.
Tutto succede nel tuo browser: nessun colore viene inviato a un server.
Domande frequenti
Come trovo il codice HEX di un colore?
- Scegli il colore nel selettore e leggi la riga HEX, poi premi Copia. Il codice ha sei cifre esadecimali precedute da #, due per ogni canale: in #1A73E8 il rosso è 1A (26), il verde 73 (115) e il blu E8 (232).
Come converto un colore da HEX a RGB?
- Scrivi il codice HEX nel campo Inserisci il codice HEX e leggi la riga RGB: #1A73E8 diventa rgb(26, 115, 232). A mano si fa convertendo ogni coppia di cifre da esadecimale a decimale: 1A è 1 × 16 + 10 = 26. La riga HSL si aggiorna insieme, quindi con lo stesso gesto hai anche la conversione da HEX a HSL.
Come converto un colore da RGB a HEX?
- Converti ogni canale da decimale a esadecimale su due cifre e mettile in fila dopo il #: rgb(255, 159, 67) diventa #FF9F43, perché 255 è FF, 159 è 9F e 67 è 43. Il campo dello strumento accetta solo il codice HEX: una volta inserito, le righe RGB e HSL ti confermano che la conversione è giusta.
Che differenza c'è tra HEX, RGB e HSL?
- Nessuna nel colore, cambia solo la scrittura. HEX e RGB descrivono gli stessi tre canali rosso, verde e blu, il primo in esadecimale e il secondo in decimale. HSL descrive lo stesso colore come tonalità, saturazione e luminosità, ed è il più comodo quando vuoi una versione più chiara o più scura dello stesso colore.
Posso inserire un codice HEX a tre cifre come #FFF?
- No, il campo lavora con il codice completo a sei cifre: scrivi #FFFFFF invece di #FFF. La forma breve si espande raddoppiando ogni cifra, quindi #1AF diventa #11AAFF.
La cronologia dei colori viene salvata?
- Sì, nel localStorage del tuo browser: gli ultimi 20 colori restano anche dopo aver chiuso la pagina. La cronologia non lascia il tuo dispositivo e non viene sincronizzata da nessuna parte. Per svuotarla usa il pulsante Cancella.
I colori che scelgo vengono inviati a un server?
- No. La pagina non ha un backend: le conversioni sono fatte da JavaScript nella scheda del browser. Puoi verificarlo nella scheda Rete degli strumenti per sviluppatori, dove usando lo strumento non parte nessuna richiesta.