Convertitore colori

Il convertitore supporta HEX (3 cifre, 6 cifre e 8 cifre con alfa), RGB e RGBA (sintassi di virgola o spazio), HSL e HSLA, OKLCH e qualsiasi valido CSS colore con nome come cornflowerblue, rebeccapurple o tomato. Il formato viene rilevato automaticamente durante la digitazione, quindi puoi incollarne uno qualsiasi direttamente nel campo di input senza prima selezionare una modalità.

OKLCH è uno spazio colore polare percettivamente uniforme definito da luminosità (L), crominanza (C) e tonalità (H). A differenza di HSL, dove i colori con valori di luminosità identici possono apparire visivamente molto diversi in termini di luminosità percepita, OKLCH utilizza un modello sottostante che corrisponde meglio al modo in cui la visione umana percepisce le differenze di colore. Ciò lo rende ideale per generare a livello di codice scale di colori accessibili, tavolozze di pulsanti coerenti e token di progettazione. CSS supporta nativamente oklch() in tutti i browser moderni a partire dal 2023 e i principali sistemi di progettazione lo hanno adottato per questa precisione. Puoi abbinare i valori OKLCH direttamente al CSS Gradient Generator per gradienti percettivamente uniformi.

Il rapporto di contrasto utilizza la formula WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 è la luminanza relativa del colore più scuro. La luminanza relativa viene calcolata dai valori del canale sRGB linearizzati ponderati come 0,2126 R + 0,7152 G + 0,0722 B. Lo strumento controlla il colore rispetto al bianco puro (255, 255, 255) e al quasi nero (15, 23, 42) e visualizza il rapporto insieme al grado WCAG sia per il testo normale che per quello grande.

Le WCAG 2.1 definiscono due livelli di conformità per il contrasto del testo. Il Livello AA richiede un rapporto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt+ grassetto). Il Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. AA è il minimo legale in molte normative sull'accessibilità, tra cui EN 301 549 e Sezione 508. AAA è consigliato per documenti o interfacce in cui è importante la massima leggibilità, come contenuti medici o legali.

La tavolozza converte il colore nello spazio HSL, quindi genera cinque tinte interpolando la luminosità verso il 95% (vicino al bianco) e cinque tonalità interpolando verso il 5% (vicino al nero), mantenendo tonalità e saturazione costanti. Il risultato è una striscia di 11 campioni: 5 tinte, il colore di base (delineato nella tavolozza) e 5 sfumature. Facendo clic su qualsiasi campione si carica immediatamente quel colore nell'input per un'ulteriore conversione o ispezione WCAG.

No. Tutti i calcoli relativi all'analisi dei colori, alla matematica di conversione e ai WCAG vengono eseguiti interamente nel tuo browser utilizzando JavaScript. PureTools non dispone di endpoint server per questo strumento e non riceve mai i colori immessi. L'ultimo colore digitato viene salvato in sessionStorage sotto una chiave con spazio dei nomi in modo che persista durante l'aggiornamento, ma sessionStorage viene automaticamente cancellato quando chiudi la scheda, quindi i i dati vengono cancellati quando chiudi la scheda. Niente viene mai caricato o archiviato in remoto. I tuoi dati non vengono mai usati per addestrare modelli di IA o migliorare sistemi di machine learning.

Sì. Figma in genere copia i colori come HEX, HSL o RGB. Gli strumenti di sviluppo del browser copiano i colori come esadecimale, rgb() o hsl(). Tutti questi sono accettati direttamente. Se copi un valore oklch() da un file CSS o da un token di progettazione JSON, anche questo è supportato. Lo strumento rileva automaticamente il formato dalla stringa incollata, quindi non è necessario selezionare nulla prima di incollare. Puoi anche utilizzare JSON Formatter per estrarre i valori di colore dai file dei token di progettazione JSON prima di incollarli qui.

Sia HSL (Tonalità, Saturazione, Luminosità) che HSV (Tonalità, Saturazione, Valore) rappresentano i colori utilizzando un angolo di tonalità e due assi relativi, ma definiscono il terzo asse in modo diverso. In HSL, una luminosità del 50% con la massima saturazione dà la tonalità pura. In HSV, anche un valore del 100% con la saturazione massima dà la tonalità pura, ma il valore è concettualmente più vicino alla luminosità percepita. L'HSL si adatta in modo più intuitivo al modo in cui i designer pensano a tinte e sfumature, mentre l'HSV è comunemente utilizzato nelle ruote di selezione dei colori e nelle applicazioni di modifica delle immagini.

sRGB e OKLCH coprono gamme simili ma non identiche. Quando converti sRGB in OKLCH, i valori sono matematicamente esatti. Durante la riconversione, l'arrotondamento in virgola mobile nelle moltiplicazioni della matrice intermedia e nel passaggio della radice cubica può produrre valori di canale che sono 0 o 1 nell'intervallo intero compreso tra 0 e 255, una differenza visivamente impercettibile. Se l'input utilizza un valore OKLCH con crominanza molto elevata che non rientra nella gamma sRGB, lo strumento blocca il canale di output al valore sRGB valido più vicino anziché produrre CSS.

Il selettore colore nativo del browser (input type="color") memorizza sempre il suo valore come esadecimale. Ogni volta che digiti un colore valido nel campo di testo in qualsiasi formato, lo strumento lo converte in esadecimale e aggiorna il valore del selettore a livello di codice. Al contrario, selezionando un colore dal campione si scrive il suo valore esadecimale nel campo di testo. Questa sincronizzazione bidirezionale significa che puoi utilizzare il selettore visivo per l'esplorazione e il campo di testo per la precisione, ed entrambi riflettono sempre lo stesso colore.

Sì, all'interno della stessa sessione del browser. Lo strumento salva l'ultimo input valido in sessionStorage in modo che persista durante l'aggiornamento. Quando chiudi la scheda, sessionStorage viene cancellato automaticamente dal browser, quindi il colore viene cancellato e i tuoi dati rimangono solo sul tuo dispositivo. Lo strumento non utilizza localStorage per i dati di colore, lì viene memorizzata solo la preferenza del tema.

No. Convertitore colori mantiene file, valori e risultati temporanei sul tuo dispositivo. PureTools non ha un database backend per salvare questi input e non li invia a un server di elaborazione. I dati dello strumento possono esistere in memoria o in sessionStorage durante la scheda attiva e vengono eliminati quando chiudi la scheda o reimposti la pagina.

Convertitore colori esegue calcoli ed elaborazione direttamente nel browser con JavaScript lato client. Lo strumento legge i tuoi input, applica le opzioni visibili come Converti HEX, RGB, HSL, HSV e OKLCH in un unico passaggio e aggiorna il risultato senza inviare file o valori a un server. Questo mantiene la sessione locale, riduce i passaggi inutili e consente di riaprire la pagina quando le risorse restano nella cache dopo il primo caricamento.

Quando chiudi la scheda, i valori temporanei usati da Convertitore colori scompaiono con la sessione del browser. Preferenze generali come il tema possono restare in localStorage, ma file, risultati e contenuti inseriti nello strumento non vengono salvati come cronologia a lungo termine. Questa separazione conserva praticità senza creare una traccia duratura dei tuoi dati.