A color picker that works on the whole page, images included
Hoverify's eyedropper tool reads the pixel your browser actually rendered, so a color inside an image or an iframe picks the same as one on a flat background. A magnifier and a crosshair get you onto the pixel you meant.
What the eyedropper tool reads
Move your cursor over the image below and click to keep a color. On a real page the picker works the same way, because it samples the frame the browser painted rather than the CSS behind it.
Images. Photos, logos, canvas elements and video frames all give up a color, not only flat CSS backgrounds.
IFrames. An embedded frame is just more pixels to the picker, so a color inside one behaves like any other.
Magnifier. Hoverify blows up the area under the cursor and puts a crosshair on the pixel you're about to take.
Formats. HEX, RGB and OKLCH sit on the pick with a copy button each. The popup adds HSL and CMYK.
Pause. Freeze the picker, move your hand, then carry on from wherever the cursor ended up.
History. The last 16 colors wait in the popup, so the one from two pages ago is a click away.
One color is rarely the end of it
You usually need the darker version for hover, the lighter one for a background and the dozen others the page already uses. The eyedropper is one half of that; the Inspector's palette is the other.
A full shade scale from one pick
Take any color and get the whole range, 50 through 950. Hoverify holds its hue and saturation and moves only the lightness, so the 11 values drop into a Tailwind config instead of being hand-mixed in a design tool first.
Save the ones worth keeping
Send a color to your Library and it lands in a project beside the assets you saved there. Connecting Google Drive is what switches the Library on, though a color is kept as its hex rather than uploaded as a file.
Every color on the page at once
When you want the whole palette rather than one swatch, the Inspector pulls every color the page uses. Useful when you're matching an existing site instead of starting one.
Fonts too. The Inspector shows which fonts each tag renders in and where the files load from.
Contrast. The accessibility panel gives you the ratio the text hit, the ratio it needed and the nearest passing color.
Shortcuts. Alt+P opens the picker, and so does the right-click menu. Rebind it if Alt+P is already taken.
What developers and designers say about picking colors
Reviews from the Chrome Web Store.
Terri Tutich
As a website developer, this plugin has so many handy features. One of my favorites is the ability to quickly take full page screenshots very easily, and the inspector tool and color selectors I use very often. There are lots of other different extensions or browser functions that offer these, but I love that everything is all in one place and consistent across different browsers and devices. Highly recommend.
Rahul Singh
Awesome Tool for Developers and Web Deisgners, Everything in one sorted place with this lighweght extension. I have been using it since 2 years now I guess and always helpful
Frequently Asked Questions
Have a question we haven't answered? Get in touch.
Can the eye dropper pick colors out of an image?
Yes. The pick reads the pixel your browser actually rendered rather than the CSS behind it, so photos, logos, canvas elements and video frames all work. Iframes work for the same reason. If you only want to pull colors out of an image file you already have, the free web version does that without the extension.
Which color formats does it give me?
The pick panel hands you HEX, RGB and OKLCH, each with its own copy button. Open the Color Eyedropper popup and the same color is waiting there as HSL and CMYK too, in fields you can type into.
How do I hit the exact pixel I mean?
A magnifier follows the cursor and blows the area up, with a crosshair sitting on the pixel you're about to take, so a one-pixel border or the darker edge of a gradient is reachable. If you need to move your hand, pause the picker and carry on afterwards.
Can I build a scale from one color?
Yes. Any color expands into 11 stops from 50 to 950, the scale Tailwind and most design systems already use. Hoverify holds your color's hue and saturation, varies only the lightness and anchors the color you picked at whichever stop it sits closest to.
Does it remember what I picked?
The last 16 colors stay with you. The Color Eyedropper popup shows them as a grid, so the one from two pages ago is a click away. You can also save a color to your library, alongside the assets you've extracted.
Which browsers does the color picker work in?
Chrome, Edge, Brave and other Chromium browsers are fully supported. Every tool runs in the Firefox build too; it carries an experimental label because Chromium gets fixes and new features first.
Is the color picker free?
It's bundled with Hoverify, which is paid and carries a 14-day refund policy. That refund is how you try it, since the eyedropper isn't sold separately. One license runs in 3 browsers at a time and nothing auto-renews. See the pricing.
Color is usually the first thing you go looking for
It's rarely the last. Hoverify keeps the eyedropper next to the CSS inspector, the asset extractor and the screenshot tools, so once you have the color you can also get the gradient it sits in and the logo next to it.
- 3 browsers per license
- 14-day refund
- No auto-renewal
Hoverify
Keep reading
Guides from our blog that go deeper on this.
The science of color: building palettes for web projects
Why some palettes hold together and others don't, and how to build one that survives dark mode.
Read the guideHow to extract CSS from any website
Getting the colors is step one. Here's how to get the rest of the styles that go with them.
Read the guideDark mode with Tailwind CSS
Picking a second palette that doesn't just invert the first one.
Read the guideReverse-engineering ecommerce UX with developer tools
How to study a competitor's design decisions without copying their code.
Read the guide