Strumenti per i colori gratuiti
Converti colori, genera palette, controlla il contrasto per l'accessibilità, simula il daltonismo e altro ancora.
Tutti gli strumenti per i colori
Convertitore di colori
Converti tra i formati di colore HEX, RGB e HSL istantaneamente. Anteprima dal vivo con selettore colore, copia i valori CSS.
Generatore di palette di colori gratuito online
Fai clic su "Copia CSS" per ottenere proprietà personalizzate CSS pronte da incollare.
Verificatore contrasto colori
Testa i rapporti di contrasto WCAG 2.1 per l'accessibilità.
Generatore di sfumature di colore
Scegli un colore e genera un'intera gamma di tinte più chiare e sfumature più scure. Fai clic su qualsiasi campione per copiarne il valore.
Miscelatore di colori
Mescola due o più colori insieme con pesi regolabili. Visualizza il colore risultante in HEX, RGB e HSL.
Simulatore di daltonismo
Vedi come immagini e colori appaiono alle persone con deficit visivi dei colori.
Selettore colore immagine
Carica un'immagine e fai clic in qualsiasi punto per estrarre i colori.
Convertitore HEX in RGB
Converti i codici di colore HEX in valori RGB e viceversa.
Trova il nome del colore CSS
Inserisci un codice hex o scegli un colore per trovare il nome di colore CSS più vicino. Confronta affiancato.
Ruota dei colori gratuita
Esplora le armonie cromatiche con una ruota dei colori interattiva. Trova colori complementari, analoghi.
Generatore di sfondi sfumati gratuito
Crea e scarica sfondi sfumati personalizzati per desktop o dispositivi mobili. Scegli colori, angolazione e risoluzione, scarica come PNG.
Estrattore di palette di colori gratuito
Estrai i colori dominanti da qualsiasi immagine per creare una palette di colori. Carica una foto e ottieni i colori principali in valori HEX, RGB e HSL.
Generatore di tavolozze di colori accessibili
Costruisci una tavolozza di colori e visualizza istantaneamente quali combinazioni superano i rapporti di contrasto WCAG 2.2 AA (4.5:1) e AAA (7:1).
Informazioni sui nostri strumenti per i colori
Absolutool include 7 strumenti specializzati per i colori per designer, sviluppatori e professionisti dell'accessibilità. Converti tra i formati HEX, RGB, HSL e HSB. Genera palette armoniose grazie alla teoria dei colori. Verifica i rapporti di contrasto WCAG per assicurarti che i tuoi design siano accessibili a tutti.
Il simulatore di daltonismo usa le matrici di ricerca Brettel/Viénot per modellare con precisione 8 tipi di deficit visivo · carica un'immagine o testa colori singoli. Usa il generatore di tonalità per i token di un design system, il mixer di colori per miscele precise e il selettore di colore da immagine per estrarre colori da qualsiasi foto. Tutti gli strumenti girano interamente nel tuo browser.
I modelli di colore sul web
Ogni pixel di una pagina web moderna è descritto da un valore di colore che il browser interpreta e chiede alla GPU di rappresentare. I due formati che vedrai più spesso sono l'HEX (una terna esadecimale a sei cifre come #3b82f6) e l'RGB (valori decimali come rgb(59 130 246)). Entrambi descrivono la stessa cosa: quanta luce rossa, verde e blu mescolare su uno schermo che usa il colore additivo. Uno schermo standard a 24 bit offre 256 livelli per canale, il che significa che sono indirizzabili 16,78 milioni di colori unici. L'HEX è più corto, l'RGB è più facile da calcolare, e i due sono intercambiabili.
L'HSL (tonalità, saturazione, luminosità) e l'HSB (tonalità, saturazione, brillantezza) descrivono lo stesso colore dello schermo, ma in coordinate più vicine a come lo percepiamo noi umani. La tonalità è la posizione del colore sulla ruota dei colori da 0° (rosso) a 360°. La saturazione indica quanto è vivace il colore, dal grigio al puro. La luminosità controlla quanto bianco o nero viene mescolato. L'HSL è il formato che i designer scelgono di solito quando costruiscono sistemi di design, perché regolare un singolo canale produce uno spostamento prevedibile, come scurire un pulsante del 10% per lo stato al passaggio del mouse. Il CSS supporta nativamente HEX, RGB, HSL e i più recenti LCH e OKLCH.
Dietro tutti questi formati c'è uno spazio colore, che definisce esattamente cosa significa «rosso 255» in termini fisici. Il valore predefinito del web è l'sRGB, normalizzato dall'IEC nel 1996 e la gamma che copre quasi tutti i display di computer e telefono. I dispositivi Apple recenti, OLED e di fascia alta supportano il Display P3, una gamma più ampia che aggiunge circa il 25% in più di rossi e verdi saturi. Il CSS ora ti permette di scrivere color(display-p3 1 0 0) per sfruttarla. La maggior parte degli strumenti di colore di questo sito lavora in sRGB e raggiunge ogni browser; il P3 amplia ciò che è disponibile senza cambiare il flusso di lavoro.
Capire il contrasto di colore WCAG
Le Linee guida per l'accessibilità dei contenuti web (WCAG 2.1) fissano soglie numeriche per il contrasto tra il testo e il suo sfondo. Il livello AA, quello a cui mira la maggior parte degli audit di accessibilità, richiede un rapporto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande (18 pt normale o 14 pt grassetto e oltre). Il livello AAA li inasprisce a 7:1 e 4,5:1. Il rapporto si calcola dalla luminanza relativa di ciascun colore, un valore di luminosità percettiva derivato dalle primarie sRGB tramite la formula IEC 61966-2-1. Due colori che sembrano «quasi uguali» possono comunque superare la prova, e due colori del tutto diversi possono fallire se uno è grigio su grigio.
Questi numeri contano perché circa il 5% della popolazione adulta mondiale ha una sensibilità al contrasto ridotta in modo misurabile per cataratta, glaucoma, retinopatia diabetica o alterazioni maculari legate all'età. La luce intensa del sole all'aperto riduce il contrasto effettivo per tutti. Gli schermi mobili visti di sbieco lo riducono ulteriormente. Le soglie delle WCAG sono progettate per mantenere il testo leggibile in queste condizioni reali, non su un monitor calibrato in un ufficio in penombra. Un algoritmo più recente chiamato APCA (il candidato alla sostituzione in arrivo nelle WCAG 3.0) tiene conto di cose che le WCAG 2.x ignorano, come il peso e la polarità del testo. Per ora, il 4,5:1 AA resta lo standard a cui si riferisce la maggior parte dei regolatori.
Il daltonismo e il design inclusivo
Circa l'8% degli uomini e lo 0,5% delle donne di origine nordeuropea ha una qualche forma di deficit della visione dei colori rosso-verde, e i numeri mondiali sono di portata simile. I tre tipi più comuni influiscono su come i coni della retina rispondono a lunghezze d'onda specifiche. La deuteranomalia (la più comune, circa il 5% degli uomini) riduce la sensibilità alla luce verde di lunghezza d'onda media. La protanomalia riduce la sensibilità alla luce rossa di lunghezza d'onda lunga. La tritanomalia riguarda la percezione blu-giallo ed è molto più rara. I simulatori di questo sito usano la derivazione per matrice di colore di Brettel, Viénot e Mollon (1997), il riferimento standard per queste trasformazioni nella scienza dei colori.
La regola pratica di design è «non affidarti solo al colore». Un'icona di errore rossa e un'icona di successo verde appaiono identiche a molti utenti con deuteranomalia. Aggiungere una forma diversa (una croce invece di un segno di spunta), un'etichetta («Errore» o «Successo») o un motivo risolve la cosa senza alcun costo per gli altri utenti. I design di grafici e dashboard sono i trasgressori più frequenti, perché le legende di solito si affidano a un campione di colore. Il simulatore di daltonismo di questo sito ti permette di vedere in anteprima uno screenshot reale attraverso ciascun deficit comune prima di pubblicare, così individui gli elementi che sarebbero falliti in produzione.
Teoria dei colori per le palette
La ruota dei colori dispone le tonalità in base al loro angolo intorno al cerchio: rosso a 0°, giallo a 60°, verde a 120°, ciano a 180°, blu a 240°, magenta a 300°. I colori complementari stanno direttamente opposti l'uno all'altro (rosso e ciano, blu e arancione) e producono il contrasto più forte. Le palette analoghe usano da due a quattro tonalità adiacenti sulla ruota e risultano calme e unitarie, ben adatte a sfondi e gradienti. Le palette triadiche usano tre tonalità equidistanti a 120°, offrendo equilibrio con varietà. Le palette tetradiche usano quattro tonalità che formano un rettangolo. Queste regole sono nate dai manuali d'artista dell'Ottocento ma coincidono con ciò che la ricerca percettiva ha confermato da allora.
Un sistema di marca tipico ha bisogno di circa cinque colori: un colore di marca principale, un colore d'accento (spesso complementare), un grigio neutro, più un verde di successo e un rosso di errore. Il generatore di palette di questo sito sceglie prima l'armonia e poi offre scale di tinte e ombre a 10 passi per ciascun colore scelto, la stessa struttura che usano sistemi di design come Tailwind, Material e Carbon. Lo strumento di palette accessibile limita la generazione alle combinazioni che soddisfano il contrasto WCAG AA su uno sfondo bianco o scuro. Entrambi gli strumenti funzionano interamente nel tuo browser, quindi i colori che scegli per una marca non ancora lanciata non vengono mai inviati da nessuna parte.
Domande frequenti
Perché lo stesso colore appare diverso su schermi diversi?
La maggior parte dei monitor mira alla gamma sRGB, ma ogni pannello ha una calibrazione del punto di bianco, una luminosità e una gamma leggermente diverse. Due schermi appena usciti dalla scatola possono mostrare #3b82f6 con una differenza misurabile di tonalità e luminosità. Il design professionale si affida a monitor calibrati (sonde hardware X-Rite o Calibrite) per tenere la cosa entro la tolleranza. Per il lavoro quotidiano, scegliere un valore in HSL ti dà le migliori probabilità che le relazioni di colore che intendevi (un passaggio del mouse più scuro del 10%, per esempio) sopravvivano da uno schermo all'altro.
Un contrasto di 4,5:1 è sempre sufficiente per l'accessibilità?
È l'asticella AA, il minimo legale a cui si riferisce la maggior parte dei regolatori (la Section 508 negli USA, l'EAA in Europa, l'AODA in Ontario). Per il testo in cui la leggibilità è critica, gli utenti ipovedenti, le interfacce leggibili alla luce del sole o i contenuti per un pubblico più anziano, mira al rapporto più rigoroso AAA 7:1. Per gli elementi di interfaccia che non sono testo (icone, bordi dei pulsanti), si applica la regola di contrasto degli elementi non testuali di 3:1 delle WCAG 2.1.
Qual è la differenza tra HSL e HSV/HSB?
Entrambi condividono i canali di tonalità e saturazione ma differiscono nel loro terzo asse. La luminosità dell'HSL è simmetrica intorno al 50%: 0% è nero, 50% è la tonalità pura e 100% è bianco. La brillantezza dell'HSV/HSB è asimmetrica: 0% è nero e 100% è la tonalità pura senza bianco. L'HSL è più comodo per i sistemi di design in cui mescoli verso entrambe le estremità. L'HSV è più comune nell'editing di immagini perché corrisponde all'intuizione dell'artista.
I codici esadecimali sono la stessa cosa dei colori Pantone o RAL?
No. I codici esadecimali descrivono un colore dello schermo mescolato da luce rossa, verde e blu (additivo, proiettato). I sistemi Pantone, RAL e simili descrivono pigmenti fisici stampati su carta (sottrattivo, riflesso). L'equivalente esadecimale di «Pantone 286» è un'approssimazione a schermo, non una corrispondenza perfetta, perché le gamme non si sovrappongono del tutto. Per il lavoro di marca che attraversa schermo e stampa, i designer di solito specificano entrambi: il Pantone per la stampa e un esadecimale per il digitale.
Perché simulare il daltonismo su un design?
Circa 1 uomo su 12 nel mondo ha una qualche forma di deficit della visione dei colori, quindi qualsiasi design usato da un pubblico generale raggiunge utenti che non riescono a distinguere certe tonalità. Un indicatore di stato rosso contro verde può apparire loro identico. Passare uno screenshot in un simulatore prima di pubblicare rivela quali parti del design si affidano solo al colore, così puoi aggiungere un'etichetta, un'icona o un motivo perché il significato passi senza il colore.
Questi strumenti di colore caricano le mie immagini o palette da qualche parte?
No. Ogni strumento di questa categoria funziona interamente nel tuo browser. Le immagini caricate vengono elaborate da JavaScript su un elemento canvas locale, i dati della palette risiedono nel localStorage, e nulla viene inviato a un server. Puoi verificarlo aprendo gli strumenti per sviluppatori del browser e osservando la scheda Rete mentre usi uno qualsiasi degli strumenti. Le uniche richieste che vedrai riguardano risorse statiche e Google Analytics, mai i byte delle tue immagini né i tuoi valori di colore.