(813) 596-9141

How to Find a Color Code on a Website:
Step-by-Step Guide for Non-Techies

By Kristie Parker

Do you ever see a color on a website and think, “That’s the perfect color for my new logo!”

You see a color that you just love, and you can’t help but imagine how it would look on your website, social media posts, or even in your physical branding. But how do you get that color? You can’t just grab it off the page!

I use this feature in my website design business all the time and I constantly recommend it to clients. It’s called ColorPick Eyedropper, a free Chrome extension (like an app for your computer) that can help you get the exact color code of any element on a website.

It’s super easy to install and use, even if you’re not a techie. 

Find the Perfect Color for Your Website with ColorPick Eyedropper

With ColorPick Eyedropper, you can:

  • Find the exact shade of any color on a website. No more guessing games or settling for "close enough" hues.
  • Use the color code to create a new website, redesign your current website, or create social media posts, logos, and other marketing materials.

In this step-by-step guide, I’ll show you how to install and use ColorPick Eyedropper. So let’s get started.

Step 1: Make Chrome Your Browser

If you already use Chrome, go right to Step 2. If you use Safari, Firefox or another browser, you’ll need to download Chrome first.  

Here’s how to do it:

Step 2: Access the Chrome Web Store

Google “Chrome Web Store”. This will take you to the official store where you can find all kinds of extensions and apps to enhance your browser’s capabilities.  

Search for the extension

Once you’re in the Chrome Web Store, you’ll see a search bar in the top left corner. Type ‘ColorPick Eyedropper’ into this bar and press Enter. This will bring up a list of extensions related to your search.

Install the extension

Among the search results, you’ll find the ‘ColorPick Eyedropper’ extension. Click on it. On the next screen click ‘Add to Chrome’ which is usually in the top right corner of the extension’s box. A dialog box will appear asking you to confirm the new extension installation.

Confirm the installation

Click on ‘Add extension’ in the confirmation box. Chrome will then download and install the extension automatically. You won’t need to restart your browser, and the whole process typically takes just a few seconds.

Step 3: Pin it

Once you’ve installed the extension, look for the extension icon at the top right corner of your browser. If you don’t see it right away, don’t worry! Simply click on the puzzle piece icon and find ‘ColorPick Eyedropper’ in the list. Click the pin icon next to it, and voila, it will now show up in your browser’s toolbar.

Step 4: Pick Your Color

Now, let’s get to the fun part. Say you’ve landed on a website and you’re in love with a certain color. To find its exact code, click on the ColorPick Eyedropper icon in your toolbar. Your cursor will transform into an eyedropper. Next, just hover over the color you’re interested in and click. The hex code for that color will automatically appear in a box on your screen.

Step 5: Use Your Color

Once you’ve got your hands on the hex code, it’s time to put it to use. This magical little code lets you replicate the exact color you picked, anywhere you need it.

Online Tools:

If you’re using an online tool like Canva to create social media posts, flyers, or other graphics, you can use the hex code to customize colors. Look for an option to “Enter Hex Code” or “Try ‘blue’ or bacbd8” when choosing colors.

Website Builders:

If you’re using a website builder like WordPress, Squarespace, or Wix, you can also use this hex code. Often when changing background colors, text colors, or theme colors, you’ll have the option to enter a custom color code. That’s where you input your hex code!

Professional Designers:

If you’re working with a graphic designer or a web designer, you can share the hex code with them. They’ll know exactly how to use it to match the color in their design work.

I used the hex code for the yellow Book Now button from Step 4 to make this Instagram post in Canva!

Now You Know How to Find the Color Code on A Website

And there you have it – a simple, effective way to identify and use colors from any website. ColorPick Eyedropper is one of those amazing tools that make the design process a whole lot easier. So go on and add a little more color to your next project.
Recent Posts

Call

Email

Text