Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
How Tos

HTML Color Picker Tools For Firefox, Google Chrome and Internet Explorer

HTML Color Picker tool

I was developing a website for a client, I desired to use a specific a color but poor me, I could not recognize the color code, I tried looking for ways to get the hex code and I didn’t want to make use of the old and long process ways I used to whereby I will make a screenshot of the area, then save as an image, imported to Corel draw, then used color picker tool to pick the color. This was a long process and I was looking for a more simpler method of achieving this right from my browser tab.

If you have ever found yourself in my situation, this post is purposely made for you to be able to easily pick your preferred color when developing or doing anything else with color. Below are some of the html color picker tools that have tested and i can assure you they all work perfectly.

How to Pick Web Colors and the Exact Color Code

There are various browsers add-ons to achieve this and below are some of the best extensions for picking web color according to each browser

Color Picker Tools For Internet Explorer

Internet Explorer 9 and higher versions come with inbuilt tools for picking colors, this does not require any add-on or extension. Follow the steps below

  • Navigate to the menu tab at the top of your IE browser locate “TOOLS”, place your mouse on the tab to display the drop down menu
  • From the drop-down menu, select “Show Color Picker”, alternatively you can use the keyboard shortcut “Ctrl + K” to show the color picker.
  • Once that is done, you can now use the basic color picker to select any color sample from the web page, you can pick a color from any object on the page. All you have to do is to position your mouse over the object, left click on the object and it will indicate the HEX and RGB values of the color.
  • Click copy and close, the HTML value of the color will be copied to the clipboard
LATEST ON TECHPUNCH  How to Create Another Instagram Account on the Same Device

That’s all about Internet Explorer. Even though it’s not my favorite browser but some still find it useful.

Color Picker Addon and Extension for Mozilla Firefox

Obviously, one of the best browsers out there, Firefox together with Google Chrome are my favorite browsers, just because both browsers comes with various add-ons to make browsing experience much easier. To pick web color on Firefox, you need an addon to achieve this, unlike IE that comes with an inbuilt color picker.

Color Picker Download for Firefox

ColorPicker and ColorZilla are the top add-ons for picking colors on Firefox.

ColorZilla has recorded 191,513 downloads with 379 reviews and was last updated in May, 2017 while ColorPicker has 77,706 downloads with just 46 reviews and was last updated in November 2014 as at the time of writing this post. From the stats, I will recommend ColorZilla due to the frequent update and the number of users and reviews.

To download ColorPicker, visit https://addons.mozilla.org/en-US/firefox/addon/colorpicker/, on the page, click the “ADD TO FIREFOX” button to install on your browser. See the image below

This addon is very easy to use, once installed, restart your browser and a color picker icon will display at the top right corner of your browser next to browser menu as shown in the image below

To download ColorZilla, visit https://addons.mozilla.org/en-us/firefox/addon/colorzilla/, click “ADD TO FIREFOX” as well to install on your browser. This add-on is compatible with Firefox 57+

You can read more about colorzilla features at http://colorzilla.com/firefox/

Once successfully installed, restart your browser and navigate to the add-on option on your browser to enable the addon you have just downloaded. Just like ColorPicker, a color picker icon will display at the top right corner of your browser.

LATEST ON TECHPUNCH  How To Check BVN On MTN

html color picker tools firefox

Just click on any of the picking tool icons and place your cursor on the object you want to pick a color from, copy and close. The color HTML code will be copied to the clipboard for use.

Color Picker Addon for Google Chrome and UC Browser

Google Chrome is a browser developed by Google itself and this is one of the best browsers out there. UC browser is developed by the UCWEB team, this browser is using the framework of Google Chrome. Any google chrome addon will also work for UC Browser.

You will need an addon on chrome to be able to pick colors

Color Picker Chrome

ColorZilla is also available on the Chrome web store.

Visit https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en

to download the addon, on the page, click the “ADD TO CHROME” button to install the add-on, restart your browser. A color picker icon will display at the top right corner of your chrome. Click and place your cursor on the object to pick color from, save and close to add to clipboard

html color picker tools extension chrome

Another addon for chrome is Color Pick Eye Dropper,

Visit https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en to download, click “ADD TO CHROME” to install. Don’t forget to restart your browser after successful installation.

html color picker tools extension chrome

Those are my handpicked tools for picking web colors.

Other Color Picker Software

If you don’t want to make use of the method above, you can download a software called Instant Eye Dropper. This software will identify and automatically paste the HTML code of the color to the clipboard with a single mouse click. Of course, it is a free software to use.

Download http://instant-eyedropper.com/download/InstantEyedropper.exe

You can also view all HTML color codes http://instant-eyedropper.com/info/html_color_code/

If there are any other tools you know for picking web colors, please kindly share using the comment box below.

Video Tutorial on how to use Color Picker

Leave a Comment