Estrazione dall'immagine
Lasciare l'immagine qui, incollare (Ctrl+V), oppure
Colori recenti
Estrattore di colori esadecimali e di immagini
Un fine settimana ho passato troppo tempo a cercare di abbinare il viola del logo di un cliente in Figma, per poi rendermi conto che il codice esadecimale che avevo copiato era leggermente sbagliato perché l'avevo preso da uno screenshot JPEG compresso invece che dal file originale. La differenza tra #895BF5 e #8B5CF6 è praticamente invisibile sullo schermo, a meno che non li si metta uno accanto all'altro su uno sfondo bianco, e allora è incredibilmente ovvio e fastidioso. Questo è il genere di cose che mi ha fatto desiderare un selezionatore di colori che faccia tutto in un unico posto: prendere il colore, vederlo in ogni formato, controllare come appare con il testo, fatto. Usate quello qui sopra, scegliete il colore o inserite un'immagine e avrete HEX, RGB, HSL, HSV e CMYK in un colpo solo.
Cosa c'è qui dentro
Il picker principale offre un pad di saturazione-luminosità con un cursore di tonalità sotto, che è abbastanza standard, ma la parte che uso di più è l'estrazione dell'immagine. Si inserisce uno screenshot o si incolla dagli appunti e si fa clic su un punto qualsiasi per estrarre i colori esatti: è molto più affidabile che non guardare a occhio nel campionatore di colori di Photoshop, soprattutto quando si lavora a partire da una foto di riferimento o da una risorsa del marchio che qualcuno ci ha inviato in formato PNG. La striscia dei colori recenti mantiene visibili le ultime scelte, il che sembra una cosa da poco, ma risparmia un'assurda quantità di passaggi avanti e indietro quando si cerca di costruire una tavolozza da zero.
Ogni colore viene emesso in cinque formati: HEX, RGB, HSL, HSV e CMYK. C'è un pulsante “Copia tutti i formati” se si vuole avere tutto negli appunti in una volta sola, il che è veramente utile quando si sta documentando una guida di stile e si devono incollare tutti i valori in un foglio di calcolo o in una tabella Notion. L'anno scorso tenevo un foglio di Google con le specifiche dei colori per circa quaranta siti diversi e copiare ogni formato singolarmente dal selezionatore di colori di DevTools di Chrome mi mandava in bestia, era così noioso per qualcosa che avrebbe dovuto richiedere un secondo.
La sezione armonie di colore genera tavolozze complementari, analoghe, triadiche, split-complementari, tetradiche e quadrate a partire dal colore scelto. Ogni armonia ha un pulsante “Copia CSS” che fornisce l'intero set di proprietà personalizzate CSS. Onestamente, le modalità triadica e tetradica sono quelle che scelgo quando ho bisogno di uno schema di colori veloce: la complementare è troppo ovvia per la maggior parte dei progetti e l'analoga può risultare un po' piatta, a meno che non si voglia deliberatamente ottenere un look monocromatico. Detto questo, se si sta costruendo qualcosa che deve sembrare rilassante o coeso, l'analogico è sottovalutato e funziona meglio di quanto si creda.
C'è anche una striscia di tinte e sfumature che genera variazioni più chiare e più scure del colore selezionato in passi regolari, il che è il genere di cose che Tailwind CSS fa automaticamente con le sue scale di colore, ma che altrimenti dovreste calcolare manualmente regolando il valore di luminosità in HSL. L'anteprima del contrasto in alto mostra il colore con il testo scuro e quello chiaro sovrapposti, in modo da poter verificare a occhio se supererà i controlli di accessibilità - non è un calcolatore completo del rapporto di contrasto WCAG, quindi se avete bisogno di rapporti esatti per la conformità, dovrete ricorrere a un verificatore di contrasto dedicato. Ma per un rapido controllo istintivo durante la scelta dei colori del marchio o degli accenti dell'interfaccia utente, fa il suo dovere.
Una cosa da dire sui valori CMYK: sono calcolati a partire da RGB, il che significa che sono approssimativi. Se state inviando qualcosa a una stampante commerciale (biglietti da visita, imballaggi, ecc.), dovete lavorare con un profilo di colore CMYK corretto in InDesign o Illustrator, e non convertire i colori dello schermo. L'output CMYK va bene per avere un'idea approssimativa dell'aspetto di un colore in termini di stampa ed è abbastanza vicino per i mockup digitali, ma non corrisponderà a un campione Pantone. Vale la pena di saperlo.
FAQ
Qual è la differenza tra i formati di colore HEX, RGB e HSL?
Sono tre modi per descrivere lo stesso colore. HEX è un codice di sei caratteri utilizzato nei CSS e negli strumenti di progettazione - #895BF5, ad esempio. RGB suddivide il colore in valori dei canali rosso, verde e blu da 0 a 255, che è il modo in cui gli schermi rendono effettivamente il colore. HSL descrive il colore in termini di tinta (la posizione della ruota dei colori, 0-360°), saturazione (quanto è vivido) e luminosità (quanto è chiaro o scuro). La maggior parte degli sviluppatori web utilizza di default l'HEX perché è compatto, ma l'HSL è probabilmente più intuitivo se si sta cercando di regolare un colore a mano: aumentare la luminosità di 10% è molto più semplice che indovinare quale canale RGB modificare.
È possibile estrarre i colori esatti da un'immagine caricata?
Sì: rilasciare un'immagine nell'area di estrazione o incollarne una dagli appunti con Ctrl+V, quindi fare clic su un punto qualsiasi per prendere il colore in quel pixel. Tenete presente che se l'immagine è un JPEG compresso, i colori estratti potrebbero essere leggermente diversi dall'originale a causa degli artefatti della compressione. Ciò è particolarmente evidente con i gradienti e i colori solidi del marchio che sono stati sottoposti alla compressione dei social media. Per ottenere risultati più precisi, utilizzare un PNG o un file sorgente non compresso.
I valori CMYK sono sufficientemente precisi per la stampa?
Si tratta di approssimazioni. I valori CMYK sono convertiti matematicamente da RGB, che è un modello di colore per lo schermo e non tiene conto del comportamento dell'inchiostro, della carta o del profilo di colore specifico utilizzato dalla stampante. Per un riferimento approssimativo o per un mockup digitale, vanno benissimo. Ma se state inviando i file a uno stampatore commerciale per biglietti da visita o imballaggi, dovreste lavorare con un profilo CMYK dedicato in InDesign o Illustrator, possibilmente con riferimenti Pantone. Il divario tra la conversione RGB in CMYK e l'effettivo risultato di stampa può essere sorprendentemente grande, soprattutto con i viola brillanti e i verdi saturi che semplicemente non si riproducono bene in CMYK.
Come funzionano le armonie di colore?
Le armonie cromatiche si basano sulle relazioni geometriche della ruota dei colori. I complementari accoppiano due colori direttamente opposti (come il viola e il giallo-verde), gli analoghi raggruppano i vicini sulla ruota e i triadici spaziano tre colori a 120° l'uno dall'altro. Il calcolo è fatto in HSL: il complementare aggiunge solo 180° alla tinta, il triadico aggiunge 120° e 240°, e così via. Non si tratta di raggruppamenti arbitrari, ma di principi di teoria del colore utilizzati da secoli nella pittura e nel design. Il pulsante “Copia CSS” esporta l'intera armonia come proprietà personalizzata, in modo da poterla inserire direttamente in un foglio di stile.
L'anteprima del contrasto verifica la conformità alle WCAG per l'accessibilità?
Non completamente. L'anteprima mostra il colore con il testo scuro e chiaro sovrapposti, in modo da poter vedere a colpo d'occhio se è leggibile, ma non calcola un numero specifico di rapporto di contrasto. Le WCAG 2.1 richiedono un rapporto minimo di 4,5:1 per il testo normale e di 3:1 per il testo grande; se avete bisogno di verificare questi numeri esatti per la conformità all'accessibilità, un verificatore del rapporto di contrasto dedicato vi fornirà i valori precisi e un risultato di accettazione/rifiuto. L'anteprima è più che altro un rapido controllo della correttezza mentre si scelgono i colori, non un sostituto di una verifica vera e propria.