Best browser extensions for designers

ColorZilla is the long-running all-round colour tool for the browser. Its core is an eyedropper that reads the colour of any pixel on a page. Around it sit a Photoshop-style colour picker, a CSS gradient generator, a page analyser that builds a palette for a site, and a history of recent picks. The developer says it has been downloaded more than 10 million times across Chrome and Firefox.

Picking is flexible. You can sample a single pixel or average a block of up to 25 by 25 pixels, copy values to the clipboard automatically, adjust a colour by hue, saturation and value, and pick at any zoom level. Version 4 added a magnifier and an eyedropper that reads colours from outside the browser window.

It is closed source, and the Chrome version was last updated on 22 May 2024, when it moved to Manifest V3. We found no reports of data selling, injected affiliate links or ownership changes. The listing and privacy page say it collects no browsing data, which is the developer's own statement, and the all-sites permission it needs is broad. The Chrome listing shows no in-app purchases. For most people who need a colour picker, start here.

Fonts Ninja is the font finder for people who want to know not just what a font is called but whether they can use it. Hover over text on any page and it shows the font name, styles, foundry and price, then lets you try, bookmark or buy the font. It says its Font DNA method analyses the real font file rather than only reading the CSS, which helps when a site uses renamed or custom web fonts.

It also lists every font on a page, shows CSS properties, suggests similar typefaces, and has a font search with filters for letter shapes, licence and price. The extension is free on Chrome and Firefox, and on Safari it comes through a free App Store app.

The trade-off is data. Its privacy policy says that when you request a font identification it may collect the URL of that page. It says it does not use those URLs to track browsing or build a history, and does not transfer, sell or rent personal data. Chrome's privacy panel also lists personal information, authentication information and location as handled. It is closed source and needs access to all websites. If you choose fonts for a living, it is the most capable option here.

WhatFont does one thing and does it in two clicks. Turn it on, hover over any text and a small tag names the font. Click, and a panel shows the styles applied. Press covered it as early as 2014, and its developer says 3 million people use it. The Chrome listing is by Chengyin Liu, who also publishes the Safari apps.

Version 3.3.0, released on 12 October 2026, redesigned the details panel. It now shows the real font name, where the font comes from, letter spacing, line height in pixels and the HTML element. You can click any value to copy it or copy all the CSS at once. It also works in Safari on Mac, iPhone and iPad through free apps.

It is deliberately small. It names the font and its styles but does not tell you the licence or where to buy it, which is where Fonts Ninja is stronger. Chrome's listing says the developer collects no data, and the Safari privacy policy says the apps use no analytics, advertising or tracking. We could not find a public source repository, and the Chrome rating is 3.8 from about 2,100 ratings. If you only need to know what a font is, this is the quickest way.

ColorPick Eyedropper is a zoomed eyedropper and colour chooser written and maintained by one developer, Sam Larison. Its main idea is precision: you get a magnified, draggable preview so you can nudge the pointer to the exact pixel, then copy the value as hex or RGB. The source code is on GitHub, and the Firefox listing declares the Mozilla Public License 2.0.

It works on a snapshot of the page, refreshed when you scroll, so you press R to re-snap after changes. Automatic copying to the clipboard is off by default, which means the clipboard permission it requests at install does nothing until you turn the setting on. It is free, and the Chrome version is Manifest V3 and was updated on 18 October 2026.

It is a one-person project with rough edges. The listing itself warns that it may take a few tries to start working. The code also contains a legacy registration feature tied to the developer's own site, and the repository has no licence file, so the Firefox listing's declaration is the clearest licence statement. Chrome's listing says no data is collected or sold. The listing asks businesses to buy a licence. For a precise, inspectable eyedropper rather than a toolkit, it is a good choice.

Dimensions measures space the quick way. Activate it with Alt+D, then move the pointer and it shows the distance up, down, left and right until it hits a border, so you can read the gap between two elements in pixels. Felix Niklas made it, and it is MIT licensed with the source on GitHub.

Because it reads pixels rather than the page's structure, it works on anything you can see: buttons, icons, images, videos, and a mockup PNG or JPEG you drop into the browser. Holding Alt measures a connected area, which is handy for the radius of a circle. It is tiny, under 20 KB in Chrome, and its Chrome manifest asks only for the active tab and scripting permissions.

It is a measuring tape, not an inspector. It does not read CSS, and the listing says it does not work well on images, where colours change from pixel to pixel. The Chrome build moved to Manifest V3 in October 2025, while the Firefox build on the store dates from April 2024. Chrome's listing says no data is collected, and the rating is 4.0 from about 460 ratings. If you want a free, small, readable ruler, install it.

PerfectPixel is for the moment a developer says the page is done and a designer says it is not. It lays a semi-transparent copy of the mockup over the live page so you can see where your build drifts. WellDoneCode LLC makes it and says it has been on the Chrome Web Store for over ten years.

You can drag in an image, paste a URL or paste from the clipboard, then scale, move and fade the overlay. Four blend modes plus normal include Difference, which highlights mismatches, and a lock lets clicks pass through to the page. Layers are saved per site and restore across sessions, and the panel can move to the browser's side panel so mobile designs fit device mode.

The free tier allows two layers and shows ads in the panel; Pro adds unlimited layers, folders, rotation, a dark theme and custom CSS, and removes the ads. Its privacy policy describes optional anonymous usage statistics, including country-level location, on by default outside the EU, UK and EEA, and says it does not collect the addresses or contents of pages you visit. It is closed source. Chrome rates it a modest 3.2 from about 640 ratings, Firefox 4.7 from only 31. A sound choice for overlay checks.

html.to.design turns a web page into editable Figma layers. The Chrome extension captures the page you are looking at, including pages behind a login or running on a local server. You then bring the capture into Figma by pasting it, sending it to the html.to.design plugin or saving a file. It is made by Divriots, a French company.

The extension is a companion to the Figma plugin, which you need for some features. The company says free users get the key import features, including public sites by URL and the extension for private or local pages, while the paid Pro plan adds bulk imports, high-resolution image detection and unlimited imports under a fair-use limit.

Mapping a page accurately means using Chrome's debugging features, so it asks for powerful access. The listing says it handles website content, while the privacy policy says it collects no personal data and does not say whether captured pages reach its servers. It is closed source and only in the Chrome Web Store, with no Firefox or Safari version. The listing shows regular updates, most recently on 2 November 2026. If your workflow ends in Figma, this is the one.