Have you ever been in situations where you visit a website and want to know what font they’re using?
…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.
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.
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.
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.
I can not even stress how much this extension has helped me.
WhatFont lets you identify fonts on any website. Literally any website!
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
There are many screenshots and screen recording extensions available on the Chrome web store.
But, I find Nimbus Screenshot to be the best.
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!