Convertitore di Codice Colore

Converti codici colore in blocco tra formati HEX, RGB, HSL. Incolla piu colori e ottieni tutte le conversioni contemporaneamente.

Funzionalita principali

Conversione bulk dei colori
Supporto per HEX, RGB, HSL, RGBA, HSLA
Copia di singoli o tutti i risultati
Anteprima colore per ogni voce

Guide

I colori nei sistemi digitali sono rappresentati da codici numerici. Contesti diversi richiedono formati di codice colore diversi. Gli sviluppatori web usano codici hex e funzioni di colore CSS. I graphic designer lavorano con CMYK per la stampa e RGB per lo schermo. I designer di UI fanno riferimento a HSL per adattamenti di colore intuitivi. Comprendere questi formati, come si relazionano tra loro e quando usare ciascuno è essenziale per chiunque lavori con il colore digitale. Questa guida illustra i principali formati di codice colore, la matematica di conversione e le applicazioni pratiche attraverso design e sviluppo. RGB (Rosso, Verde, Blu) è il modello di colore di base per gli schermi. Ogni pixel sul tuo monitor, telefono o tablet produce colore miscelando luce rossa, verde e blu a diverse intensità. Ciascun canale va da 0 (nessuna luce) a 255 (intensità massima). RGB(255, 0, 0) è rosso puro. RGB(0, 255, 0) è verde puro. RGB(0, 0, 255) è blu puro. RGB(255, 255, 255) è bianco (tutti i canali al massimo). RGB(0, 0, 0) è nero (nessuna luce). RGB(128, 128, 128) è un grigio medio (parti uguali di ciascun canale a metà intensità). Il modello RGB è chiamato additivo perché combinare tutti i colori a intensità piena produce il bianco, il che corrisponde a come funziona fisicamente la luce. I codici colore esadecimali sono il formato di colore più comune sul web. Un codice hex è solo un valore RGB scritto in base-16. Il codice hex #FF0000 è RGB(255, 0, 0), che è rosso. I primi due caratteri (FF) rappresentano il canale rosso, i due successivi (00) rappresentano il verde e gli ultimi due (00) rappresentano il blu. FF in esadecimale equivale a 255 in decimale. 00 equivale a 0. 80 equivale a 128. La conversione tra hex e RGB è una conversione di base: dividi il codice hex in tre paia e converti ciascuna coppia da base-16 a base-10. I codici hex abbreviati usano tre caratteri invece di sei. #F00 è equivalente a #FF0000. Ciascun carattere è raddoppiato: #F00 diventa #FF0000, #39F diventa #3399FF, #000 diventa #000000. Questa abbreviazione funziona solo quando ciascuna coppia consiste di due caratteri identici. #3A7F2B non può essere abbreviato perché nessuna coppia ha cifre identiche. Usa l'abbreviazione nel codice per brevità quando disponibile, ma fai attenzione che alcuni strumenti e sistemi di design restituiscono sempre la forma completa a sei caratteri. I codici hex a otto cifre aggiungono un canale alfa (trasparenza). #FF000080 è rosso al 50% di opacità. Le ultime due cifre (80, che è 128 in decimale, all'incirca il 50% di 255) definiscono il valore alfa. #FF0000FF è rosso completamente opaco (identico a #FF0000). #FF000000 è rosso completamente trasparente (invisibile). L'hex a otto cifre è supportato nel CSS moderno e in tutti i principali browser. Nota che alcuni formati (come lo sviluppo Android) mettono il canale alfa per primo (#80FF0000), quindi controlla la convenzione per la tua piattaforma. HSL (Hue, Saturation, Lightness, ovvero Tonalità, Saturazione, Luminosità) rappresenta il colore in un modo che corrisponde a come gli esseri umani pensano al colore. La tonalità è l'angolo del colore su una ruota dei colori: 0 gradi è rosso, 120 gradi è verde, 240 gradi è blu e 360 gradi torna al rosso. La saturazione è l'intensità del colore da 0% (grigio) a 100% (completamente vivido). La luminosità è la brillantezza da 0% (nero) a 100% (bianco), con 50% che è il colore normale. HSL(0, 100%, 50%) è rosso puro. HSL(120, 100%, 50%) è verde puro. HSL(60, 100%, 50%) è giallo puro, a metà tra rosso e verde sulla ruota della tonalità. Il vantaggio pratico di HSL rispetto a RGB è la manipolazione intuitiva del colore. Per rendere un colore più chiaro, aumenta il valore di luminosità. Per renderlo più smorzato, diminuisci la saturazione. Per spostare il colore (dal rosso verso l'arancio, per esempio), adatta l'angolo di tonalità. In RGB, ottenere gli stessi adattamenti richiede di cambiare simultaneamente valori di canali multipli, rendendo più difficile prevedere il risultato. I designer che costruiscono tavolozze di colori spesso lavorano in HSL perché possono creare variazioni armoniose adattando sistematicamente un parametro alla volta. HSV (Hue, Saturation, Value, ovvero Tonalità, Saturazione, Valore) è strettamente correlato a HSL ma definisce la brillantezza diversamente. In HSV, il valore rappresenta la massima brillantezza del colore. A V=100%, il colore è il più brillante possibile. A V=0%, il colore è nero indipendentemente dalla tonalità e dalla saturazione. HSV è il modello di colore nativo in molti strumenti di design inclusi il selettore colore di Adobe Photoshop. La differenza tra HSL e HSV è sottile ma conta: HSL(0, 100%, 100%) è bianco, mentre HSV(0, 100%, 100%) è rosso puro. HSV è più intuitivo per i pittori e i designer che pensano a tingere con il bianco contro ombreggiare con il nero. HSL è più simmetrico e spesso preferito nel CSS. HWB (Hue, Whiteness, Blackness, ovvero Tonalità, Bianchezza, Nerezza) è una nuova funzione di colore CSS che offre un altro modello intuitivo. La tonalità è la stessa di HSL e HSV. La bianchezza definisce quanto bianco è miscelato (da 0% a 100%). La nerezza definisce quanto nero è miscelato (da 0% a 100%). HWB(0, 0%, 0%) è rosso puro. HWB(0, 100%, 0%) è bianco. HWB(0, 0%, 100%) è nero. HWB(0, 50%, 0%) è un rosa chiaro (rosso miscelato con il 50% di bianco). Molti designer trovano HWB il modello più intuitivo perché rispecchia il concetto fisico di miscelare vernice con bianco o nero. Il CSS supporta hwb() in tutti i browser moderni. CMYK (Ciano, Magenta, Giallo, Key/Nero) è il modello di colore usato nella stampa. Mentre gli schermi aggiungono luce (miscelazione additiva del colore), le stampanti depositano inchiostro che assorbe la luce (miscelazione sottrattiva del colore). L'inchiostro ciano assorbe la luce rossa. Il magenta assorbe il verde. Il giallo assorbe il blu. Il canale key (nero) esiste perché miscelare gli inchiostri CMY produce teoricamente il nero ma praticamente produce un marrone scuro fangoso. Aggiungere un inchiostro nero dedicato produce scuri più puliti e fa risparmiare inchiostro colorato. I valori CMYK vanno da 0% a 100% per ciascun canale. La conversione tra RGB e CMYK non è una semplice formula matematica. La conversione teorica (C = 1 - R/255, M = 1 - G/255, Y = 1 - B/255, poi estraendo K come il minimo tra C, M, Y) ti dà un punto di partenza, ma i colori di stampa effettivi dipendono dall'inchiostro, dalla carta, dalla macchina da stampa e dal profilo colore ICC. I flussi di lavoro di stampa professionale usano sistemi di gestione del colore con profili calibrati per garantire una riproduzione accurata. Il convertitore WebRecast esegue la conversione matematica, che è adatta per approssimazioni, riferimenti rapidi e lavori di colore non critici. Per i lavori di stampa di produzione, usa sempre un flusso di lavoro gestito dal colore con profili calibrati. Le funzioni di colore CSS si sono espanse significativamente negli ultimi anni. I formati tradizionali sono hex (#FF0000), rgb(255, 0, 0) e hsl(0, 100%, 50%). Il CSS moderno supporta anche la funzione hwb() (Tonalità, Bianchezza, Nerezza), la funzione lab() (spazio colore CIE LAB per colori percettivamente uniformi), la funzione lch() (CIE LCH, la forma cilindrica di LAB) e la funzione oklch() (una versione corretta di LCH che produce risultati più prevedibili). Questi spazi colore più recenti affrontano le limitazioni di RGB e HSL, in particolare riguardo all'uniformità percettiva, dove due colori con la stessa luminosità HSL possono apparire piuttosto diversi in brillantezza all'occhio umano. OKLCH merita un'attenzione speciale perché sta rapidamente diventando lo spazio colore raccomandato per il web design. OKLCH sta per OK Lightness Chroma Hue e produce risultati percettivamente uniformi. Ciò significa che una luminosità del 70% appare ugualmente brillante attraverso tutte le tonalità, a differenza di HSL dove il giallo al 50% di luminosità appare molto più brillante del blu al 50% di luminosità. Per creare tavolozze di colori accessibili, generare stati di hover dei pulsanti coerenti e costruire sistemi di design token, OKLCH produce risultati migliori di HSL. La sintassi è oklch(70% 0.15 250) dove 70% è la luminosità, 0.15 è il chroma (intensità del colore) e 250 è l'angolo della tonalità. I colori CSS con nome includono 148 nomi predefiniti come red, blue, coral, darkslategray e papayawhip. Questi nomi mappano a valori hex specifici (coral è #FF7F50, papayawhip è #FFEFD5). I colori con nome sono convenienti per il prototipazione e leggibili nel codice, ma ti limitano a una tavolozza fissa. La maggior parte del CSS di produzione usa codici hex o funzioni HSL per un controllo preciso. I nomi dei colori hanno origini storiche: alcuni provengono dai colori del sistema di finestre X11 degli anni 1980, motivo per cui ci sono stranezze come darkgray che è più chiaro di gray. La trasparenza alfa (opacità) è disponibile in tutti i formati di colore CSS moderni. rgba(255, 0, 0, 0.5) è rosso al 50% di opacità. hsla(0, 100%, 50%, 0.5) è lo stesso colore. Nel CSS moderno (Level 4), puoi anche scrivere rgb(255 0 0 / 50%) usando la sintassi separata da spazi con una barra prima del valore alfa. Il canale alfa va da 0 (completamente trasparente) a 1 (completamente opaco) nelle funzioni CSS, o da 0 a 255 nell'hex a 8 cifre. La differenza tra la trasparenza alfa su un colore e la proprietà opacity del CSS è importante: l'opacity influisce sull'intero elemento e sui suoi figli, mentre l'alfa del colore influisce solo su quel valore di colore specifico. Il contrasto del colore è una considerazione critica per l'accessibilità. Le Web Content Accessibility Guidelines (WCAG) richiedono rapporti di contrasto minimi tra i colori del testo e dello sfondo. Il Livello AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande. Il Livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Il rapporto di contrasto è calcolato dalla luminanza relativa di due colori usando la formula (L1 + 0,05) / (L2 + 0,05), dove L1 è il colore più chiaro. La luminanza relativa usa una formula pesata che tiene conto della percezione umana: L = 0,2126R + 0,7152G + 0,0722B (dopo correzione gamma). Il verde contribuisce più alla brillantezza percepita, motivo per cui il testo verde su bianco ha bisogno di valori RGB più alti del testo rosso per raggiungere lo stesso contrasto. Il daltonismo colpisce circa l'8% degli uomini e lo 0,5% delle donne. Il tipo più comune è il daltonismo rosso-verde (deuteranopia e protanopia), dove rossi e verdi appaiono simili. La tritanopia (daltonismo blu-giallo) è rara. L'acromatopsia (daltonismo completo) è estremamente rara. Quando selezioni i colori per interfacce, grafici o visualizzazioni di dati, evita di fare affidamento solo sul colore per trasmettere informazioni. Usa il colore in combinazione con forme, pattern, etichette o posizione. Testare la tua tavolozza di colori con un simulatore di daltonismo aiuta a identificare combinazioni problematiche. I colori blu e arancio sono distinguibili da quasi tutti i tipi di daltonismo. Costruire una tavolozza di colori per un sito web o un'applicazione in genere inizia con un colore primario del marchio. Da quella base, derivi una tavolozza completa di sfumature, tinte e colori complementari. In HSL, creare sfumature significa diminuire la luminosità mantenendo costanti tonalità e saturazione. Creare tinte significa aumentare la luminosità. Creare un colore complementare significa aggiungere 180 gradi alla tonalità. I colori analoghi sono entro 30 gradi dalla tonalità di base. I colori triadici sono a 120 gradi di distanza. I colori complementari divisi sono a 150 e 210 gradi dalla base. Queste relazioni della teoria del colore sono facili da calcolare in HSL e scomode in RGB o hex. I design token e le CSS custom properties (variabili) sono il modo moderno di gestire i colori in una base di codice. Definisci i tuoi colori una volta come CSS custom properties: --color-primary: hsl(220, 90%, 56%); --color-primary-light: hsl(220, 90%, 72%); --color-primary-dark: hsl(220, 90%, 40%). Fai riferimento a queste variabili attraverso tutti i tuoi fogli di stile. Quando hai bisogno di cambiare il colore primario, aggiorna un valore. I sistemi di design come Material Design e Tailwind CSS organizzano i colori in scale (50, 100, 200 fino a 900) che rappresentano variazioni di luminosità di ciascuna tonalità. La modalità scura richiede un approccio diverso al colore rispetto a semplicemente invertire tutto. In modalità scura, gli sfondi sono scuri (non nero puro, che causa troppo contrasto e affaticamento degli occhi) e il testo è chiaro (non bianco puro per la stessa ragione). Le superfici a diversi livelli di elevazione usano sfumature di sfondo leggermente più chiare. I colori del marchio spesso hanno bisogno di saturazione ridotta e luminosità aumentata in modalità scura per mantenere la leggibilità senza apparire harsh sugli sfondi scuri. Un sistema di colore ben progettato che usa CSS custom properties può scambiare tra tavolozze chiare e scure cambiando i valori delle variabili a livello di root. Gli spazi colore oltre sRGB stanno diventando importanti per i display moderni. Lo spazio colore sRGB, usato dai valori hex e RGB standard, copre solo circa il 35% dei colori visibili. Display P3, usato dai dispositivi Apple e da molti monitor moderni, copre circa il 45%. Rec. 2020, usato nella televisione HDR, copre circa il 75%. Le nuove funzioni CSS color-mix(), color() e oklch() possono accedere a queste gamma più ampie. Un colore specificato come color(display-p3 1 0 0) produce un rosso più vivido di #FF0000 sui display che supportano P3. Man mano che i display wide-gamut diventano standard, comprendere gli spazi colore oltre sRGB diventa sempre più importante per fornire esperienze visive vibranti. Convertire i colori programmaticamente in JavaScript usa matematica semplice. Per convertire hex in RGB: parseInt(hex.substring(1,3), 16) dà il canale rosso, e similmente per verde e blu. Per convertire RGB in HSL: normalizza R, G, B al range 0-1, calcola i valori massimo e minimo, ricava la luminosità come (max+min)/2, la saturazione dal delta tra max e min e la tonalità da quale canale è il massimo. Queste formule sono ben documentate e implementate in ogni libreria di manipolazione del colore (chroma.js, color, tinycolor2 in JavaScript, colour in Python e palette in Rust). I gradienti usano codici colore multipli. Un gradiente lineare CSS transita tra i colori: background: linear-gradient(to right, #FF0000, #0000FF) crea un gradiente dal rosso al blu. I gradienti in RGB possono produrre colori intermedi fangosi perché la linea retta tra due colori nello spazio RGB può passare attraverso regioni non sature. I gradienti in HSL o oklch spesso producono transizioni più vivide perché seguono la ruota dei colori. L'interpolazione moderna dei gradienti CSS con "in oklch" produce transizioni percettivamente uniformi: background: linear-gradient(in oklch, #FF0000, #0000FF). Questo è un miglioramento notevole per i gradienti tra colori complementari. Il convertitore di colori WebRecast accetta input in qualsiasi formato supportato e mostra istantaneamente i valori equivalenti in tutti gli altri formati. Inserisci un codice hex e vedi i valori RGB, HSL, HSV e CMYK. Inserisci un valore HSL e ottieni gli equivalenti hex e RGB. Questo elimina la matematica di conversione manuale e riduce gli errori quando si traduce tra strumenti di design (che possono mostrare HSV) e CSS (che usa hex, RGB o HSL). Il convertitore visualizza anche un'anteprima visiva del colore così puoi verificare che corrisponda alla tua intenzione. Il colore nella visualizzazione dei dati richiede un'attenzione speciale. Grafici, diagrammi e mappe devono usare colori distinguibili tra loro, significativi per chi guarda e accessibili alle persone con carenze di visione dei colori. Le scale di colore sequenziali (dal chiaro allo scuro di una tonalità) funzionano per dati continui come temperatura o densità di popolazione. Le scale di colore divergenti (due tonalità che si incontrano a un punto medio neutro) funzionano per dati con un punto centrale significativo, come profitto/perdita o deviazione dalla media. Le scale di colore categoriche (tonalità distinte) funzionano per dati nominali come categorie di prodotto. Strumenti come ColorBrewer forniscono tavolozze basate sulla ricerca ottimizzate per diversi tipi di dati e requisiti di accessibilità. La gestione del colore attraverso i dispositivi è una sfida continua. Lo stesso codice hex può apparire diverso su schermi diversi a causa di variazioni nella tecnologia di visualizzazione, calibrazione, brillantezza e illuminazione ambientale. sRGB è lo spazio colore standard per il web, e la maggior parte dei display è calibrata per approssimarlo. I designer professionisti calibrano i loro monitor usando colorimetri (dispositivi hardware che misurano l'output del display) e profili ICC. Per lo sviluppo web dove non puoi controllare il display dell'utente, progetta con margini di contrasto sufficienti così che lievi differenze di rendering del colore non influenzino l'usabilità o la leggibilità. L'estrazione del colore dalle immagini è utile per creare tavolozze che corrispondono a fotografie, asset del marchio o immagini di ispirazione. Il processo comporta il campionamento dei colori dominanti usando algoritmi come k-means clustering, median cut o quantizzazione octree. Questi algoritmi raggruppano pixel simili e identificano i colori più rappresentativi. Strumenti come Adobe Color, Coolors e vari pacchetti npm (color-thief, vibrant.js) automatizzano questo processo. Estrarre 5-8 colori dominanti da un'immagine eroe e usarli come colori di accento garantisce coerenza visiva tra immagini ed elementi UI. La psicologia del colore, sebbene non sia una scienza esatta, ha alcuni effetti documentati sulla percezione. Il rosso aumenta l'urgenza percepita ed è comunemente usato per annunci di vendita e stati di errore. Il blu trasmette fiducia e professionalità, motivo per cui le istituzioni finanziarie e le piattaforme di social media lo favoriscono. Il verde segnala successo, sicurezza e temi ambientali. L'arancio è associato all'azione ed è comunemente usato per i pulsanti di call-to-action. Il giallo attira l'attenzione e funziona per gli avvisi. Queste associazioni sono influenzate culturalmente: il bianco rappresenta il lutto in alcune culture dell'Asia orientale, mentre il rosso significa fortuna e prosperità nella cultura cinese. Considera il contesto culturale del tuo pubblico target quando scegli schemi di colore. Suggerimenti pratici per lavorare con i codici colore: includi sempre il simbolo hash (#) quando scrivi codici hex nel CSS, poiché è sintassi richiesta. Usa cifre hex minuscole per coerenza (#ff0000 anziché #FF0000), che è anche la convenzione usata dalla maggior parte dei minifier e formattatori CSS. Preferisci HSL nel tuo CSS quando hai bisogno di creare variazioni di colore programmaticamente. Usa hex a 8 cifre o rgba/hsla per la trasparenza anziché la proprietà opacity del CSS, che influisce sull'intero elemento inclusi i figli. Memorizza i colori del tuo marchio come design token e fanne riferimento coerentemente attraverso il tuo progetto anziché hardcodare i valori di colore in componenti individuali. Quando comunichi i colori con un team di design, includi sia il codice hex sia il campione visivo per evitare ambiguità dovute a differenze di calibrazione dello schermo.

Domande frequenti

In cosa differisce da un convertitore di colori normale?

Questo strumento è pensato per sviluppatori che devono convertire più colori in una volta, con un formato di output adatto al codice.

Quali formati di colore sono supportati?

Sono supportati i formati HEX (#RRGGBB), RGB(r,g,b), HSL(h,s%,l%), RGBA e HSLA.