Convertitore di colori
Converti colori tra HEX, RGB e HSL con anteprima, selettore e copia con un clic
Cursori HSL
Armonie di colore
Complementare
Analoghi
I tre formati colore
HEX (esadecimale)
Un colore HEX inizia con # seguito da sei cifre esadecimali (es. #3b82f6); ogni coppia codifica il canale rosso, verde e blu (da 00 a ff). È supportata anche la forma abbreviata a tre cifre (es. #f00 equivale a #ff0000). HEX è la notazione più diffusa in CSS e negli strumenti di design, comoda da incollare direttamente nei fogli di stile.
RGB (rosso, verde, blu)
RGB descrive un colore con tre interi da 0 a 255 per i canali rosso, verde e blu, scritto in CSS come rgb(59, 130, 246). Corrisponde direttamente al modo in cui gli schermi emettono luce, quindi è adatto al lavoro programmatico come il disegno su Canvas e l'elaborazione delle immagini.
HSL (tonalità, saturazione, luminosità)
HSL descrive un colore tramite tonalità H (angolo 0-360° sulla ruota dei colori), saturazione S (0-100%) e luminosità L (0-100%), scritto in CSS come hsl(217, 91%, 60%). Rispecchia l'intuizione umana del colore, quindi è il modello più comodo per costruire palette: schiarire una tonalità o ricavare il complementare è una semplice modifica numerica.
Tabella dei colori comuni
| Colore | HEX | RGB | HSL |
|---|---|---|---|
| Nero | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Bianco | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Rosso | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Verde | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blu | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Giallo | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Ciano | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Arancione | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Grigio | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
Come si usa
Digita un colore in un campo qualsiasi — HEX accetta la forma abbreviata #rgb e l'omissione del #; RGB accetta sia la funzione rgb() sia i valori separati da virgola; in HSL i segni % sono facoltativi — oppure usa il selettore colore e i cursori HSL: tutti gli altri formati si aggiornano in tempo reale. Il pulsante «Copia» accanto a ciascun formato copia il valore negli appunti. La sezione delle armonie propone un colore complementare e due analoghi: fai clic su un campione per applicarlo. Tutti i calcoli avvengono localmente nel browser.