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:

Hoe een specifieke kleur op een app of website te identificeren

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.

Hoe een specifieke kleur op een app of website te identificeren

Hoe een specifieke kleur op een app of website te identificeren

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.

Hoe een specifieke kleur op een app of website te identificeren

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.

Hoe een specifieke kleur op een app of website te identificeren

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.

Hoe een specifieke kleur op een app of website te identificeren

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.

Hoe een specifieke kleur op een app of website te identificeren

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

Hoe een specifieke kleur op een app of website te identificeren

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

Hoe een specifieke kleur op een app of website te identificeren

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.



Leave a Comment

Hoe u Google Chrome kunt dwingen altijd volledige URLs weer te geven

Hoe u Google Chrome kunt dwingen altijd volledige URLs weer te geven

Chrome toont standaard niet de volledige URL. Dit detail interesseert u misschien niet zoveel, maar als u om wat voor reden dan ook de volledige URL wilt weergeven, vindt u gedetailleerde instructies over hoe u Google Chrome de volledige URL in de adresbalk kunt laten weergeven.

Hoe je oude Reddit terugkrijgt

Hoe je oude Reddit terugkrijgt

Reddit veranderde hun ontwerp opnieuw in januari 2024. Het herontwerp is zichtbaar voor desktopbrowsergebruikers en vernauwt de hoofdfeed en biedt links

Hoe inhoud uit leerboeken te kopiëren met Google Lens

Hoe inhoud uit leerboeken te kopiëren met Google Lens

Het typen van je favoriete citaat uit je boek op Facebook kost tijd en zit vol met fouten. Ontdek hoe u Google Lens gebruikt om tekst uit boeken naar uw apparaten te kopiëren.

Fix Server DNS-adres kon niet worden gevonden in Chrome

Fix Server DNS-adres kon niet worden gevonden in Chrome

Soms, wanneer u in Chrome werkt, heeft u geen toegang tot bepaalde websites en krijgt u de foutmelding 'Fix Server DNS-adres kan niet worden gevonden in Chrome'. Hier ziet u hoe u het probleem kunt oplossen.

Beknopte handleiding voor het maken van herinneringen op Google Home

Beknopte handleiding voor het maken van herinneringen op Google Home

Herinneringen zijn altijd het belangrijkste hoogtepunt van Google Home geweest. Ze maken ons leven zeker gemakkelijker. Laten we een korte rondleiding geven over hoe u herinneringen kunt maken op Google Home, zodat u nooit belangrijke boodschappen hoeft te doen.

Netflix: wachtwoord wijzigen

Netflix: wachtwoord wijzigen

Hoe u uw wachtwoord op de Netflix-streamingvideoservice kunt wijzigen met uw favoriete browser of Android-app.

Hoe u de prompt voor het herstellen van paginas in Microsoft Edge kunt uitschakelen

Hoe u de prompt voor het herstellen van paginas in Microsoft Edge kunt uitschakelen

Als u het bericht Pagina's herstellen op Microsoft Edge wilt verwijderen, sluit u gewoon de browser of drukt u op de Escape-toets.

Bitwarden: hoe u uw hoofdwachtwoord kunt wijzigen Tip

Bitwarden: hoe u uw hoofdwachtwoord kunt wijzigen Tip

Als uw Bitwarden-wachtwoordhint verbeterd kan worden, zijn dit de stappen om deze in minder dan een minuut te wijzigen.

Afbeeldingen worden niet weergegeven in Google Doc: waarom en hoe dit op te lossen

Afbeeldingen worden niet weergegeven in Google Doc: waarom en hoe dit op te lossen

Als uw afbeeldingen niet in een Google-document worden weergegeven, kan het probleem verschillende redenen hebben. Hier zijn enkele mogelijke oplossingen

Rijen en kolommen verbergen en zichtbaar maken in Google Spreadsheets

Rijen en kolommen verbergen en zichtbaar maken in Google Spreadsheets

Beheers de toepassing Google Spreadsheets door te leren hoe u kolommen kunt verbergen en zichtbaar maken. U kunt dit doen op zowel computers als mobiele apparaten.