Generatore e Convertitore di Codice Colore

Scegli un colore o inserisci un codice HEX — ottieni subito HEX, RGB, HSL, nome CSS e colore complementare.

Risultato istantaneo Funziona nel browser
Codice HEX
#3D7EF7
Valore RGB
rgb(61, 126, 247)
Valore HSL
hsl(218, 91%, 60%)
Nome CSS
—
Colore complementare
#F7823D

Modelli di colore

HEX  → #RRGGBB
RGB  → 0–255 per ch.
HSL  → 0–360° / 0–100%
WCAG → min 4.5:1

HEX: standard web. RGB: basato sullo schermo. HSL: tonalità-saturazione-luminosità, intuitivo per i designer.

Come si usa?

  1. 1
    Scegli il coloreClicca sul selettore colori o inserisci direttamente un codice HEX (es. #FF5733).
  2. 2
    Leggi i valoriHEX, RGB e HSL vengono calcolati istantaneamente; nome CSS e colore complementare sono mostrati automaticamente.
  3. 3
    CopiaCopia il codice colore desiderato negli appunti con un clic.

Domande frequenti

Cos'è un codice colore HEX?
Un valore esadecimale a 6 cifre nel formato #RRGGBB. Ogni coppia rappresenta l'intensità di un canale (Rosso, Verde, Blu) da 00 a FF (0–255), permettendo 16.777.216 colori.
RGB o HSL — quale usare?
RGB corrisponde all'hardware dello schermo ed è molto usato in CSS. HSL è più intuitivo per i designer: modificare la luminosità senza perdere la tonalità. Entrambi sono completamente supportati nel CSS moderno.
A cosa serve il colore complementare?
Il colore complementare si trova a 180° sulla ruota dei colori e crea il massimo contrasto — ideale per pulsanti CTA e visualizzazioni di dati.

Codici colore nel web: HEX, RGB e HSL

Nello sviluppo web, i colori sono definiti principalmente attraverso tre formati: HEX, RGB e HSL. Questo strumento converte istantaneamente qualsiasi colore nei tre formati e mostra anche il nome CSS e il colore complementare.

Codici colore HEX

HEX è il formato colore più comune sul web. Si scrive come #RRGGBB, con ogni coppia che indica l'intensità di un canale (Rosso, Verde, Blu) da 00 a FF (0–255). Con 256 valori per canale, HEX supporta 16.777.216 colori. La notazione abbreviata #RGB è anch'essa valida: #F06 → #FF0066.

Modello di colore RGB

RGB riflette la struttura fisica degli schermi. Ogni canale assume valori da 0 a 255. In CSS: rgb(255, 87, 51) o con trasparenza rgba(255, 87, 51, 0.8).

Modello di colore HSL

HSL (Tonalità-Saturazione-Luminosità) è più intuitivo per i designer. Tonalità: 0–360° sulla ruota cromatica. Saturazione: 0%=grigio, 100%=colore vivace. Luminosità: 0%=nero, 50%=normale, 100%=bianco. Creare tonalità chiare o scure è semplice: mantenere tonalità e saturazione, regolare la luminosità.

Colori complementari

I colori complementari si trovano a 180° l'uno dall'altro sulla ruota dei colori: Rosso ↔ Ciano, Verde ↔ Magenta, Blu ↔ Giallo. Creano il massimo contrasto e sono usati nei pulsanti CTA e nelle visualizzazioni dati.

Accessibilità web (WCAG)

Circa l'8% degli uomini ha un deficit di visione dei colori. WCAG 2.1 AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale. Non trasmettere mai informazioni solo tramite il colore.

Colori CSS con nome

CSS definisce 148 colori con nome (red, navy, coral, teal, ecc.). Questo strumento li riconosce automaticamente e mostra il nome.

Privacy

Tutti i calcoli vengono eseguiti localmente nel browser. Nessun dato viene inviato a server.

Commenti