[I’m bringing back Tech Trick Tuesday, where I explain little tips or tricks that help you do something faster or more efficiently. They might be workflow hacks or browser add-ons, like this one.]
Have you ever found yourself needing to know the hex number of a color?
Maybe you’re designing a social post that goes with a branded award your attorney is receiving, or more likely, you’re designing invites for your friend’s or kid’s birthday party. 😉
The Issue
You want the hex number for a color you’re looking at on the internet.
The Solution
A browser extension that gives you the hex (or RGB) number for a color you click on.
What You Need
You’ll rarely find me outside of Chrome, so:
The Extension & Setup
Most browsers have what they call extensions, allowing you to access functionality outside-of-the-Chrome-box. One of these is the color picker. Think old-school PhotoShop eye dropper.
Now, there are several options when it comes to extensions. I’ve been using the same one for several years, so I’ll run through that one – ColorZilla.
Click on the link above and make sure you add it to Chrome.
One of the new, annoying Chrome updates is that whenever you add a new extension to Chrome, instead of showing up in the browser trayWhere the extension icons sit in your browser In Chrome, it's in the upper right corner between the ... More, it hides under the puzzle piece.
If you want to keep it visible, make sure the pin is blue.
How It Works
Let’s say I’m throwing a rad ’90s party and want a coordinating theme with a stock image I chose.
Click on the eyedropper in your tray.
It’ll pop up a menu, select Pick Color From Page.
As you can see below, a toolbar will appear at the top where you’ll see the color change depending on where your crosshairs are (what your cursor turns into).
You can’t see it, but I’m hovering over the circled image. At the top, you can see the tool gives me the RGB and hex codes. If you actually click on the color, it’ll save the hex number to your clipboard.
Bells & Whistles
That’s not all the color picker does, of course. ColorZilla keeps a log of colors you’re picking, so you can go back and copy the hex code if you forgot it. There are a couple other website tools for website developers – a gradient tool and color-chooser.
I don’t use any of these – just the color picker! Though the color log is handy, I’ll say.
