10 Powerful Chrome Extensions for Designers To Use In 2019

Have you ever been in situations where you visit a website and want to know what font they’re using?

Or…

…what color is on the website?

As a designer, I’ve come across such situations hundreds of times.

After years of being a designer, I’ve come across many handy design tools that helped me with my work.

And, some of the tools I’ve come across are simple Chrome extensions. These extensions come in handy all the time and I think anyone who is a designer should have them installed on their browser.

So, here are the 10 best chrome extensions for designers.

Let’s get started.

10 Best Chrome Extensions for Designers

These chrome extensions will help you improve your design work and get simple tasks done quickly.

I’ve been using these extensions for quite a while and they’ve been very helpful to me.

1. ColorPick Eyedropper

Ever come across a beautiful website where you just wanted to know the colors they’re using?

With the ColorPick Eyedropper Chrome extension, you can find out the color used on any website in a single click.

ColorPick Eyedropper Chrome Extension

This extension has an eyedropper tool that lets you pinpoint at any part of a website to find its color code.

You can get the hex color values along with RGB and HSL color values too.

ColorPick Eyedropper is such a simple extension and yet so powerful for a designer. I’ve used this extension a countless number of times.

2. Page Ruler

If you ever wanted to measure the elements on any web page, then this is the chrome extension you need.

With Page Ruler, you can draw a ruler to any page to view its height and width. It also shows the top, bottom, left, and right position.

Page Ruler Chrome Extension

This chrome extension is really helpful as it offers some great features.

One of these features is the ability to move and resize the ruler using arrow keys. This is very helpful because sometimes you can’t get high accuracy by drawing a ruler using a mouse.

You can also manually change the ruler size and position of the ruler for more precise changes.

Lastly, you can turn the guides on or off according to your needs. You can even change the color of the ruler.

3. WhatFont

I can not even stress how much this extension has helped me.

WhatFont lets you identify fonts on any website. Literally any website!

WhatFont Chrome Extension

It’s also very easy to use. Just hover on the text whose font you want to identify.

WhatFont will also show the font family used, font weight, size, color, style, and line height.

A lot of times I came across websites that use beautiful typography. And, WhatFont helped me identify some really beautiful fonts.

4. Color Grab

If you browse through Dribbble often, you might’ve come across some really cool designs.

With the Color Grab extension, you can get the color palette used in these designs.

ColorGrab Chrome Extension for Designers

Yes, Dribbble shows the colors used in a design. But, with Color Grab, you can copy the color code with just a click!

It’s a simple extension but very useful in many cases.

5. Window Resizer

Window Resizer chrome extensions let you resize your window and emulate different screen resolutions.

This extension is particularly helpful for web designers who want to test a website on different screen resolutions.

Window Resizer Chrome Extension for Designers

There are various screen resolutions you can choose from such as desktop, tablet, laptop, mobile, and more.

What’s even better is that you can even set custom dimensions.

There are other features that let you display the viewport as a popup, change the style of the icons, and use hotkeys for different resolutions.

Recommended Reading: Digital Minimalism: How To Declutter Your Digital Life

6. CSS Peeper

I think you’ll agree with me when I say this:

Every designer has done some code digging on a website. Whether its to find a font or the style.

CSS Peeper Chrome Extension for Designers

This chrome extension prevents you from doing that and does the work for you.

With CSS Peeper Chrome extension, you can view the CSS of any element on a web page.

But, it’s not limited to that.

CSS Peeper also shows the font family used, colors on a web page and the elements. You can export the elements to SVG format with this extension.

In a way, this extension does most of the work a designer would usually do manually.

7. Google Font Previewer

There have been times when I came across a website and wondered how it would look with a different font.

Google Font Previewer Chrome extension makes this possible.

This extension lets you choose a Google Font and apply it on any web page. You can choose to apply the font on the entire web page or a selected part.

Google Font Previewer Chrome Extension for Designers

It also lets you star fonts you use often.

From a web designer’s perspective, this tool is very useful in cases where you want to view a page with a different font without having to change the font.

8. Site Palette

While the Color Eyedropper extension lets you find out a color from any page, this Chrome extension lets you directly download the color palette of any website.

The plugin supports several palette generators and also creates a shareable link of your color palette.

Site Palette Chrome Extension for Designers

You can download the auto-generated Sketch template of your palette. The extension also supports Adobe Swatch.

Lastly, you can also download your palette in a PDF.

9. Muzli

Muzli is basically a new tab page Chrome extension but specifically made for designers.

This extension will replace your new tab with design inspiration. All your design inspiration from UI/UX to interactive design will be in one place.

Muzli Chrome Extension for Designers

Muzli brings this design inspiration from over 120 feed syndications. You can customize the feed by choosing the feeds you want to be displayed in the new tab.

This is not a must-have chrome extension for designers but a really helpful for those who have to visit different websites for inspiration.

10. Nimbus Screenshot

There are many screenshots and screen recording extensions available on the Chrome web store.

But, I find Nimbus Screenshot to be the best.

Nimbus Screenshot Chrome Extension for Designers

This is because you can take screenshots in many different ways. You can capture a full page, visible part of the page, selected area, and more.

You can also choose between JPG and PNG format for your image captures.

The extension also gives you the option to delay the screenshot.

With Nimbus Screenshot, you can also record your browser window. So, you don’t have to download an extension just for screen recording.

Lastly, the extension gives you the choice to choose the action after capture. You can either edit your capture, download it directly, or send to Nimbus or Google.

Over To You

So, these are the 10 best Chrome Extensions for designers.

Now, it’s your turn to try out these extensions and see how they help you.

I have all these extensions installed on my browser and use them on a regular basis.

Which extensions are you going to install? Tell me in the comments below!

Comments

6 thoughts on “10 Powerful Chrome Extensions for Designers To Use In 2019”

  1. This is the best chrome extension for designers and it is really helpful for me specially Muzli, ColorPick Eyedropper.Thank you for sharing this post.I am a regular raeder of your blog.so please keep sharing…

  2. Thanks for introducing great extensions. I have three extensions already installed. But I found CSS peeper and Color Grab more useful. I expecting the same kinds of posts in the future

  3. Marlon Francis

    Thank you for sharing this nice article. This Article helpful and useful for many people and in this article give information for became expert in Chrome Extension and for that in this post step by step explanation in deeply helpful for people who want learn more. It’s wonderful information you shared.

  4. Thanx for this great article. I will surely use these all extensions for my next project. Hope for the best.

  5. Thank you for sharing your insights about great extensions. I have installed 2 extensions already. And I found Muzli and CSS Peeper very effective and useful. Thank you for this article.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.