Hvordan identifisere spesifikk farge på en app eller et nettsted

Se for deg at du blar gjennom bildene og finner den perfekte fargen – akkurat den nyansen du trenger for ditt neste designprosjekt. Det er noen fantastiske verktøy på internett for å hjelpe deg med å identifisere spesifikke farger på en hvilken som helst app eller nettside. La oss ta en titt på noen av de beste alternativene.

1. Bruke utviklerverktøy på Chrome nettleser

Et alternativ du kan prøve er Chrome-utviklerverktøyet. Chrome kommer med mange nyttige funksjoner for utviklere, noe som gjør oppgaver mye enklere å utføre. Du kan bruke følgende trinn for å identifisere spesifikke farger på en hvilken som helst app eller nettside.

• Åpne nettstedet der du vil identifisere en farge i Chrome-nettleseren
• Klikk på ikonet med tre prikker øverst til høyre i Chrome. En popup med en rekke alternativer vises.
• Klikk på "Flere verktøy" og velg deretter "Utviklerverktøy" fra det resulterende popup-vinduet.
• Bruk Ctrl + Shift + I hvis du vil hoppe over trinnene ovenfor
• Nå deler vinduet seg i to skjermer – nettstedet til venstre og koden til nettstedet til høyre
• Skriv inn Ctrl + Shift + C på tastaturet. Dette viser deg alle detaljene til et bestemt element på nettstedet når vi holder musepekeren på elementene.
• Du kan finne fargekoden til elementet sammen med annen nyttig informasjon.

Eksempel

La oss si at du er interessert i de spesifikke fargekodene for enkelte elementer på følgende nettsted:

Du kan velge utviklerverktøyene ved å klikke på de tre prikkene i hjørnet av skjermen. I rullegardinmenyen velger du Flere verktøy og deretter Utviklerverktøy.

Skjermen vil bli visuelt delt inn i to sider. Du vil se nettstedet til venstre og nettstedets kode til høyre.

Skriv inn kommandoen og snarveien "Ctrl + Shift + C" og hold musepekeren over elementene på nettstedet. Dette vil vise fargen på det elementet, sammen med annen nyttig informasjon. Nedenfor er to eksempler hvor vi finner fargen på navigasjonslinjen og et dashbord under søkeverktøyet.

Her kan vi finne fargekoden på popup-vinduet for navigasjonslinjen. Fargekoden er #333333.

Fargen på dashbordet finner du sammen med andre nyttige detaljer. Farge: #333333, Bakgrunnsfarge: #5D4A8E. Selv om det kan se litt skremmende ut i begynnelsen, blir programmet mye enklere å bruke med litt trening.

2. Eye Dropper Chrome Extension

Eye Dropper er en populær og mye brukt Chrome-utvidelse for å hjelpe deg med å finne bestemte farger på hvilken som helst nettside eller app.

Følg trinnene nedenfor for å identifisere spesifikke farger på et nettsted eller en app ved å bruke Eye Dropper-utvidelsesverktøyet.

• Åpne en hvilken som helst nettside eller app i Chrome-nettleseren
• Klikk på Eye Dropper-utvidelsesikonet
• Velg "Velg farge fra nettside" og hold musepekeren over forskjellige elementer på appen eller nettstedet.

Du finner fargekoden til elementene oppført nederst til høyre på nettsiden.

Eksempel

Ok, la oss bruke pipetteforlengelsesverktøyet i et virkelighetseksempel. Vi begynner med å åpne et nettsted og trykke på Eye Dropper-utvidelsesikonet

Når du holder markøren over ulike elementer på nettsiden, kan du se fargekodene vises i en seksjon nederst til høyre på skjermen.

Når jeg holder markøren over det V-formede ikonet, kan jeg se fargekoden i det nederste vinduet som nevnt. Fordelen med dette verktøyet er at du også kan finne RGB-koden sammen med hex-fargekoden til elementet. Metoden er fleksibel å bruke for de som ønsker en enkel og rask måte å hente kodene til favorittfargene sine.