Using Your Brand Colors in Online Design Programs
Download the printable PDF here.
From Canva to Piktochart there are now many ways to make simple images online to promote your organization. These tools let you create just about anything – including a mess.
One important way to keep your brand image strong is to be consistent with color from your website to your business card to your social sites.
Online design programs offer a limited color palette. But you can create your own colors by learning the “hex value” of your brand colors. A “hex value” begins with a pound sign (#) and is followed by a combination of six letters/numbers that are used to define a color digitally.
To find the hex value of your brand colors you can use Photoshop or an online tool called “Get Colors from Image”.
Let’s start with finding the hex value in Photoshop:
Step 1: Open your image.
Start by opening the image with the colors you need (for example, your logo) in Photoshop
Go To: File > Open > Find the image you would like to open
Step 2: Find the correct tool on the toolbar.
On your toolbar to the right, towards the bottom, you will see two squares that are overlapping and look like this:
Step 3: Click on the top square (in this case the black square).
When you click this a color selection window that looks like this will open:
Step 4: Select the color with the eyedropper tool.
You will also notice that as you move your cursor over your image an eyedropper tool appears. Just click on the color that you need with that eyedropper. The hex value for that color will appear at the bottom of the left column, as shown below.
If you don’t have Photoshop there are other options. Here is how you will find the hex value on the online tool “Get Colors from Image”.
Step 1: Go to the website.
Start by going to: http://html-color-codes.info/colors-from-image/
You will find a window that looks like the one shown below. Click browse in the top left corner and select the image with the colors you need (for example, your logo).
Step 2: Open the image.
After you open the image in the tool, the top bar will look like this:
Step 3: Click “Show Image” for the image to appear in the program.
Step 4: Select a color using your cursor.
As you move your cursor over the different elements of the image, different colors will appear to the right.
Click on a color that you would like the hex value of and the hex value will appear in the bottom right corner of the tool.