Wednesday, June 4, 2014

Tutorial: How to Color Match Outside of Photoshop Elements with Hex Codes


In my last tutorial I showed you how to color match text & shapes in Photoshop Elements, but what if you need to match colors outside of that? That can be done too!

First, if you are unfamiliar with the eyedropper tool please refer to my last tutorial here.

To get started you will want to open your graphic up in Photoshop Elements, click on the eyedropper tool & then click on the color to match. It should show up in a little box at the bottom of your toolbar. Below is an example image from my first color match tutorial:


From there click on the little box with your color matched color and you should get a new screen.


The little number at the very bottom is called a hex code. You'll want to write this number down. Whenever you are working in another program that allows you to modify colors or if you want to use the color on your website or blog you (most likely!) will have the opportunity to change the colors by entering a new hex code. Since every application is different I can't say for sure where you will be able to find where to enter the hex code, but chances are as long as you can change colors on something, it will be there. :)

As an example, I went into my blogger template and typed in the hex code to change my post title color to purple.



Here's an example of how I could change the color on my website (FYI - I use Pappashop and you can do this in the "Fonts & Colors" page of your admin screen there).


What if you are drawing up your own graphics, however and need them to match? Here's an example of how I brought the color into Illustrator. I simply drew up a rectangle (yes, I know this is the most boring graphic ever, but I thought it would be OK for an example!). The last color I used in Illustrator was pink, so pink just naturally came up first.


See the little pink box at the bottom of the toolbar (just like the one in Photoshop Elements)? Click on that and the same color picker screen comes up. Simply type your hex color in the hex box:


And now your graphic is purple and has been color matched!


If you will be using the colors in your branding it will also be helpful to keep a copy on hand, especially if you work with any outside designers who may create any branding products for you. That way you can keep your colors as consistent as possible.

I hope this helps some!

 post signature