Cerca nel blog

Articolo:

venerdì 8 giugno 2018

Sketch non mostra i colori #hex come nel browser

Quasi sicuramente stai utilizzando un Mac con retina display recente. Noti che i colori in Sketch sono molto più vividi rispetto ad esempio al browser Chrome o Safari (o anche altrove).Il motivo è semplice: il profilo di colore utilizzato da Sketch, di default, è quello del  computer. Nel caso dei Mac retina quindi, la gamma cromatica P3 che offre uno spazio colore del 25% superiore(!!) rispetto ad altri display (Ecco il perché dei colori più vividi, diversi).
confronto gamma colori Display P3 e sRGB
Molti computer e telefoni però non hanno questa capacità e noi in primis siamo abituati allo spazio colore sRGB (che è lo standard attuale). Risulta quindi scomodo dover lavorare con dei colori falsati al computer.Per fortuna, a partire dalla versione 48 di Sketch, è possibile scegliere se continuare a utilizzare lo spazio colore del nostro Mac oppure un altro spazio colore, ammesso che il nostro computer lo supporti.
Nel caso dei Mac con retina display è quindi possibile scegliere di utilizzare sRGB invece che del Display P3 di default.
Per fare ciò basta andare in Preferences › General › Color Profile.
Se vuoi modificare la gamma cromatica di un lavoro già cominciato, allora devi andare in File › Change Color Profile…
Un esempio pratico di come possa fare la differenza questa impostazione, nonché il motivo per cui mi sono imbattuto in questo argomento, è: prendere dei valori #hex dal browser e provare a riprodurli su Sketch. Noterai, o hai già sperimentato, che i colori sono completamente diversi!
l’immagine mostra un quadrato in alto a sinistra arancione e uno screenshot di Google Chrome a destra
A sinistra il colore importato in Sketch (con il profilo di default Display P3), a destra lo stesso colore in Google Chrome. Quest’ultimo appare più spento.

Link