Hoe een specifieke kleur op een app of website te identificeren

Stel je voor dat je door afbeeldingen bladert en je vindt de perfecte kleur - de exacte tint die je nodig hebt voor je volgende ontwerpproject. Er zijn een aantal geweldige tools op internet om u te helpen specifieke kleuren op elke app of website te identificeren. Laten we eens kijken naar enkele van de beste opties voor hen.

1. Ontwikkelaarstools gebruiken in de Chrome-webbrowser

Een optie die u kunt proberen, is de Chrome Developer-tool. Chrome wordt geleverd met veel handige functies voor ontwikkelaars, waardoor taken veel gemakkelijker uit te voeren zijn. U kunt de volgende stappen gebruiken om specifieke kleuren op elke app of website te identificeren.

• Open de website waarop u een kleur wilt identificeren in de Chrome-webbrowser
• Klik op het pictogram met de drie stippen rechtsboven in Chrome. Er verschijnt een pop-up met een heleboel opties.
• Klik op 'More Tools' en selecteer vervolgens 'Developer tools' in de resulterende pop-up.
• Gebruik Ctrl + Shift + I als je de bovenstaande stappen wilt overslaan
• Nu splitst het venster zich in twee schermen: de website aan de linkerkant en de code van de website aan de rechterkant
• Typ Ctrl + Shift + C op je toetsenbord. Dit toont u alle details van een bepaald element op de website wanneer we onze muiscursor op de elementen plaatsen.
• U vindt de kleurcode van het element samen met andere nuttige informatie.

Voorbeeld

Stel dat u geïnteresseerd bent in de specifieke kleurcodes voor sommige elementen op de volgende website:

U kunt de ontwikkelaarstools kiezen door op de drie stippen in de hoek van uw scherm te klikken. Selecteer in het vervolgkeuzemenu Meer hulpprogramma's en vervolgens Hulpprogramma's voor ontwikkelaars.

Het scherm wordt visueel verdeeld in twee pagina's. U ziet de website aan de linkerkant en de code van de site aan de rechterkant.

Typ de opdracht en snelkoppeling "Ctrl + Shift + C" en beweeg de muiscursor over de elementen van de website. Dit toont de kleur van dat element, samen met andere nuttige informatie. Hieronder staan ​​twee voorbeelden waar we de kleur van de navigatiebalk en een dashboard onder de zoekfunctie vinden.

Hier kunnen we de kleurcode vinden in de pop-up voor de navigatiebalk. De kleurcode is #333333.

De kleur van het dashboard is terug te vinden samen met andere handige details. Kleur: #333333, Achtergrondkleur: #5D4A8E. Hoewel het er in het begin misschien een beetje intimiderend uitziet, wordt het programma veel gemakkelijker te gebruiken met een beetje oefening.

2. Chrome-extensie voor oogdruppelaar

Eye Dropper is een populaire en veelgebruikte Chrome-extensie waarmee u bepaalde kleuren op elke website of app kunt vinden.

Volg de onderstaande stappen om specifieke kleuren op een website of app te identificeren met behulp van de Eye Dropper-extensietool.

• Open een website of app in de Chrome-webbrowser
• Klik op het pictogram van de druppelaarextensie
• Selecteer 'Kleur kiezen uit webpagina' en beweeg uw muiscursor over verschillende elementen in de app of website.

De kleurcode van de genoemde elementen vindt u rechtsonder op de webpagina.

Voorbeeld

Oké, laten we de pipetverlengingstool gebruiken in een echt voorbeeld. We beginnen met het openen van een website en klikken op het extensiepictogram van de oogdruppelaar

Wanneer je met je cursor over verschillende elementen van de website beweegt, zie je de kleurcodes verschijnen in een sectie rechtsonder in het scherm.

Wanneer ik mijn cursor op het V-vormige pictogram beweeg, zie ik de kleurcode in het onderste venster zoals vermeld. Het voordeel van deze tool is dat je naast de hexadecimale kleurcode van het element ook de RGB-code kunt vinden. De methode is flexibel te gebruiken voor diegenen die een eenvoudige en snelle manier willen om de codes voor hun favoriete kleuren te pakken.