Convertitore di Codice Colore
Scegli qualsiasi colore o digita un valore in HEX, RGB, HSL o HSB — tutti i formati si aggiornano istantaneamente. Ottieni il colore complementare e uno snippet CSS pronto da incollare. Funziona interamente nel tuo browser, nulla viene inviato a un server.
Scegli un colore
o modifica qualsiasi campo qui sotto
Colore complementare
#F6AF3C
180° opposto sulla ruota dei colori
Frammento CSS
color: #3B82F6;
background-color: #3B82F6;Come usare il Convertitore di Codice Colore
Ci sono tre modi per impostare il colore attivo. Usa quello che si adatta meglio al tuo flusso di lavoro — il resto dello strumento si aggiorna automaticamente.
Tre modi per inserire un colore
Fai clic sul quadrato colorato per aprire il selettore di colori nativo del browser, digita un valore direttamente in uno dei quattro campi di formato (HEX, RGB, HSL o HSB), oppure incolla un colore copiato da Figma, Photoshop o dai DevTools del browser. Tutti i formati si sincronizzano istantaneamente ogni volta che un campo cambia.
Usare il colore complementare
Il colore complementare viene calcolato ruotando la tonalità di 180° sulla ruota dei colori HSL mantenendo la stessa saturazione e luminosità. Usalo per creare colori di pulsanti e link ad alto contrasto che risaltano rispetto al colore del tuo brand, costruire palette complementari divise o triadiche, o identificare quale colore di accento creerà la maggiore tensione visiva per le CTA.
Suggerimento sull'accessibilità: Contrasto dei colori
WCAG 2.1 AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande rispetto allo sfondo. Usando il valore di luminosità di HSL, scegli testo con L ≤ 40% su sfondi chiari e L ≥ 60% su sfondi scuri. Verifica sempre con un apposito verificatore di contrasto per la precisa conformità WCAG.
Domande frequenti
Qual è la differenza tra i formati di colore HEX, RGB, HSL e HSB?
HEX (#RRGGBB) è una rappresentazione esadecimale a sei cifre dei canali rosso, verde e blu di un colore, ampiamente usata nel CSS web. RGB (Rosso, Verde, Blu) esprime gli stessi tre canali come interi 0–255. HSL (Tonalità, Saturazione, Luminosità) descrive il colore tramite la sua posizione sulla ruota dei colori (tonalità, 0–360°), intensità (saturazione, 0–100%) e luminosità dal nero al bianco (luminosità, 0–100%). HSB/HSV (Tonalità, Saturazione, Luminosità/Valore) è simile ma usa Luminosità invece di Chiarezza — un colore HSB completamente saturo a B=100% è vivido, mentre in HSL l'equivalente è L=50%.
Quale formato colore dovrei usare in CSS?
Tutti e quattro i formati sono validi nel CSS moderno. HEX è il più comune per i valori statici perché è compatto. RGB e HSL sono preferiti quando è necessario manipolare i valori a livello di codice — ad esempio, usando le proprietà CSS personalizzate per derivare sfumature più chiare o più scure. HSL è particolarmente adatto ai designer perché regolare il valore L (luminosità) produce risultati intuitivi. HSB non è supportato nativamente in CSS ma è usato in strumenti di design come Figma e Adobe Photoshop.
Cos'è un colore complementare?
Un colore complementare è il colore direttamente opposto sulla ruota dei colori a 12 gradini o 360°, ovvero a 180° di tonalità. Le coppie complementari creano il massimo contrasto e vivacità visiva quando posizionate una accanto all'altra — ad esempio, blu e arancione, o rosso e verde. I designer usano i colori complementari per i pulsanti di chiamata all'azione, i punti salienti o ovunque sia necessario il contrasto.
Questo strumento invia i miei dati colore a un server?
No. Tutti i calcoli di conversione del colore avvengono completamente nel tuo browser in JavaScript. Nessun valore di colore, selezione del picker o altri dati vengono trasmessi a nessun server. Lo strumento funziona offline una volta caricata la pagina.
Come converto un colore che vedo su un sito web in HEX o RGB?
Apri i DevTools del tuo browser (F12 o clic destro → Ispeziona), seleziona l'elemento con il colore desiderato e guarda il suo CSS nel pannello Stili. Clicca sul campione colorato accanto a qualsiasi valore colore per aprire il picker integrato, che mostra i valori HEX e RGB. In alternativa, usa un'estensione del browser come ColorZilla per campionare qualsiasi pixel sullo schermo e ottenere istantaneamente il suo codice HEX/RGB.
Strumenti correlati
Hai bisogno di un audit SEO tecnico completo?
I nostri esperti SEO possono verificare la salute tecnica del tuo sito — crawlabilità, Core Web Vitals, dati strutturati e altro — e fornire un piano d'azione personalizzato per una crescita organica sostenibile.
Get a Free SEO Audit