Come identificare un colore specifico su unapp o un sito Web

Che si tratti di progettazione di siti web e app, di trasmissione di emozioni, di branding o di miglioramento dell'esperienza degli utenti, i colori svolgono sicuramente un ruolo fondamentale. Tuttavia, trovare il colore o la combinazione di colori giusti è più facile a dirsi che a farsi. Per fortuna, ci sono alcuni strumenti a nostra disposizione per identificare colori specifici su un'app o un sito Web, in modo da poter scegliere e salvare i colori che hanno attirato la nostra attenzione.

Immagina di scorrere un sito Web e di trovare il colore perfetto, la tonalità esatta di cui hai bisogno per il tuo prossimo progetto. Bene, allora lascia che ti aiutiamo a trovare il colore esatto degli sfondi o di qualsiasi altro elemento su un sito Web o un'app.

1. Trova il codice colore HEX sui siti Web utilizzando strumenti Web o siti Web

Uno dei modi più semplici per ottenere il codice colore da un sito Web è utilizzare strumenti Web dedicati e siti Web di selezione dei colori. Non importa quale browser utilizzi, sia esso basato su Chromium , con compatibilità deep web o Safari predefinito di Apple, questo metodo è applicabile.

Inoltre, che tu stia utilizzando un Mac, un laptop Windows, un iPhone, un iPad o un dispositivo Android, questi strumenti web per l'identificazione dei colori saranno un'utile aggiunta al tuo arsenale. Abbiamo testato alcune opzioni ed ecco quella più adatta a noi.

Passaggio 1 : apri il browser e vai su ImageColorPicker.com

ImageColorPicker

Passaggio 2 : fare clic/toccare su Usa la tua immagine per fornire l'URL del sito web/dell'immagine o caricare l'immagine.

Passaggio 3 : ora puoi:

• Copia l'indirizzo del sito web
• Copia l'immagine o il suo URL
• Fai uno screenshot della pagina

Passaggio 4 : una volta elaborata l'immagine, puoi spostare il cursore per scegliere il colore.

Passaggio 5 : di conseguenza, vedrai il codice HEX o RGB, copia/incolla e utilizzalo secondo necessità.

Se non ti piace ImageColorPicker.com o desideri più opzioni, puoi provare i seguenti siti Web.

Selettore colore RedKetchup

Codici colore HTML

Strumenti di pino

Tuttavia, a differenza di ImageColorPicker, questi siti Web non supportano URL di siti Web o immagini. Si affidano a te per caricare le immagini. Quindi, dovrai prendere screenshot, caricarli e poi trovare il colore.

2. Scegli il colore da un sito Web tramite un software di fotoritocco

Se utilizzi uno strumento di fotoritocco, non hai davvero bisogno di cercare oltre. Che si tratti di software avanzati di fotoritocco come Photoshop o di strumenti online come Canva, la maggior parte dei software di fotoritocco è dotata di un pratico strumento per la selezione dei colori/contagocce, tra cui Quick Look di Mac e l'editor di screenshot di iPhone .

Tuttavia, non tutti potrebbero aiutarti a ottenere il codice colore da un sito Web o da un'app. Ti permetteranno di scegliere e utilizzare il colore all'interno della loro finestra. Se per te va bene, vai avanti e utilizza uno strumento di fotoritocco di tua scelta per identificare colori specifici, prendiamo Canva come esempio.

Passaggio 1 : fai uno screenshot del sito Web o dell'app.

Passaggio 2 : apri Canva su un browser (o un'app sul tuo dispositivo mobile).

Passaggio 3 : seleziona una tela e carica l'immagine.

Passaggio 4 : Successivamente, apri qualsiasi strumento relativo al colore, testo, disegno, elementi, ecc.

Passaggio 5 : seleziona la casella del colore, quindi fai clic sull'icona "+ Aggiungi un nuovo colore".

Passaggio 6 : scorrere fino al colore e fare clic/toccare per selezionare il colore desiderato.

3. Utilizza il selettore colori in Firefox per trovare colori da qualsiasi sito web

Oltre al software di fotoritocco, il browser Firefox vanta anche uno strumento contagocce integrato. Anche se è un po' nascosto, scopriamo il trucco.

Passaggio 1 : avvia Firefox e apri il sito Web da cui desideri scegliere un colore.

Passaggio 2 : tocca l'icona a tre righe nell'angolo in alto a destra

Passaggio 3 : seleziona Altri strumenti e poi Contagocce.

Passaggio 4 : ora sposta semplicemente il cursore sul colore che desideri identificare, Firefox troverà immediatamente il codice colore esadecimale e te lo presenterà.

Passaggio 5 : in particolare, il contagocce continuerà a ispezionare e fornire codici colore fino all'uscita. Per chiudere lo strumento è sufficiente fare clic in un punto qualsiasi dello schermo.

Proprio come Firefox, anche Chrome dispone di alcuni strumenti per sviluppatori che possono aiutarti a identificare colori specifici su un sito web. Tuttavia, c'è un problema; Scopriamolo.

4. Utilizza gli strumenti per sviluppatori di Chrome per scegliere i colori

Lo strumento di selezione dei colori di Google Chrome è piuttosto limitato. Questo trucco può riconoscere solo i colori degli elementi codificati nel sito web, ovvero i colori menzionati nei codici. Pertanto, non è possibile ottenere informazioni relative al colore sugli elementi importati come loghi, immagini, ecc.

Passaggio 1 : avvia Chrome e apri il sito Web da cui desideri scegliere un colore.

Passaggio 2 : quindi, fai clic sull'icona a tre punti nell'angolo in alto a destra.

Passaggio 3 : seleziona Altri strumenti, quindi Strumenti per sviluppatori.

Nota : lo schermo verrà diviso visivamente in due pagine. Vedrai il sito web a sinistra e il codice del sito a destra.

Passaggio 4 : per scegliere un colore dal sito Web, digita Ctrl + Maiusc + C e sposta il cursore sul colore che desideri selezionare.

Passaggio 5 : ora puoi visualizzare il codice colore dello sfondo, del testo o dell'elemento.

5. Utilizza le estensioni del browser per trovare il codice esadecimale di un colore sui siti web

Le estensioni del browser non solo possono aumentare la tua produttività ma anche rendere l'identificazione del colore ancora più comoda. Per fortuna, i browser più comuni, inclusi Chrome e Firefox, hanno tali estensioni nel loro arsenale.

Estensione Chrome per identificare il colore

Selettore colore esadecimale

Contagocce

Contagocce colore

Estensione per Firefox per identificare il colore

ColorZilla

Contagocce Colorpick

Una volta aggiunta l'estensione desiderata al tuo browser, il resto è un gioco da ragazzi. Apri il sito web → seleziona l'estensione dalla barra dei menu → porta il cursore sul colore → ottieni il codice colore.

Scegli il tuo colore

Che tu sia un designer, uno sviluppatore o qualcuno che è curioso di sapere un colore che hai incontrato, identificare colori specifici su un'app o un sito Web è un'abilità utile. Pertanto, abbiamo trattato diversi metodi e strumenti per aiutarti a trovare quel codice colore o nome colore sfuggente.

Spero che possiamo esserti utili. Se hai bisogno di altri trucchetti o suggerimenti o hai bisogno di risposte ad alcune domande sconcertanti legate alla tecnologia, la sezione dei commenti è sempre aperta.