Loading…

Informazioni Selettore e Convertitore Colori Online

Carica un'immagine, incolla un colore o usa la ruota per catturare colori pixel-perfetti. Lo strumento esegue un'analisi completa lato client: normalizza il tuo HEX, calcola RGB/HSL/HSV/CMYK, converte in XYZ/LAB/LCH, calcola la luminanza e il contrasto WCAG, e genera palette armoniose. Puoi poi copiare qualsiasi formato come token pronto per CSS o usare le armonie per costruire un sistema di design coerente.

Cosa Può Fare Questo Selettore Colori

  • Campiona colori da immagini* o inizia da una ruota colori precisa o input HEX/RGB
  • Conversioni avanzate: HEX, HEX8, RGB/A, HSL/A, HSV, CMYK, XYZ, LAB, LCH
  • Controllore contrasto WCAG integrato contro #000000 e #FFFFFF usando luminanza relativa
  • Suggerimenti HEX web-safe e abbreviati quando applicabile
  • Armonie cromatiche: complementare, triadica, tetradica, analoga, monocromatica (calcolate tramite rotazione tonalità)
  • Anteprima luminanza e brillantezza percepita per anticipare problemi di contrasto
  • Abbinamento approssimato tipo Pantone basato sulla distanza RGB più vicina (con dataset memorizzato)
  • Analisi eseguita lato client; solo dati minimi utilizzati quando è abilitata l'opzione di ricerca Pantone

🔧 Come Usare il Selettore Colori for color-picker

1

1. Scegli o seleziona un colore base

Incolla un valore HEX, inserisci RGB/HSL, o usa il selettore per prendere un colore da un'immagine o dalla ruota. Lo strumento lo normalizza internamente in un valore HEX sicuro.

2

2. Affina tonalità e luminosità

Regola tonalità, saturazione e luminosità finché il campione non appare corretto. Un'anteprima ampia mostra il colore su superfici chiare e scure per contesto.

3

3. Leggi e copia i formati che ti servono

Copia HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK, XYZ, LAB e LCH con un clic. Usali per variabili CSS, design token o note di consegna.

4

4. Verifica contrasto WCAG

Vedi i rapporti di contrasto contro #000000 e #FFFFFF basati sulla luminanza sRGB. Usa i risultati per decidere rapidamente se un colore funziona per testo corpo, titoli grandi o elementi UI.

5

5. Genera armonie e costruisci una palette

Esplora colori complementari, triadici, tetradici, analoghi e monocromatici generati tramite rotazione tonalità. Aggiungi i tuoi preferiti a una palette/cronologia ed esportali come token.

Dettagli Tecnici

Gestione Input & Normalizzazione

Lo strumento accetta codici colore esadecimali e li converte in un HEX normalizzato a 6 cifre come riferimento interno.

