Best Free Color Picker Tools for Web Designers (2026)
Every web designer needs to grab an exact colour from a screen. In 2006 I used the ColorZilla Firefox extension and standalone apps like ColorPix and ColorPic. ColorZilla is still around, but now browsers and operating systems have color picker tools built in. Here are the best free options in 2026.
Quick answer: For colours on a web page, use your browser’s DevTools colour picker or the ColorZilla extension. For anywhere on screen, use Windows PowerToys Color Picker (Win+Shift+C) or the built-in Digital Color Meter on a Mac. Online tools like Coolors and Adobe Color help turn picked colours into full palettes.
Table of Contents
Built-in color pickers
- Chrome, Edge and Firefox DevTools (external site): inspect an element, click a colour swatch in the Styles panel and use the eyedropper to sample any pixel on the page.
- Windows PowerToys Color Picker (external site): press Win+Shift+C to pick any colour on screen and copy HEX, RGB or HSL.
- macOS Digital Color Meter (external site): in Applications > Utilities, shows values for any pixel; press Cmd+Shift+C to copy.
- Google search: type “color picker” for a quick in-browser picker.
Browser extensions
- ColorZilla (external site): eyedropper, colour history, palette browser and CSS gradient generator for Chrome and Firefox.
- ColorPick Eyedropper (external site): zoomed view for precise picking.
Palette and contrast tools
- Coolors (external site): generate and lock palettes, extract colours from images.
- Adobe Color (external site): colour wheel harmonies and image-based themes.
- WebAIM Contrast Checker (external site): make sure text meets accessibility contrast ratios.
Tips
- Save brand colours as CSS custom properties (for example
--brand: #1e88e5;) so they’re easy to reuse. - Check contrast for text and buttons, a core part of the CRAP design principles.
- Remember screens differ; test colours on phones and laptops.
More designer tools: our list of Firefox add-ons for web designers.
FAQ
How do I find the HEX code of a colour on a website?
Open DevTools, inspect the element and click its colour value, or use ColorZilla.
Is there a color picker in Windows 11?
Not by default; install Microsoft PowerToys for its Color Picker.
Can I pick colours from an image?
Yes. Open it in a browser and use an eyedropper, or upload it to Coolors or Adobe Color.
Stuck on a gift? Try our free Gift Idea GeneratorIdeas for anyone by age, job, interests and budget, with Amazon.com and Amazon.in linksFind gifts →Get our free weekly email: new tech guides and tools, no spam.
New and updated tech guides, a free tool worth bookmarking and one useful pick, once a week. No spam, unsubscribe anytime.
One email a week. Unsubscribe anytime. See our privacy policy.
I prefer Pixie from Nattyware:
http://www.nattyware.com/pixie.php
It’s free, it’s fast, it’s light and easy.
Thank you, that’s very great!, one year ago, I coded a free and open-source windows-application, this application tells you the color (which is the pointer on it) in many formats such as RGB and Hex. The main function which you must use to get the color of any pixel is “GetPixel” (“Gdi32.dll”).