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
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.
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.
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
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.
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.
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