Selettore Colore

WCAG (Web Content Accessibility Guidelines) definisce i rapporti minimi di contrasto tra il testo e il suo sfondo per garantire la leggibilità alle persone con scarsa visione o daltonismo. AA è il minimo legale nella maggior parte delle giurisdizioni: 4.5:1 per il testo normale (sotto 18pt/14pt bold), 3:1 per il testo grande. AAA è lo standard potenziato: 7:1 per il testo normale, 4.5:1 per il testo grande. Circa l'8% degli uomini e lo 0.5% delle donne hanno qualche forma di deficit della visione dei colori, rendendo la conformità del contrasto essenziale per i prodotti rivolti al pubblico. Il verificatore qui testa contemporaneamente i colori del testo e dello sfondo e mostra quali combinazioni superano o falliscono il test.

Entrambi utilizzano Hue (0-360 gradi) e Saturation, ma differiscono nel terzo canale. HSL (Lightness) imposta il 50% come colore puro saturo, lo 0% come nero e il 100% come bianco — rendendolo intuitivo per CSS e design. HSV (Value/Brightness) imposta il 100% Value come un colore puro saturo e lo 0% come nero — non c'è bianco puro in HSV a meno che la Saturation non sia allo 0%. Adobe Photoshop, Illustrator e la maggior parte dei selettori di colore nativi dei sistemi operativi utilizzano HSV. CSS e gli strumenti di web design utilizzano tipicamente HSL. Questo strumento converte istantaneamente tra entrambi.

I valori CMYK mostrati sono una conversione matematica da RGB utilizzando la formula standard. Sono un'approssimazione utile per i flussi di lavoro da digitale a stampa, ma il colore di stampa reale dipende fortemente dalla stampante specifica, dall'inchiostro, dalla carta e dal profilo colore ICC in uso. Per lavori di stampa professionali, verifica sempre i colori finali rispetto a prove fisiche o consulta le specifiche colore del servizio di stampa. I valori CMYK qui riportati funzionano bene per le decisioni di colore nelle fasi iniziali e per l'anteprima di stampa.

Clicca sulla sezione Presets e scegli tra Tailwind CSS o Material Design. Ogni palette mostra la scala completa dei colori (ad esempio, Tailwind blue-50 fino a blue-950, o Material red 100 fino a 900). Clicca su qualsiasi campione per caricare quel colore nel selettore e ottenere istantaneamente i suoi valori HEX, RGB, HSL e altri. Questo è utile quando si costruisce all'interno di un sistema di design esistente — puoi copiare il formato esatto di cui hai bisogno (ad esempio, il valore HSL di Tailwind blue-600) senza doverlo cercare altrove.

I colori salvati sono memorizzati nella localStorage del tuo browser — persistono tra le sessioni sullo stesso dispositivo e browser, ma non sono sincronizzati con un server o tra diversi dispositivi. Vengono inoltre eliminati se cancelli i dati del tuo browser. Per i colori che vuoi conservare a lungo termine, copia i valori HEX in un documento di design o salvali nella libreria colori del tuo strumento di progettazione. Non è richiesto alcun account o login.

Sì. Puoi digitare o incollare un codice HEX direttamente nel campo di input HEX (con o senza il prefisso #) e il selettore e tutti gli altri campi di formato si aggiorneranno immediatamente. Puoi anche regolare i cursori Hue, Saturation e Lightness direttamente se desideri modificare una proprietà specifica senza cambiare le altre. Questo è utile quando hai un codice hex da un file di design e vuoi verificarne il contrasto o convertirlo in un altro formato.

No. Tutte le operazioni di selezione del colore, conversione dei formati, calcoli del contrasto e salvataggio delle palette vengono eseguite interamente nel tuo browser utilizzando JavaScript. Nessun valore di colore, nessuna palette salvata e nessun dato sull'utilizzo viene inviato a qualsiasi server. Lo strumento funziona completamente offline una volta caricata la pagina.