• Skip to main content
  • Skip to primary sidebar

Technipages

Tutorials and fixes for smartphone, gadget, and computer problems

  • Topics
    • Android
    • Gaming
    • Hardware
    • Internet
    • iOS
    • MacOS
    • Office
    • Software
    • Windows
    • Definitions
  • Product Reviews
  • Downloads
  • About Technipages

How to Identify Specific Color on an App or Website

By Mona Leave a Comment

Imagine you’re scrolling through images and you find the perfect color  – the exact shade you need for your next design project. There are some awesome tools on the internet to help you identify specific colors on any app or website. Let’s take a look at some of the best options them.

1. Using Developer Tools on Chrome Web Browser

One option you can try is the Chrome Developer tool. Chrome comes with a lot of helpful features for developers, making tasks much easier to do. You can use the following steps to identify specific colors on any app or website.

  • Open the website on which you want to identify a color on Chrome web browser
  • Click on the three-dot icon to the top right of Chrome. A pop up with a bunch of options will appear.
  • Click on ‘More Tools’ and then select ‘Developer tools’ from the resultant pop up.
  • Use Ctrl + Shift + I if you want to skip the above steps
  • Now, the window divides into two screens – the website to the left and the code of the website to the right
  • Type in Ctrl + Shift + C on your keyboard. This shows you all the details of a particular element on the website when we hover our mouse cursor on the elements.
  • You can find the color code of the element along with other useful information.

Example

Let’s say that you’re interested in the specific color codes for some elements on the following website:

You can choose the developer tools by clicking on the three dots in the corner of your screen. In the drop-down menu, select More tools, then Developer tools.

The screen will be visually divided into two pages. You’ll see the website to the left and the site’s code to the right.

Type the command and short cut “Ctrl + Shift + C” and hover the mouse cursor over the elements of the website. This will show the color of that element, along with other useful information. Below are two examples where we find the color of the navigation bar and a dashboard below the search tool.

Here, we can find the color code on the pop up for the navigation bar. The color code is #333333.

The color of the dashboard can be found along with other useful details. Color: #333333, Background color: #5D4A8E. Though it might look a bit intimidating in the beginning, the program becomes much easier to use with a bit of practice.

2. Eye Dropper Chrome Extension

Eye Dropper is a popular and widely used Chrome extension to help you find certain colors on any website or app.

Follow the below steps to identify specific colors on a website or app using the Eye Dropper extension tool.

  • Open any website or app on the Chrome Web Browser
  • Click on the Eye Dropper extension icon
  • Select ‘Pick color from web page’ and hover your mouse cursor on different elements on the app or website.

You can find the color code of the elements listed in the bottom right of the webpage.

Example

Okay, let’s use the eyedropper extension tool in a real-life example. We ‘ll begin by opening a website and hitting the Eye Dropper extension icon

When you hover your cursor on various elements of the website, you can see the color codes appear in a section at the bottom right of the screen.

When I hover my cursor on the V-shaped icon, I can see its color code at the bottom window as mentioned. The advantage of this tool is that you can also find the RGB code along with the hex color code of the element. The method is flexible to use for those who want a simple and quick way to grab the codes for their favorite colors.

You Might Also Like

  • Firefox: How to Identify a Specific Color in a Web Page
    Firefox: How to Identify a Specific Color in a Web Page
  • How to Identify the Font from an Image
    How to Identify the Font from an Image
  • Windows 10: How to Identify Apps Hogging System Resources
    Windows 10: How to Identify Apps Hogging System Resources
  • Skype Error: Unable to Identify the Calendar Owner
    Skype Error: Unable to Identify the Calendar Owner
  • How to Check If a Website Is Down
    How to Check If a Website Is Down
  • How to Translate a Website
    How to Translate a Website
  • How to Add a Website to Your Home Screen
    How to Add a Website to Your Home Screen
  • Bitwarden: How to Disable Website Icons
    Bitwarden: How to Disable Website Icons
  • How to Increase the Size of Text on Any Website on iPad
    How to Increase the Size of Text on Any Website on iPad

Filed Under: Internet

Reader Interactions

Did this help? Let us know!

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Recent Posts

  • Windows 11: How to Add Clocks with Different Time Zones
  • Google Assistant: How to Never Miss a Birthday
  • Windows 11: How to Disable Notifications and Ads
  • How to Use Oculus Quest 2 Air Link
  • How to Create an Avatar in the Oculus Quest 2
  • 5 Free and Fun Math Apps for Kids
  • Windows 11: How to Discover What Graphics Card You’re Using
  • How to Change Display Resolution on Windows 10 and 11

Who’s Behind Technipages?

Baby and Daddy My name is Mitch Bartlett. I've been working in technology for over 20 years in a wide range of tech jobs from Tech Support to Software Testing. I started this site as a technical guide for myself and it has grown into what I hope is a useful reference for all.

© Copyright 2022 Technipages · All Rights Reserved · Privacy