Sådan identificerer du specifik farve på en app eller hjemmeside

Forestil dig, at du scroller gennem billeder, og du finder den perfekte farve – den nøjagtige nuance, du har brug for til dit næste designprojekt. Der er nogle fantastiske værktøjer på internettet til at hjælpe dig med at identificere specifikke farver på enhver app eller hjemmeside. Lad os tage et kig på nogle af de bedste muligheder dem.

1. Brug af udviklerværktøjer på Chrome-webbrowseren

En mulighed, du kan prøve, er Chrome-udviklerværktøjet. Chrome kommer med en masse nyttige funktioner til udviklere, hvilket gør opgaver meget nemmere at udføre. Du kan bruge følgende trin til at identificere specifikke farver på enhver app eller hjemmeside.

• Åbn det websted, hvor du vil identificere en farve i Chrome-webbrowseren
• Klik på ikonet med tre prikker øverst til højre i Chrome. En pop op med en masse muligheder vises.
• Klik på 'Flere værktøjer' og vælg derefter 'Udviklerværktøjer' fra den resulterende pop op.
• Brug Ctrl + Shift + I, hvis du vil springe ovenstående trin over
• Nu deler vinduet sig i to skærme – hjemmesiden til venstre og koden til hjemmesiden til højre
• Indtast Ctrl + Shift + C på dit tastatur. Dette viser dig alle detaljerne for et bestemt element på hjemmesiden, når vi holder musemarkøren over elementerne.
• Du kan finde elementets farvekode sammen med andre nyttige oplysninger.

Eksempel

Lad os sige, at du er interesseret i de specifikke farvekoder for nogle elementer på følgende websted:

Du kan vælge udviklerværktøjerne ved at klikke på de tre prikker i hjørnet af din skærm. I rullemenuen skal du vælge Flere værktøjer og derefter Udviklerværktøjer.

Skærmen bliver visuelt opdelt i to sider. Du vil se webstedet til venstre og webstedets kode til højre.

Indtast kommandoen og genvej "Ctrl + Shift + C", og hold musemarkøren over elementerne på webstedet. Dette vil vise farven på dette element sammen med andre nyttige oplysninger. Nedenfor er to eksempler, hvor vi finder farven på navigationslinjen og et dashboard under søgeværktøjet.

Her kan vi finde farvekoden på pop op-vinduet til navigationslinjen. Farvekoden er #333333.

Farven på instrumentbrættet kan findes sammen med andre nyttige detaljer. Farve: #333333, Baggrundsfarve: #5D4A8E. Selvom det måske ser lidt skræmmende ud i starten, bliver programmet meget nemmere at bruge med lidt øvelse.

2. Eye Dropper Chrome Extension

Eye Dropper er en populær og meget brugt Chrome-udvidelse til at hjælpe dig med at finde bestemte farver på enhver hjemmeside eller app.

Følg nedenstående trin for at identificere specifikke farver på et websted eller en app ved hjælp af Eye Dropper-udvidelsesværktøjet.

• Åbn en hvilken som helst hjemmeside eller app i Chrome-webbrowseren
• Klik på Eye Dropper-udvidelsesikonet
• Vælg 'Vælg farve fra webside', og hold musemarkøren over forskellige elementer på appen eller webstedet.

Du kan finde farvekoden for de elementer, der er angivet nederst til højre på websiden.

Eksempel

Okay, lad os bruge pipetteudvidelsesværktøjet i et virkeligt eksempel. Vi starter med at åbne et websted og trykke på Eye Dropper-udvidelsesikonet

Når du holder markøren over forskellige elementer på hjemmesiden, kan du se farvekoderne vises i et afsnit nederst til højre på skærmen.

Når jeg holder min markør på det V-formede ikon, kan jeg som nævnt se dets farvekode i det nederste vindue. Fordelen ved dette værktøj er, at du også kan finde RGB-koden sammen med elementets hex-farvekode. Metoden er fleksibel at bruge for dem, der ønsker en enkel og hurtig måde at få fat i koderne til deres yndlingsfarver.