AspettoComportamentoNote
Normalizzazione HEXHEX a 3 e 6 cifre, # iniziale opzionaleHEX breve (es. #0f8) viene espanso in #00ff88; i caratteri non esadecimali vengono rimossi.
Supporto HEX8RGBA tramite #RRGGBBAAIl canale alfa viene convertito in 0–255 e aggiunto come 4° byte.
Suggerimento web-safeArrotonda al più vicino passo 51 per canaleI valori vengono arrotondati al multiplo più vicino di 51 (0, 51, 102, 153, 204, 255).
Suggerimento HEX abbreviatoSolo quando comprimibileMostrato quando ogni coppia di cifre HEX è ripetuta (es. #112233 → #123).

Spazi Colore & Conversioni

Tutti i calcoli si basano su sRGB con un bianco di riferimento D65.

SpazioCalcoloUtilizzo
RGBDa HEX normalizzato (0–255 per canale)Rappresentazione base per le conversioni.
HSL / HSVTrasformazioni cilindriche standard da sRGBUtilizzato per modifiche intuitive e calcoli di armonia.
CMYKApprossimazione indipendente dal dispositivoCalcolato come 1−max(R,G,B) con componenti 0–100%; non legato a profili ICC.
XYZsRGB linearizzato → XYZ usando matrice D65Spazio intermedio per LAB/LCH e analisi più approfondita.
LABCIE L*a*b* da XYZSpazio metrico percettivamente più uniforme.
LCHCIE L*C*h° da LABUtile per regolazioni di tonalità/croma/luminosità e progettazione di palette percettive.

Luminanza & Contrasto WCAG

Il contrasto viene calcolato usando la formula standard della luminanza relativa WCAG.

AspettoDettagliNote
Luminanza relativaCalcolata da sRGB linearizzato (componente Y)Utilizza i coefficienti 0,2126R + 0,7152G + 0,0722B.
Rapporto di contrasto(L1 + 0,05) / (L2 + 0,05)Lo strumento riporta il contrasto rispetto a #000000 e #FFFFFF.
Soglie WCAGAA/AAA per testo normale e grandeSoglie tipiche: 4,5:1 (AA normale), 3:1 (AA grande), 7:1 (AAA normale), 4,5:1 (AAA grande).

Armonie e Colori Derivati

Le armonie sono generate come semplici rotazioni di tonalità in HSL, preservando saturazione e luminosità.

ArmoniaRegolaEsempio
Complementare+180° di tonalitàPunto opposto sulla ruota dei colori.
Triade±120° di tonalitàTre colori equidistanti.
Tetrade+90°, +180°, +270° di tonalitàQuattro colori che formano un rettangolo sulla ruota.
Analoghi−30° / +30° di tonalitàVicini attorno al colore base.
MonocromaticoSchiarisci/oscura in LVersioni più chiare e più scure della stessa tonalità.

Corrispondenza Simile a Pantone (Approssimativa)

Quando il dataset Pantone è disponibile, lo strumento calcola una corrispondenza più vicina nello spazio RGB.

AspettoComportamentoNote
Caricamento datasetCaricamento in cache + asincrono tramite getPantoneColors / getPantoneColorsCachedL'interfaccia utente può mostrare una corrispondenza istantaneamente quando la cache è calda, o dopo un breve caricamento asincrono.
Metrica di corrispondenzaDistanza euclidea quadratica su RGB (0–255)Approssimazione rapida e semplice; non è una metrica percettiva ΔE*.
OutputID e nome simili a PantoneVisualizzato solo a scopo orientativo; non è una mappatura ufficiale Pantone.

Prestazioni e Privacy

Le conversioni, la luminanza, il contrasto e le armonie sono calcolate interamente lato client. La ricerca Pantone può consultare un dataset locale o remoto a seconda della configurazione, ma i colori grezzi rimangono semplici stringhe HEX a meno che non li condividi o esporti esplicitamente.

Casi d'Uso Popolari

UI/UX & Front-End

  • Crea coppie accessibili primo piano/sfondo per pulsanti, link e testo.
  • Esporta variabili CSS e token di design direttamente dai colori scelti.
  • Verifica il contrasto per le modalità chiaro/scuro prima di implementare un commutatore di tema.
/* Token di colore CSS */
:root {
  --brand: #4caf50;
  --brand-rgb: 76, 175, 80;
  --on-brand: #0b0b0b;
}
.button-primary {
  background-color: var(--brand);
  color: var(--on-brand);
}

Branding e Identità Visiva

  • Deriva una palette primaria/secondaria/accenti da un singolo colore principale.
  • Esplora opzioni complementari o triadiche per un logo o una linea di prodotti.
  • Ottieni una denominazione approssimativa simile a Pantone prima di preparare una linea guida del brand.

Visualizzazione Dati e Dashboard

  • Definisci colori di serie che rimangano distinguibili su sfondi sia chiari che scuri.
  • Usa LAB/LCH per progettare palette con passi percettivi controllati.
  • Controlla rapidamente se i colori del grafico soddisfano le aspettative di contrasto nella legenda e nelle etichette.

❓ Frequently Asked Questions

Qual è la differenza tra HEX, RGB, HSL e HSV?

HEX è solo un modo compatto di scrivere valori RGB in base 16. RGB descrive le componenti rosso/verde/blu in sRGB. HSL e HSV sono modelli cilindrici più intuitivi: H è la tonalità sulla ruota dei colori, S è la saturazione e L/V controlla la luminosità o chiarezza.

Perché i valori CMYK sembrano approssimativi?

L'output CMYK reale dipende dai profili della stampante, inchiostro, carta e calibrazione. Questo strumento mostra un'approssimazione indipendente dal dispositivo utile per le decisioni di progettazione iniziali, ma il lavoro di stampa finale dovrebbe essere verificato con i profili ICC del fornitore di stampa.

A cosa servono LAB e LCH?

LAB e LCH sono più uniformi percettivamente rispetto al RGB grezzo. Passi numerici uguali in L o C tendono ad apparire più coerenti all'occhio, il che li rende ottimi per generare tinte, ombre e palette bilanciate o per misurare la distanza visiva tra i colori.

Come viene calcolato il contrasto?

Calcoliamo la luminanza relativa da sRGB usando la formula WCAG, quindi deriviamo il rapporto di contrasto (L1 + 0.05) / (L2 + 0.05). Il risultato viene confrontato con soglie comuni come 4.5:1 (AA testo normale) e 7:1 (AAA testo normale).

I nomi Pantone sono esatti?

No. Qualsiasi etichetta simile a Pantone è una corrispondenza approssimativa del vicino più prossimo nello spazio RGB ed è fornita solo a scopo orientativo. Per lavori critici per la produzione, convalida sempre con le librerie e gli strumenti ufficiali Pantone.

Memorizzate le mie immagini o colori?

I calcoli dei colori (formati, contrasto, armonie) vengono eseguiti lato client. A seconda della configurazione, i caricamenti di immagini e i dataset Pantone possono coinvolgere un server, ma lo strumento è progettato per l'elaborazione transitoria, non per l'archiviazione a lungo termine. Per risorse altamente confidenziali, preferisci strumenti locali/offline.

Pro Tips

Best Practice

Anteprima sempre i colori su superfici chiare e scure; la saturazione e il contrasto percepiti possono cambiare drasticamente con il contesto.

Best Practice

Usa LAB o LCH quando generi tinte e sfumature in modo che le variazioni di luminosità risultino più uniformi all'occhio umano.

Best Practice

Controlla il contrasto AA/AAA per tutti gli stati interattivi (hover, attivo, disabilitato), non solo per il colore predefinito del pulsante.

Best Practice

Esporta variabili CSS o token di design dalla scheda formati per mantenere i colori coerenti tra i tuoi componenti.

Best Practice

Quando campioni da immagini, fai la media su una piccola area invece di un singolo pixel per ridurre il rumore da compressione e anti-aliasing.

Additional Resources

WCAG 2.2 – Contrasto (Minimo)
Documentation
Modulo Colori CSS Livello 4
Documentation
MDN – Valori <color>
Documentation
Colorimetria CIE (XYZ/LAB)
Documentation

Other Tools