Frequently Asked Questions

Copying Colors from Your Website to Use in Designs

Print this Article
Last Updated: May 7, 2015 2:03 PM

To Copy Colors From Your Website:

To start, you'll need a program that can tell you the exact names (in hex code) of the colors that you have on your website. We have different suggestions for you, if you're a Mac user, or a PC user.

For Mac Users

There is a built in feature you can use, called the DigitalColor Meter.

*If you have OS X 10.6.6, and above, you might need an app, instead. One great choice is The Olá Brothers' Sip. You can find more description, and a quick overview on the iTunes app page.

To find and use DigitalColor Meter to Grab Your Colors:

  1. Open your applications folder and scroll down till you find the utilities folder. The utilities folder is where you'll find DigitalColor Meter.
  2. Next, set the drop down menu to RGB as Hex Value, 8 bit.
  3. Make the Aperture Size the smallest it can go. Then simply hover the mouse over the color, on your site.
  4. Type in shift+sommand+c to copy the color, and then paste with command+v into a text file. You'll now see the color as a hex code! (For extra commands, see this link.)
  5. copy colors from website, color meter

  6. Grab all the colors you want to use from your site, and paste them all in the same text file, for easy reference. Then proceed below with creating your custom theme!

For PC Users

If you use a Windows operating system like XP, Vista, 7, or 8 -- there are many programs you can use to identify these colors on your site. Below are several free color picker programs that you can download. There are also paid programs out there, if you would like enhanced security and support.

Color Picker Suggestions:

Anny Studio's Just Color Picker
Iconico's ColorPic
WinCatalog's GetColor!

An Example for Grabbing Your Site Colors:

  1. In our example, we're going to use the Anny Studio Just Color Picker. So first you need to download the program. Follow the link to the Annystudio download page, and click on the download link.
  2. Open the program, and you'll see a box like the ones below. Go to your website and put your mouse over the color you want. Press alt+x.
  3. copy colors from website, hotkey

  4. On the left hand side of the program, you'll see the color along with its 6 digit name. This light blue color's name is: #B1C7FF. Copy that code into a text file, where you can refer to it, later.
  5. Continue grabbing the hex codes of all the colors that you want to use in your email campaign. Then proceed with creating your custom theme!

To Use Your Copied Colors in a Custom Email Theme

Once you've collected all of the main colors on your website, you're ready to create your new custom theme. :-)

To get started, you need to be in the Composer screen. Just click on the Edit button under the thumbnail of one of your campaigns in your Dashboard. Or, click Compose to start from scratch.

  1. Click on the Themes tab on the right.
  2. Click the Create theme button at the bottom.
  3. copy colors from website, finding your email theme

  • Enter the name you'd like your theme to have, and press Create New.
  • To customize your theme, click on the text type or color area you want to change. For this example, I clicked on Heading.
  • On the formatting palette, you'll see all the options for how to adjust this specific text type. Go back to your list of collected color codes, and copy the 6-digit hex code of the color you want to use.
  • Click on the 6 digit number shown on the formatting palette, and paste the new number in. Make sure it matches the code you grabbed from your site.
  • copy colors from website, hex codes here

  • Ta Da! The headings are now pink. Now just click the left arrow button in the top left of the palette to rinse and repeat with all your other colors.
  • click to repeat

    The changes you are making to your custom theme will reflect in the composer screen, as well, as you're working. So, if you have content with headings and subheadings, etc. you'll be able to see your changes happening, live!

  • When you're all finished designing your custom theme, just hit the Okay, update button, to save your changes.
  • Remember, you can select this new, custom theme for any future campaigns you create. It will be stored under your Themes tab on the right, with the name you gave it. And if you clone a campaign that uses this theme, the copy will already have this theme applied!

    Related Topics:

    More on Creating A Custom Theme
    How Do I Change the Size and Font Styles?
    How Do I Add Images?
    How Do I Edit My Content?

    Rate this article: