SNATCHR — The last color, font, and style guide Chrome plugin you will ever need
Post 001 in the “Recommend” series by Font Pair 👍
The Font Pair team realized we use some awesome web tools everyday that make our lives easier. We wanted to give them the spotlight and share some of our favorites in a series we are calling the “Font Pair Recommends” series. Here is the first recommendation from yours truly!
Have you ever visited a beautiful website like this…
or this…
and wondered what color that was or what font they were using.
Yeah me too! I would always right click and do “inspect” or “view page source” in order to find out via their code. Enter Snatchr.
About SNATCHR
Snatchr is a Google Chrome extension that grabs the stylesheets of a website for you. The plugin style guide includes background colors, font colors, and other typographical information like font size. The plugin was created by Mio Yoshigiwa & Michael Dintaman.
What it does
- Find a website that you like
- Click the SNATCHR icon in your Chrome extension toolbar
- View the colors
- View the typography
What I use it for
As a web designer, I use SNATCHR everyday. No exaggeration. I’m constantly on the lookout for great color combinations and font pairings so this tool comes in handy. Whenever I come across a website that interests me I simply click the SNATCHR icon in my browser tools and get the info I need. Super quick and easy.
Pros
- All in one tool to find the color and typography of any website
- Color circles make it easy to see which hex color code is for which color
Cons
- The way the typography section is designed makes it hard to find the name of the font… could be redesigned for better accessibility
- The plugin is currently only for Google Chrome :(
Why I use it
I use SNATCHR over other tools because it gives me a simple style guide of the website. This gives me a sense of what the web designers used quickly without having to do any digging of my own. Many of the other similar resources are only color pickers or typography finders but this tool has both in one easy to use plugin.
Who it’s good for
Anyone who loves design and is always curious what colors and fonts are being used when they stumble across cool websites!
Other similar resources
Here are a few similar resources to checkout as well
- FontFace Ninja — a free browser extension that let you inspect, try, buy and bookmark any fonts on any website that you visit.
- WhatFont — a free browser extension that allows you to inspect web fonts by just hovering over them (also available as an iPhone app!).
- ColorZilla — helps you get a color reading from any point in your browser, quickly copy it for personal use.
Thanks for reading
Feel free to leave a comment below or reach out to me on Twitter with any questions ✌️
