As a web designer, what's the software you absolutely must have on your computer? The chances are it's Photoshop and Illustrator. And while those are the essentials of your design workflow, there are smaller tools you probably don't know you need.

The best thing is, you don't even have to download them—just install these Chrome extensions and away you go. From identifying fonts on pages to measuring distances between web elements, these web design Chrome extensions will make your life easier.

1. PerfectPixel

PerfectPixel by WellDoneCode helps you develop a pixel-perfect website by letting you add an image overlay on a website with a few clicks.

You can upload an image from your computer, URL, or clipboard. Thanks to this extension, you can add multiple layers to a website, adjust the image size, and change the opacity. The extension allows customization and supports keyboard shortcuts.

It has a free and paid plan. The free one should be enough for most people. The Pro plan, however, is ad-free, offers priority support, and supports layer rotation, for $14.99 a year. PerfectPixel by WellDoneCoode is a featured extension with over 300,000 downloads.

Download: PerfectPixel by WellDoneCode for Google Chrome (Free, in-app purchases available)

2. Fonts Ninja

fonts-ninja-screenshot-1

With thousands of fonts available, your typography possibilities are endless. Especially if you can identify a beautiful font you see somewhere and borrow it for your own project.

Fonts Ninja is a Chrome extension that helps you do just that. Much like the tools that find fonts from images, it helps you identify the fonts you see online. The only difference is that Fonts Ninja reads the fonts coded into the page's CSS, like the typeface of headings and body text.

When you launch Fonts Ninja, it will show you the information on the font you direct it to—and not only the typeface, but also the weight, size, height, width, and color. You can bookmark these font details for future reference using this extension.

Download: Fonts Ninja for Google Chrome (Free)

3. ColorPick Eyedropper

ColorPick EyeDropper screenshot

No matter how good an eye for color you have, it's hard to recreate a particular shade you saw online unless you know its RGB or HTML values. Luckily, you don't have to guess if you have ColorPick Eyedropper.

Like the best color picker apps for Mac, ColorPick Eyedropper will show you the values for any color you point at. The difference being that it's always there in your browser and you don't have to upload anything—just click on the icon and move the target to the right spot.

The extension reads colors from text, images, and pretty much anything you might see on a web page (even the ads). Once you capture a color, it shows you the HTML, RGB, and HSL values for it.

Download: ColorPick Eyedropper for Google Chrome (Free)

4. Dimensions

dimensions chrome extension screenshot

This open-source extension is a find for web designers, especially if you do one-time gigs for small businesses. When a client hands you down a website without any previous files or documentation and asks you to design "a page like this, but with different text and images," figuring out the layout is a pain.

Dimensions lets you easily measure the height and width of any element on the page, as well as the margins between them. That makes it easy to recreate existing pages and double-check your own designs after they go into production.

Download: Dimensions for Google Chrome (Free)

5. Visual Inspector

Visual Inspector is a powerful tool for web designers, combining the features of the previous three extensions and adding even more.

In the Inspect tab, you can pick any element on the page to get full information about it, from dimensions to the file name. The Colors and Typography tabs let you see the color palette and all fonts at a glance, while Assets gathers all images on the page in one place.

After launching the extension, you can click on any element and modify it locally using the Inspect tab. The CSS Output tab is where you can get CSS code updated in real-time as you make changes to the site.

Initially, the changes are saved locally, though you can export them. It also displays the mobile version of the site.

Download: Visual Inspector for Google Chrome (Free)

6. Screen Recorder

screen recorder extension screenshot

A screen capture extension may seem redundant, since taking a screenshot on Mac is a breeze, and capturing your screen on Windows is just a little more hassle. But Screen Recorder has quite a few selling points.

Most importantly, it lets you capture the entire web page automatically, not just the area you see on your screen. That's priceless when you need to report several issues on a long page, and capturing them all would take three to four screenshots.

It comes with a built-in image editor which lets you make necessary changes before downloading the file or uploading it to Google Drive. Screen Recorder isn't just limited to screenshots, the extension makes recording screen or webcam videos a breeze.

Download: Screen Recorder for Google Chrome (Free)

7. Designer Tools

designer tools screenshot

Designer Tools is a handy Chrome extension to help you create pixel-perfect designs. The extension enables you to align all the elements of the Chrome webpage by adding rulers and grids. Similarly, you can add an overlay to any website.

The extension is somewhat customizable as you can adjust the ruler width, fonts, and theme. Designer Tools has a Plus version, at $11.50 a year, which includes features like a design panel and overlay.

Download: Designer Tools for Google Chrome (Free, subscription available)

8. Muzli 2

muzli 2 screenshot

Finally, there's one crucial task you have to deal with every morning: shaking off the remains of sleep and getting into the groove. Muzli 2 by InVision will serve as your morning newspaper with curated articles on art, design, UX, and technology.

Muzli replaces your default Chrome tab and allows you to customize what you see there. Depending on your interests, Muzli will pick feeds for you, with websites ranging from Dribble and Behance to 99designs and Creative Bloq. Plenty of inspiration to scroll through while you're sipping your first coffee!

If you think an entire browser tab packed with design content is too intense, Muzli also has a Lite version. It won't override your default tab, and you'll be able to access the feed whenever you like, just by clicking the extension icon.

Download: Muzli 2 for Google Chrome (Free)

Get Chrome Extensions for All Your Design Tasks

The Chrome extensions on this list are no match for your design software, but they cover all the little things that come with being a designer—be it typography intel or taking screenshots.

Once you realize that the Chrome Web Store is brimming with tools, it can be hard to stop adding new ones. So learn how to manage your Chrome extensions before they get out of hand.