Selettore e convertitore di colore
Scegli un colore e convertilo tra HEX, RGB, HSL e OKLCH.
⚠ This OKLCH value falls outside the sRGB gamut and was clamped.
Pick a color from an image
WCAG contrast
Color schemes & harmonies
Tints & shades
Color blindness simulation
Runs entirely in your browser. Nothing is uploaded.
Un convertitore e selettore di colori gratuito che funziona interamente nel browser
Questo convertitore di colori gratuito trasforma qualsiasi colore in tutti i formati necessari, istantaneamente. Incolla un codice hex, digita un valore RGB, trascina la ruota dei colori o campiona un pixel con il contagocce — e vedi il risultato in HEX, RGB, HSL, HSV, CMYK e OKLCH contemporaneamente. Ogni campo è modificabile e bidirezionale: cambia un formato e tutti gli altri si aggiornano in tempo reale senza ricaricare la pagina, senza richieste al server e senza ritardi.
Siti come ColorHexa.com, RapidTables, convertingcolors.com e cssgradient.io coprono ciascuno parti di questa funzionalità: ColorHexa mostra analisi dettagliate per URL, RapidTables fornisce convertitori a formato singolo su pagine separate, convertingcolors supporta spazi colore di nicchia come CIELab e XYZ, e cssgradient è progettato specificamente per la generazione di gradienti CSS. Questo strumento combina i casi d'uso quotidiani — conversione di formati, selezione visiva, verifica dell'accessibilità e generazione di palette — in un'unica interfaccia in tempo reale dove inserisci un colore una volta e vedi tutto contemporaneamente. Nulla viene caricato; tutta l'elaborazione è locale.
Converti HEX, RGB, HSL, HSV, CMYK e OKLCH — in modo bidirezionale e istantaneo
Ogni campo è modificabile e rimane sincronizzato. Incolla un codice hex e i valori RGB, HSL, HSV, CMYK e OKLCH si aggiornano sul posto. Modifica uno e gli altri seguono immediatamente. Questo lo rende contemporaneamente un rapido convertitore da hex a RGB, uno strumento da RGB a hex, un convertitore da RGB a CMYK e un convertitore HSL/HSV/OKLCH in un'unica vista — ideale quando un file di design fornisce un formato ma il foglio di stile, il lavoro di stampa o il sistema di design ne richiedono un altro.
Tutti gli output sono valori HTML e CSS validi — #hex, rgb(…), hsl(…), hsv(…), cmyk(…) e oklch(…) — ognuno con un pulsante di copia con un clic. Lo strumento identifica anche il colore CSS con nome più vicino, così puoi descrivere una tonalità istantaneamente o confermare se un hex personalizzato corrisponde a una parola chiave standard. A differenza delle pagine di conversione singola di RapidTables, non devi mai navigare tra strumenti separati per coppie di formati diversi.
Seleziona un colore da un'immagine — o direttamente dallo schermo
Hai bisogno del colore esatto da una foto, un logo, uno screenshot o un mockup? Usa il selettore di colore da immagine: carica un file, trascinalo, o incollalo dagli appunti (Ctrl+V / Cmd+V), poi spostati sull'immagine e clicca per catturare qualsiasi pixel. Una lente di ingrandimento integrata ingrandisce per una selezione al pixel, e ogni colore su cui clicchi viene salvato in una striscia 'selezionati dall'immagine' così puoi costruire una palette da una singola immagine senza perdere selezioni precedenti. L'immagine viene elaborata localmente usando un canvas HTML e non lascia mai il tuo dispositivo — funziona in tutti i browser inclusi Firefox e Safari.
Preferisci catturare un colore da altrove sullo schermo? Il contagocce campiona qualsiasi pixel del display in Chrome 95+ e Edge 95+ tramite l'API EyeDropper nativa — clicca su di esso, punta su qualsiasi pixel sullo schermo e quel colore si carica in tutti i campi istantaneamente. Una striscia di colori recenti e la ruota dei colori interattiva completano le opzioni di selezione, tutto senza installare nulla.
Schemi di colore, armonie, tinte e ombre
Trasforma un colore in un'intera palette. Lo strumento genera sei schemi di colore corrispondenti basati sulle armonie della ruota dei colori: complementare, analogo, triadico, tetradico, split-complementare e monocromatico. Clicca su qualsiasi campione per renderlo il nuovo colore base e continua ad esplorare, così lo strumento funziona come un rapido generatore di palette di colori per costruire combinazioni coese e in linea con il brand.
La scala di tinte e ombre produce una serie di passi più chiari e più scuri dal tuo colore base — utile per stati hover, stati attivi, stati disabilitati, bordi e sfondi. Fare clic su qualsiasi passo lo rende il colore attivo e mostra il suo completo dettaglio dei formati. Sia la generazione di palette che la scala di tinte/ombre si aggiornano istantaneamente ad ogni cambio di colore senza richieste al server.
Verifica del contrasto WCAG e simulazione del daltonismo
L'accessibilità è integrata in ogni scelta di colore. Il verificatore di contrasto WCAG calcola il rapporto di contrasto basato sulla luminanza del tuo colore rispetto al bianco e al nero, poi mostra i badge passato/fallito AA e AAA per testo normale, testo grande e componenti UI — i tre livelli WCAG 2.1 che determinano se una coppia colore in primo piano/sfondo soddisfa gli standard di accessibilità. Si aggiorna in tempo reale mentre regoli il colore, così puoi iterare verso la conformità senza passare a uno strumento separato.
Il simulatore di daltonismo mostra un'anteprima del tuo colore come lo vedono le persone con protanopia, deuteranopia, tritanopia e acromatopsia — calcolato usando il standard algoritmo di simulazione Brettel/Viénot e aggiornato in tempo reale. Insieme, la verifica del contrasto e la simulazione del daltonismo aiutano a garantire che le tue scelte di design rimangano significative e distinguibili per ogni spettatore.
Comprendere OKLCH — il futuro dei colori CSS
OKLCH è uno spazio colore percettivamente uniforme che è arrivato nel CSS mainstream attraverso la specifica CSS Color Level 4. Rappresenta i colori come Luminosità (L), Croma (C) e Tonalità (H), dove la Luminosità è calibrata per la percezione umana piuttosto che per l'energia luminosa lineare. Ciò significa che due colori con lo stesso valore L sembreranno ugualmente luminosi all'occhio umano indipendentemente dalla loro tonalità — cosa che non è vera in HSL o RGB. Per i designer che costruiscono palette sistematiche, ciò significa che puoi definire un unico valore L per 'sfondo primario', applicarlo a ogni tonalità nella tua palette e ottenere risultati visivamente bilanciati senza aggiustamento manuale.
OKLCH descrive anche una gamma più ampia di sRGB — può rappresentare colori Display P3 e Rec.2020 che vanno oltre il triangolo sRGB usato dalla maggior parte dei valori hex, RGB e HSL. I browser moderni (Chrome, Safari, Firefox) ora supportano nativamente la funzione CSS oklch(), rendendo OKLCH il formato orientato al futuro per il lavoro sui colori CSS. Questo strumento mostra un avviso di gamma quando il valore OKLCH inserito cade fuori dall'intervallo sRGB e verrebbe limitato dai browser più vecchi, dandoti un avviso anticipato prima di distribuire in produzione.
Un'alternativa gratuita al selettore di colori Google, Adobe Color e agli strumenti online
La maggior parte dei selettori di colore è incorporata in qualcosa di più grande. Il selettore di colori Google appare solo nei risultati di ricerca per query specifiche e non può essere aggiunto ai preferiti o utilizzato in modo autonomo. Il selettore di colori Adobe vive in Photoshop, Illustrator o Adobe Color (color.adobe.com), che richiede un account Adobe e sincronizza i dati con i server Adobe. ColorHexa e RapidTables sono siti di riferimento piuttosto che strumenti interattivi. convertingcolors.com copre spazi colore di nicchia ma manca di funzioni di selezione e palette. cssgradient.io è eccellente per la generazione di gradienti ma non per la gestione di colori individuali.
Questo è un selettore e convertitore di colori gratuito e autonomo che si apre con un clic, funziona su qualsiasi dispositivo, non ti chiede mai di accedere e gira interamente nel tuo browser. Che tu sia uno sviluppatore che abbina un hex del brand, un designer che affina una palette HSL, un professionista della stampa che verifica le approssimazioni CMYK o un ingegnere dell'accessibilità che verifica i rapporti di contrasto WCAG — questo strumento svolge l'intero lavoro in un'unica pagina veloce e privata. Il supporto OKLCH, la verifica dell'accessibilità e la generazione di palette sono inclusi di default, funzioni per cui la maggior parte delle alternative fa pagare o semplicemente non offre.
Frequently asked questions
Questo convertitore di colori è gratuito?
Sì — completamente gratuito senza registrazione, senza account e senza limiti di utilizzo. Funziona interamente nel tuo browser, quindi i colori che selezioni, incolli o campioni non lasciano mai il tuo dispositivo. Non c'è nulla da installare e non è richiesto alcun abbonamento. Ogni funzione — conversione, contagocce, selettore da immagine, verifica contrasto WCAG, tinte e ombre, simulazione daltonismo e generazione schemi di colore — è disponibile gratuitamente dalla prima visita, senza account necessario.
Come si converte un codice HEX in RGB?
Incolla il tuo codice hex (con o senza il # iniziale) nel campo HEX e i valori RGB, HSL, HSV, CMYK e OKLCH si aggiornano istantaneamente. Ad esempio, incolla #3b82f6 e vedrai immediatamente rgb(59, 130, 246) nel campo RGB e hsl(217, 91%, 60%) nel campo HSL. Ogni formato rimane sincronizzato — devi inserire un colore solo una volta. La conversione è bidirezionale: digita un valore RGB e HEX e tutti gli altri campi si aggiornano allo stesso modo.
Quali formati di colore può convertire questo strumento?
Lo strumento converte in modo bidirezionale tra sei formati: HEX (il codice #rrggbb usato in HTML e CSS), RGB (valori rosso-verde-blu da 0 a 255), HSL (tonalità 0-360°, saturazione e luminosità come percentuali), HSV/HSB (tonalità-saturazione-valore, il modello usato nella maggior parte dei selettori di colore delle app di design), CMYK (percentuali ciano-magenta-giallo-nero per anteprima di stampa) e OKLCH (uno spazio colore moderno percettivamente uniforme). Modifica qualsiasi campo e gli altri cinque si aggiornano istantaneamente.
Posso selezionare un colore da un'immagine o foto?
Sì — questo è un selettore di colore da immagine completo. Carica una foto, trascinala o incollala dagli appunti (Ctrl+V / Cmd+V), poi sposta il cursore sull'immagine e clicca per catturare il colore esatto di qualsiasi pixel. Una lente di ingrandimento integrata ingrandisce per una selezione al pixel. L'immagine viene elaborata localmente nel browser usando un canvas HTML e non viene mai caricata su alcun server.
Verifica il contrasto per l'accessibilità (WCAG)?
Sì. Il verificatore di contrasto WCAG calcola il rapporto di contrasto basato sulla luminanza tra il colore scelto e gli sfondi bianco e nero, e mostra i badge passato/fallito AA e AAA per testo normale, testo grande e componenti UI. WCAG AA richiede un rapporto di 4,5:1 per il testo normale (3:1 per il testo grande); WCAG AAA richiede 7:1 (4,5:1 per il testo grande). Il verificatore si aggiorna in tempo reale mentre regoli qualsiasi campo di colore.
Cos'è OKLCH e perché dovrei usarlo?
OKLCH è uno spazio colore moderno e percettivamente uniforme introdotto in CSS Color Level 4. A differenza di RGB o HSL, dove modifiche numeriche uguali non producono differenze ugualmente percepite dall'occhio umano, OKLCH è calibrato in modo che aumentare o diminuire il valore di luminosità (L) di una quantità fissa produca un risultato visivamente coerente indipendentemente dalla tonalità. Questo lo rende ideale per costruire palette di colori accessibili e bilanciate. OKLCH può anche rappresentare colori con gamma estesa (Display P3) ed è supportato nativamente dai browser moderni.
Il selettore di colori funziona su iPhone e Android?
Sì. L'intero strumento funziona in qualsiasi browser mobile moderno — Safari su iPhone/iPad e Chrome su Android. La ruota dei colori, i campi di input formato, il selettore di colore da immagine, il verificatore di contrasto WCAG, la scala di tinte/ombre e il generatore di schemi di colore funzionano normalmente su mobile. Il contagocce dello schermo non è disponibile sui browser mobili (è un'API esclusiva di Chrome/Edge su desktop), ma il selettore di immagini e l'incolla dagli appunti funzionano perfettamente su mobile.
Related tools
Vedi tutti gli strumenti
Novità Generatore di glassmorphism
Progetta una card in vetro smerigliato e copia il CSS, con anteprima in tempo reale.
Novità Generatore di text-shadow CSS
Regola un’ombra del testo CSS con anteprima in tempo reale e copia il codice.
Novità Mixer di colori
Mescola due colori a qualsiasi proporzione e copia il risultato o qualsiasi passaggio.
Novità Selettore colori da immagine
Scegli qualsiasi colore da un’immagine ed estrai la palette dominante in HEX, RGB e HSL.
Novità Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
Novità Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.