Color Picker

Color Picker Web è il miglior selettore di colori online gratuito del 2026. Supporta oltre 20 formati di colore tra cui HEX, RGB, HSL, CMYK, HSB, LAB, XYZ, HWB e altri. Include una ruota dei colori live, un controllo del contrasto WCAG, un simulatore daltonismo, un generatore di palette, un selettore di colori dalle immagini e 6 tipi di armonia — tutto completamente gratuito senza bisogno di registrazione.

Per trovare un codice colore HEX da un'immagine, utilizza l'Image Color Picker su Color Picker Web. Carica qualsiasi foto, passa il mouse sull'area che vuoi campionare e clicca per estrarre i codici HEX, RGB e HSL esatti da qualsiasi pixel. Puoi anche generare automaticamente una palette di colori completa dall'immagine con un solo clic.

Uno strumento di selezione dei colori ti permette di selezionare, convertire e analizzare i colori. Mostra i valori dei colori in diversi formati (HEX, RGB, HSL, CMYK), genera palette di colori complementari, controlla i rapporti di contrasto di accessibilità WCAG, simula il daltonismo ed estrae i colori dalle immagini caricate. È essenziale per web designer, sviluppatori e designer di marchi.

Per convertire HEX in RGB, usa lo strumento di conversione sopra. Inserisci qualsiasi codice HEX (ad esempio #9333ea) e ottieni subito l'output RGB (147, 51, 234). Manualmente: dividi l'HEX in 3 coppie (93, 33, ea), converti ciascuna da esadecimale a decimale. R=147, G=51, B=234. Color Picker Web lo fa istantaneamente per tutti i più di 20 formati.

Secondo le WCAG 2.2, il rapporto minimo di contrasto cromatico per il testo normale è 4,5:1 (Livello AA) e 7:1 (Livello AAA). Per il testo grande (18pt+ o 14pt+ grassetto), il minimo è 3:1 per AA e 4,5:1 per AAA. I componenti dell'interfaccia utente e le icone richiedono almeno un contrasto di 3:1 rispetto ai colori adiacenti. Usa il Controllo del Contrasto WCAG sopra per testare i tuoi colori.

Per scegliere un colore da un sito web: (1) Usa gli strumenti per sviluppatori del browser — fai clic destro su un elemento, ispezionalo e clicca sul campione di colore nel pannello CSS. (2) Usa un'estensione del browser come ColorZilla. (3) Fai uno screenshot e caricalo su Image Color Picker di Color Picker Web per selezionare qualsiasi pixel. Anche Chrome DevTools ha un contagocce integrato nel pannello del selettore di colori.

HSL sta per Tonalità, Saturazione e Luminosità. La tonalità (0°–360°) è il tipo di colore sulla ruota dei colori. La saturazione (0%–100%) indica quanto il colore è vivido o grigio. La luminosità (0%–100%) indica quanto il colore appare scuro o chiaro. Esempio: hsl(270, 81%, 56%) è un viola medio. HSL è il formato migliore per le animazioni CSS e la tematica dinamica dei colori perché ogni proprietà può essere regolata indipendentemente.

Complementary colors are pairs of colors that sit directly opposite each other on the color wheel, 180° apart. Examples: red & green, blue & orange, purple & yellow. When placed side by side, complementary colors create strong contrast and make each color appear more vivid. They are commonly used for CTAs, logos, and high-impact UI elements.

Uno strumento di selezione dei colori è un'utilità digitale che consente agli utenti di scegliere qualsiasi colore e recuperarne il codice esatto in diversi formati — HEX, RGB, HSL, CMYK e altri. Viene utilizzato quotidianamente dai designer UI/UX per scegliere i colori dell'interfaccia, dagli sviluppatori web per codificare i valori dei colori CSS, dai designer di marchi per mantenere la coerenza dei colori, dai fotografi per estrarre colori dalle immagini e dagli artisti digitali per creare palette. Color Picker Web è il selezionatore di colori gratuito più completo disponibile nel 2026, con supporto per oltre 20 formati di colore, controllo dell'accessibilità WCAG, simulazione del daltonismo e 18 lingue.

Un codice colore HEX è una rappresentazione esadecimale a 6 caratteri di un colore utilizzata nel design web e nel CSS. Inizia con il simbolo # seguito da tre coppie di caratteri (00–FF), ciascuna rappresentante l'intensità dei canali Rosso, Verde e Blu. Ad esempio: #FF0000 è rosso puro (R=255, G=0, B=0), #FFFFFF è bianco (tutti i canali al massimo) e #000000 è nero (tutti i canali a zero). I codici HEX in forma abbreviata a 3 cifre come #F00 si espandono a #FF0000. HEX è il formato colore più universalmente supportato in HTML, CSS, SVG e strumenti di design come Figma.

Per scegliere i colori per un sito web: (1) Inizia con il colore primario del tuo brand e crea una scala di colori completa a 9 livelli (50–900) utilizzando aggiustamenti HSL. (2) Applica la regola 60-30-10 — 60% sfondo neutro, 30% colore secondario, 10% accento per le CTA. (3) Verifica che tutte le combinazioni testo/sfondo rispettino il contrasto WCAG AA (minimo 4,5:1 per testo normale). (4) Genera colori di accento armoniosi usando lo strumento Color Harmony — schemi triadici o complementari spezzati funzionano meglio per i siti web. (5) Testa ogni combinazione di colori con un simulatore di daltonismo per garantire l'accessibilità a tutti gli utenti.

Per scegliere i colori del brand: (1) Ricerca la psicologia dei colori — il blu crea fiducia, il verde segnala crescita, il rosso genera urgenza, il viola suggerisce lusso e creatività. (2) Analizza il tuo settore — i brand tecnologici preferiscono blu e grigi, i brand del settore salute usano il verde, i brand di lusso utilizzano oro, nero o viola scuro. (3) Scegli un colore principale del brand che rifletta l'emozione centrale del tuo brand. (4) Costruisci una scala completa di colori partendo dal colore principale usando il metodo HSL. (5) Scegli un colore secondario e un colore di accento usando la teoria dell'armonia. (6) Verifica che tutte le combinazioni rispettino gli standard di accessibilità WCAG. Documenta tutto come token di design per la coerenza su tutte le piattaforme.

HEX, RGB e HSL sono tre modi per rappresentare lo stesso colore: HEX (#9333ea) è un formato esadecimale compatto a 6 cifre ideale per CSS e HTML — il più ampiamente supportato. RGB (rgb(147, 51, 234)) definisce il colore tramite i valori dei canali Rosso, Verde e Blu da 0 a 255 — migliore per canvas JavaScript, SVG e rendering su schermo. HSL (hsl(270, 81%, 56%)) definisce il colore tramite l'angolo della tonalità (0–360°), la saturazione (0–100%) e la luminosità (0–100%) — il metodo più intuitivo per i designer perché ogni proprietà è regolabile in modo indipendente, rendendolo ideale per animazioni CSS e tematiche dinamiche. Tutte e tre descrivono colori identici ma servono a flussi di lavoro diversi.

RGB e CMYK sono fondamentalmente modelli di colore diversi per tipi di output diversi. RGB (Rosso, Verde, Blu) è un modello di colore additivo utilizzato per gli schermi digitali — combinare i colori aggiunge luce, e mescolando tutti i canali al massimo si ottiene il bianco. CMYK (Ciano, Magenta, Giallo, Nero/Key) è un modello di colore sottrattivo usato nella stampa fisica — mescolando gli inchiostri si assorbe la luce, e combinandoli tutti si ottiene il nero. Progetta sempre in RGB per l'output digitale/schermo. Converti in CMYK prima di inviare i file alle stampanti commerciali. La conversione non è mai perfetta — alcuni colori RGB (in particolare i colori brillanti e saturi) non possono essere riprodotti nella stampa CMYK.

HSB (Tinta, Saturazione, Luminosità) e HSV (Tinta, Saturazione, Valore) sono lo stesso modello di colore con nomi diversi. La Tinta (0°–360°) identifica la famiglia del colore. La Saturazione (0–100%) controlla la vivacità, dal grigio al completamente vivido. La Luminosità/Valore (0–100%) controlla quanta luce il colore sembra emettere, dal nero (0%) al massimo della luminosità (100%). HSB è il modello predefinito in Adobe Photoshop, Illustrator e nel selettore di colori di Figma, rendendolo essenziale per i designer che utilizzano questi strumenti. Differisce da HSL nel modo in cui vengono calcolati Chiarezza e Luminosità: in HSL, il 50% di chiarezza rappresenta il colore puro, mentre in HSB, il 100% di luminosità rappresenta il colore puro.

LAB (CIELAB) e XYZ (CIEXYZ) sono spazi colore indipendenti dal dispositivo e uniformi percettivamente basati sulla scienza della visione umana. XYZ è la base di tutta la scienza moderna del colore — mappa i colori in base a come l'occhio umano li percepisce usando tre coni (X, Y, Z corrispondenti grossomodo alla sensibilità a rosso, verde e blu). LAB deriva da XYZ ed è progettato in modo che uguali distanze numeriche rappresentino uguali differenze di colore percepite, rendendolo ideale per il confronto dei colori, l'elaborazione delle immagini, l'apprendimento automatico e il controllo della qualità della stampa. Entrambi sono utilizzati nella gestione professionale dei colori, nei profili colore ICC e nei flussi di lavoro avanzati di editing delle immagini. CSS ora supporta entrambi tramite la sintassi color(xyz …) e lab(…) nei browser moderni.

Il Selettore di Colori delle Immagini su Color Picker Web ti permette di estrarre colori esatti da qualsiasi fotografia, screenshot, logo o opera d'arte. Carica qualsiasi file immagine, quindi clicca su un qualsiasi pixel per estrarne istantaneamente i valori HEX, RGB e HSL. Lo strumento genera anche automaticamente una palette completa basata sui colori dominanti della tua immagine. Questo è utile per abbinare i colori del brand da materiali esistenti, creare palette da mood board, estrarre colori da foto di prodotti e ingegnerizzare al contrario schemi di colori dai siti web dei concorrenti. Non è necessario alcun account o installazione di software — funziona interamente nel browser.

Color Picker Web supporta tutti e sei i principali tipi di armonia dei colori basati sulla teoria della ruota dei colori: Complementare — due colori direttamente opposti (a 180°), massimo contrasto. Complementare Diviso — un colore di base più due colori adiacenti al suo complemento (150° e 210°). Triadico — tre colori equidistanti (a 120° l'uno dall'altro), equilibrati e vivaci. Analogo — tre colori adiacenti (a 30° l'uno dall'altro), armoniosi e naturali. Monocromatico — variazioni di una singola tonalità a diversi livelli di saturazione e luminosità. Tetradico — quattro colori equidistanti (a 90° l'uno dall'altro), complessi e ricchi. Tutte le armonie sono calcolate matematicamente in tempo reale mentre scegli i colori.

Sì, Color Picker Web è completamente gratuito da usare — tutte le funzionalità, inclusi il selettore di colori, il generatore di palette, il selettore di colori dalle immagini, il controllore di contrasto WCAG, il simulatore di daltonismo, le armonie di colore, il generatore di tinte e sfumature e tutte le oltre 20 conversioni di formati colore sono disponibili senza alcun costo. Non è richiesto alcun account, indirizzo email o registrazione. Non ci sono pubblicità, limiti di utilizzo o livelli premium — tutte le funzionalità sono permanentemente gratuite. Lo strumento è disponibile anche in 18 lingue: inglese, hindi, spagnolo, russo, francese, tedesco, italiano, portoghese, bengalese, giapponese, coreano, malese, polacco, indonesiano, arabo, bulgaro, turco e svedese.

I requisiti di contrasto dei colori delle WCAG (Web Content Accessibility Guidelines) garantiscono che il testo sia leggibile da utenti con visione ridotta, daltonismo o occhi invecchiati. Il rapporto di contrasto misura la differenza di luminanza tra il colore del testo e lo sfondo — variando da 1:1 (nessun contrasto) a 21:1 (massimo, nero su bianco). WCAG 2.2 Livello AA richiede un rapporto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande. Il Livello AAA richiede 7:1 per il testo normale. La mancata conformità può comportare responsabilità legale secondo ADA (USA), EAA (Europa) e la Sezione 508. Solo nel 2023, negli Stati Uniti, sono state intentate oltre 4.600 cause legate all’accessibilità, con le mancanze di contrasto tra le problematiche più comunemente citate.

Color Picker Web simula 8 tipi di deficit della visione dei colori: Protanopia — cecità al rosso (1,3% degli uomini). Protanomalia — ridotta sensibilità al rosso (1,3% degli uomini). Deuteranopia — daltonismo verde (1,2% degli uomini). Deuteranomalia — sensibilità ridotta al verde (5% degli uomini, il tipo più comune). Tritanopia — daltonismo blu (0,001% della popolazione). Tritanomalia — ridotta sensibilità al blu (raro). Acromatopsia — totale cecità ai colori, vede solo in scala di grigi (0,003% della popolazione). Acromatocromatopsia — percezione del colore ridotta su tutti i canali (molto rara). Ogni simulazione utilizza una matrice di trasformazione dei colori clinica applicata al colore selezionato in tempo reale.

La psicologia dei colori nel design dell'interfaccia utente studia come i colori influenzano le emozioni, le percezioni e il comportamento degli utenti. Associazioni chiave: Blu — fiducia, affidabilità, calma (utilizzato da Facebook, Twitter, PayPal, LinkedIn). Verde — crescita, salute, natura, successo (usato da Spotify, WhatsApp, marchi di alimenti integrali). Rosso — urgenza, passione, energia, appetito (usato per striscioni di vendita, marchi alimentari, CTA). Viola — lusso, creatività, saggezza (usato da Cadbury, Hallmark, marchi di bellezza). Giallo — ottimismo, calore, attenzione (usato per avvisi, punti salienti delle vendite). Arancia — entusiasmo, cordialità (usato da Amazon, Fanta, Harley-Davidson). La psicologia del colore influenza i tassi di conversione, la percezione del marchio e la fidelizzazione degli utenti.

Creare una palette di colori per un sistema di design comporta 5 passaggi: (1) Definire il colore principale del brand e convertirlo in HSL. (2) Generare una scala di colori a 9 livelli (50–900) regolando sistematicamente la luminosità — livelli più chiari (50–300) per sfondi e tinte, livelli più scuri (600–900) per testi e modalità scura. (3) Ripetere per i colori secondari, accent, successo, avviso, errore e neutro. (4) Creare token semantici (--color-primary, --color-primary-hover, --color-surface) che facciano riferimento ai livelli della scala. (5) Verificare che ogni combinazione testo/sfondo rispetti lo standard WCAG AA. Usare Color Picker Web per generare le scale, verificare il contrasto ed esportare i valori HEX/HSL come token di design per Figma o CSS.

La regola 60-30-10 è un principio classico di design per creare schemi di colore equilibrati e visivamente attraenti. 60% — colore dominante/neutro (sfondi, pareti, grandi superfici) — di solito un neutro chiaro che definisce il tono generale. 30% — colore secondario (mobili, intestazioni, barre laterali) — completa il dominante e aggiunge profondità. 10% — colore di accento (CTA, pulsanti, evidenziazioni, link importanti) — crea interesse visivo e attira l'attenzione sulle azioni chiave. Nel web design questo si traduce in: 60% sfondi e superfici di base, 30% aree di contenuto ed elementi UI secondari, 10% pulsanti primari, stati attivi ed evidenziazioni importanti. Questa proporzione previene il sovraccarico visivo mantenendo la gerarchia.

La luminanza relativa misura la luminosità percepita di un colore su una scala da 0 (nero) a 1 (bianco). Il calcolo: (1) Convertire ogni canale RGB (0–255) in un decimale (0–1) dividendo per 255. (2) Rimuovere la correzione gamma: se il valore ≤ 0,04045, dividere per 12,92; altrimenti applicare (valore + 0,055) / 1,055 elevato alla potenza di 2,4. (3) Applicare la formula ponderata: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. I pesi riflettono la sensibilità dell'occhio umano — più sensibile al verde, meno al rosso, meno ancora al blu. (4) Rapporto di contrasto = (L_più chiaro + 0,05) / (L_più scuro + 0,05). Lo scostamento di 0,05 rappresenta la luce ambientale su un display tipico. Color Picker Web esegue questo calcolo all'istante.

HSL (Tonalità, Saturazione, Luminosità) e HSB/HSV (Tonalità, Saturazione, Luminosità/Valore) utilizzano entrambi Tonalità e Saturazione ma differiscono nel terzo canale. In HSL, La luminosità del 50% è il colore puro, completamente saturato; 0% è nero e 100% è bianco. È simmetrico. In HSB/HSV, La luminosità/valore del 100% è il colore puro; lo 0% è sempre nero indipendentemente dagli altri valori. HSB è più intuitivo per selezionare i colori perché puoi prima scegliere il colore vivido al 100% di luminosità e poi scurirlo — rendendolo il predefinito in Photoshop, Figma e Illustrator. HSL è più intuitivo per il CSS perché puoi interpolare in modo fluido tra versioni scure e chiare della stessa tonalità.

La miscelazione dei colori additiva (RGB) e la miscelazione dei colori sottrattiva (CMYK) sono i due modelli di colore fondamentali. Additivo (RGB) — utilizzato dai dispositivi emettitori di luce (schermi, proiettori, LED). I colori vengono creati aggiungendo luce. Combinando tutti e tre i canali al massimo (R=255, G=255, B=255) si produce il bianco. L'assenza di luce (R=0, G=0, B=0) produce il nero. Sottrattivo (CMYK) — usato nella stampa. Gli inchiostri assorbono (sottraggono) lunghezze d'onda della luce. Combinando tutti gli inchiostri al massimo si assorbe tutta la luce, producendo il nero (in teoria — in pratica, si aggiunge un inchiostro chiave/nero perché la miscelazione degli inchiostri non è perfetta). L'implicazione pratica: progettare il lavoro digitale in RGB, quindi convertire in CMYK per la stampa — notando che alcuni colori RGB vividi non possono essere riprodotti in CMYK.

La temperatura del colore descrive la sensazione di calore o freddo di un colore, misurata in Kelvin (K) per le fonti di luce e percepita percettivamente per i colori del design. Colori caldi (rossi, arancioni, gialli — tonalità 0°–60° e 300°–360°) sembrano energici, urgenti e invitanti. Avanzano visivamente — gli elementi in colori caldi appaiono più vicini. Colori freddi (blu, verdi, viola — tonalità 120°–240°) danno una sensazione di calma, affidabilità e professionalità. Recedono visivamente — gli elementi nei colori freddi sembrano più lontani. Neutro (bianchi, grigi, beige, teal tra i 90° e i 120°) sono bilanciati e versatili. Nel design dell'interfaccia utente, i colori caldi stimolano l'azione (CTA), i colori freddi creano fiducia (intestazioni, sfondi) e i neutri forniscono struttura. La sezione About Color di Color Picker Web mostra la temperatura percepita di qualsiasi colore selezionato.