Immagina di scorrere le immagini e di trovare il colore perfetto: la tonalità esatta di cui hai bisogno per il tuo prossimo progetto di design. Ci sono alcuni fantastici strumenti su Internet per aiutarti a identificare colori specifici su qualsiasi app o sito web. Diamo un'occhiata ad alcune delle migliori opzioni di loro.
1. Utilizzo degli strumenti per sviluppatori sul browser Web Chrome
Un'opzione che puoi provare è lo strumento per sviluppatori Chrome. Chrome è dotato di molte funzioni utili per gli sviluppatori, che semplificano notevolmente le attività. Puoi utilizzare i seguenti passaggi per identificare colori specifici su qualsiasi app o sito web.
- Apri il sito web su cui desideri identificare un colore sul browser web Chrome
- Fai clic sull'icona a tre punti in alto a destra di Chrome. Apparirà un pop-up con una serie di opzioni.
- Fare clic su "Altri strumenti", quindi selezionare "Strumenti per sviluppatori" dal popup risultante.
- Usa Ctrl + Maiusc + I se vuoi saltare i passaggi precedenti
- Ora la finestra si divide in due schermate: il sito Web a sinistra e il codice del sito Web a destra
- Digita Ctrl + Maiusc + C sulla tastiera. Questo ti mostra tutti i dettagli di un particolare elemento sul sito web quando passiamo il cursore del mouse sugli elementi.
- Puoi trovare il codice colore dell'elemento insieme ad altre informazioni utili.
Esempio
Supponiamo che tu sia interessato ai codici colore specifici per alcuni elementi sul seguente sito Web:
Puoi scegliere gli strumenti per sviluppatori facendo clic sui tre punti nell'angolo dello schermo. Nel menu a discesa, seleziona Altri strumenti, quindi Strumenti per sviluppatori.
Lo schermo sarà diviso visivamente in due pagine. Vedrai il sito web a sinistra e il codice del sito a destra.
Digita il comando e scorciatoia "Ctrl + Maiusc + C" e passa il cursore del mouse sugli elementi del sito web. Questo mostrerà il colore di quell'elemento, insieme ad altre informazioni utili. Di seguito sono riportati due esempi in cui troviamo il colore della barra di navigazione e una dashboard sotto lo strumento di ricerca.
Qui possiamo trovare il codice colore sul pop up per la barra di navigazione. Il codice colore è #333333.
Il colore del cruscotto può essere trovato insieme ad altri dettagli utili. Colore: #333333, Colore di sfondo: #5D4A8E. Sebbene possa sembrare un po' intimidatorio all'inizio, il programma diventa molto più facile da usare con un po' di pratica.
2. Estensione cromata contagocce
Eye Dropper è un'estensione di Chrome popolare e ampiamente utilizzata per aiutarti a trovare determinati colori su qualsiasi sito Web o app.
Segui i passaggi seguenti per identificare colori specifici su un sito Web o un'app utilizzando lo strumento di estensione Eye Dropper.
- Apri qualsiasi sito web o app sul browser web Chrome
- Fare clic sull'icona dell'estensione del contagocce
- Seleziona "Scegli il colore dalla pagina web" e passa il cursore del mouse su diversi elementi dell'app o del sito web.
Puoi trovare il codice colore degli elementi elencati in basso a destra della pagina web.
Esempio
Ok, usiamo lo strumento di estensione del contagocce in un esempio di vita reale. Inizieremo aprendo un sito Web e premendo l'icona dell'estensione Eye Dropper
Quando passi il cursore su vari elementi del sito web, puoi vedere i codici colore apparire in una sezione in basso a destra dello schermo.
Quando passo il cursore sull'icona a forma di V, posso vedere il suo codice colore nella finestra in basso come menzionato. Il vantaggio di questo strumento è che puoi trovare anche il codice RGB insieme al codice colore esadecimale dell'elemento. Il metodo è flessibile da utilizzare per coloro che desiderano un modo semplice e veloce per acquisire i codici per i loro colori preferiti.