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. Every pick comes back as HEX, RGB and OKLCH with the 50 to 950 scale it belongs to drawn underneath.
What the eyedropper tool reads
Move your cursor over the image below and click to keep a color. The panel a click leaves behind is the one the extension draws, three formats and the shade scale included. On a real page the picker works the same way, because it samples the frame the browser painted, not 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. 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. Zoom is a setting, 5x to 15x.
Formats. HEX, RGB and OKLCH sit on the pick with a copy button each. The popup adds HSL and CMYK.
Tailwind shades. Every pick expands into the 50 to 950 scale. Click any stop to copy it as HEX, RGB or OKLCH.
History. The last 16 colors wait in the popup. 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 the hue and saturation, moves only the lightness and marks the stop your pick landed on. Click any stop to copy it as HEX, RGB or OKLCH, ready for a Tailwind config.
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.
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