Selettore colore e convertitore HEX, RGB e altri formati

Il color picker da immagine della home page parte da una foto: carichi un'immagine e ne campioni i pixel. Questa pagina parte invece da un valore di colore. Usala quando conosci già il codice HEX (dalle linee guida del brand, da uno screenshot o da un collega) e ti servono le conversioni, le varianti, le verifiche di accessibilità e gli snippet di codice che lo accompagnano.

Esadecimale a tre, quattro, sei o otto cifre, con o senza cancelletto; rgb() e rgba() con virgole o spazi; hsl() e hsla(); e una qualsiasi delle 148 parole chiave di colore CSS come rebeccapurple o cornflowerblue. Se il valore non è leggibile, il colore attuale resta invariato invece di azzerarsi.

HSL non è percettivamente uniforme: due colori con la stessa luminosità HSL possono apparire molto diversi per luminosità percepita, ed è per questo che le palette generate in HSL risultano irregolari. OKLCH risolve la cosa, ed è supportato da ogni browser attuale. È proprio per questo che le varianti, le armonie e il colore accessibile suggerito in questa pagina sono tutti calcolati in OKLCH.

È la formula standard non calibrata, quella che usa la maggior parte degli strumenti web, e va bene per un'idea di massima. Non è una conversione con gestione del colore: un vero lavoro di stampa richiede un profilo ICC per quella specifica macchina e quella specifica carta. Prendi il valore CMYK di qui come punto di partenza da passare alla tipografia, non come specifica definitiva.

È la distanza CIEDE2000 fra due colori, una misura di quanto appaiono diversi. Sotto 1, nessuno vede la differenza. Intorno a 2, un osservatore attento la nota mettendo i colori affiancati. Sopra 10, sembrano colori diversi. Rispecchia ciò che vediamo molto meglio del confronto fra valori RGB.

Con la formula delle WCAG 2.1: la luminanza relativa di ciascun colore in luce lineare, poi (il più chiaro + 0,05) / (il più scuro + 0,05). Il livello AA richiede 4,5:1 per il corpo del testo e 3:1 per il testo grande o i componenti di interfaccia; il livello AAA richiede 7:1 e 4,5:1. Il rapporto ignora del tutto la tonalità, ed è per questo che due colori possono sembrare molto diversi e non passare comunque.

No. Tutti i calcoli sul colore sono inclusi nella pagina come JavaScript e girano interamente nel tuo browser. Cambiare colore non genera alcuna chiamata API, non viene registrato nulla e, una volta caricata, la pagina funziona anche offline.

Sì. Un valore di colore non è tutelabile dal diritto d'autore e qui non c'è nulla sotto licenza. Le scale, le armonie e i frammenti di codice generati sono tuoi, per qualsiasi progetto. Da tenere presente: un colore specifico può comunque far parte di un marchio registrato quando è abbinato a un logo o a una categoria di prodotti precisa, quindi copiare il colore esatto di un concorrente è una questione legale più che tecnica.

Incolla il codice HEX nel campo in cima a questa pagina. Viene convertito subito in RGB, HSL, HSV, CMYK, OKLCH e altri 28 formati, e ogni valore si copia con un clic. Le sei cifre HEX sono tre coppie, rosso, verde e blu, che vanno da 00 a FF, cioè da 0 a 255 in RGB.

Per il testo normale, il livello AA delle WCAG chiede almeno 4,5:1 tra testo e sfondo, e il livello AAA chiede 7:1. Il testo grande (24 px, o circa 19 px in grassetto) richiede 3:1 per l'AA. Inserisci i tuoi due colori nella verifica del contrasto di questa pagina per vedere il rapporto e quali livelli superano.

Usa il simulatore di daltonismo di questa pagina. Mostra il tuo colore come lo vedono le persone con protanopia, deuteranopia, tritanopia e acromatopsia, ed elenca colori vicini che per loro sembrerebbero uguali. Se due stati si distinguono solo per rosso e verde, aggiungi anche una forma, un'icona o un'etichetta.