How to Identify Specific Color on an App or Website

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.